ECharts 图表使用 pie 来实现饼图,饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。饼图更适合表现数据相对于总数的百分比等关系。如果只是表示不同类目数据间的大小,建议使用 柱状图,人们对于微小的弧度差别相比于微小的长度差别更不敏感,或者也可以通过配置 roseType 显示成南丁格尔图,通过半径大小区分数据的大小。

下面是自定义南丁格尔图的示例:

series[i]-pie.type   |   string

[ default: 'pie' ]

series[i]-pie.name   |   string

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series[i]-pie.legendHoverLink   |   boolean

[ default: true ]

是否启用图例 hover 时的联动高亮。

series[i]-pie.hoverAnimation   |   boolean

[ default: true ]

是否开启 hover 在扇区上的放大动画效果。

series[i]-pie.hoverOffset   |   number

[ default: 10 ]

高亮扇区的偏移距离。

series[i]-pie.selectedMode   |   boolean, string

[ default: false ]

选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single','multiple',分别表示单选还是多选。

series[i]-pie.selectedOffset   |   number

[ default: 10 ]

选中扇区的偏移距离。

series[i]-pie.clockwise   |   boolean

[ default: true ]

饼图的扇区是否是顺时针排布。

series[i]-pie.startAngle   |   number

[ default: 90 ]

起始角度,支持范围[0, 360]。

series[i]-pie.minAngle   |   number

[ default: 0 ]

最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互。

series[i]-pie.roseType   |   boolean, string

[ default: false ]

是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:'radius' 扇区圆心角展现数据的百分比,半径展现数据的大小。

'area' 所有扇区圆心角相同,仅通过半径展现数据大小。

series[i]-pie.avoidLabelOverlap   |   boolean

[ default: true ]

是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。

如果不需要开启该策略,例如圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false。

series[i]-pie.stillShowZeroSum   |   boolean

[ default: true ]

是否在数据和为0(一般情况下所有数据为0) 的时候不显示扇区。

series[i]-pie.cursor   |   string

[ default: 'pointer' ]

鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。

series[i]-pie.label   |   Object

饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。

series[i]-pie.labelLine   |   Object

标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。

series[i]-pie.itemStyle   |   Object

图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

series[i]-pie.zlevel   |   number

[ default: 0 ]

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series[i]-pie.z   |   number

[ default: 2 ]

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series[i]-pie.center   |   Array

[ default: ['50%', '50%'] ]

饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。

支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。

使用示例:// 设置成绝对的像素值

center: [400, 300]

// 设置成相对的百分比

center: ['50%', '50%']

series[i]-pie.radius   |   Array

[ default: [0, '75%'] ]

饼图的半径,数组的第一项是内半径,第二项是外半径。

支持设置成百分比,相对于容器高宽中较小的一项的一半。

可以将内半径设大显示成圆环图(Donut chart)。

series[i]-pie.markPoint   |   Object

图表标注。

series[i]-pie.markLine

图表标线。

series[i]-pie.markArea   |   Object

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

series[i]-pie.silent   |   boolean

[ default: false ]

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series[i]-pie.animationType   |   string

[ default: 'expansion' ]

初始动画效果,可选'expansion' 默认研圆弧展开的效果。

'scale' 缩放效果,配合设置 animationEasing='elasticOut' 可以做成 popup 的效果。

series[i]-pie.animation   |   boolean

[ default: true ]

是否开启动画。

series[i]-pie.animationThreshold   |   number

[ default: 2000 ]

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series[i]-pie.animationDuration   |   number

[ default: 1000 ]

初始动画的时长,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果:animationDuration: function (idx) {

// 越往后的数据延迟越大

return idx * 100;

}

series[i]-pie.animationEasing   |   string

[ default: cubicOut ]

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例。

series[i]-pie.animationDelay   |   number, Function

[ default: 0 ]

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:animationDelay: function (idx) {

// 越往后的数据延迟越大

return idx * 100;

}

也可以看该示例

series[i]-pie.animationDurationUpdate   |   number, Function

[ default: 300 ]

数据更新动画的时长。

支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果:animationDurationUpdate: function (idx) {

// 越往后的数据延迟越大

return idx * 100;

}

series[i]-pie.animationEasingUpdate   |   string

[ default: cubicOut ]

数据更新动画的缓动效果。

series[i]-pie.animationDelayUpdate   |   number, Function

[ default: 0 ]

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:animationDelayUpdate: function (idx) {

// 越往后的数据延迟越大

return idx * 100;

}

也可以看该示例

series[i]-pie.tooltip

本系列特定的 tooltip 设定。

label mpchart 饼图_ECharts饼图属性设置相关推荐

  1. echarts年龄饼图_echarts饼图

    1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...

  2. layui 显示饼图_ECharts 饼图 如何显示比例值

    上面是官方配置手册上的一段话,解释了一下2.x和3版本配置不一样,2.x的配置方式在3上依然有效. ECharts 3 饼图显示比例值: option = { title : { text: '某站点 ...

  3. label mpchart 饼图_Android MPChart—饼图-Go语言中文社区

    第三方资源库MPChart如何添加到项目中就不说了,不知道的网上搜一下,很多. 本篇主要说明MPChart中PieChart(饼图)是如何调用实现的. 一.布局文件 android:id=" ...

  4. echarts切换折线图变大_Echarts折线图属性设置大全

    Echarts折线图属性设置大全 var option = { backgroundColor: '#FFF0F5', title: { text: '折线图', subtext: '模拟数据', x ...

  5. python饼图显示百分比怎么设置_python使用Matplotlib绘制饼图

    一.函数原型 plt.pie(x, explode=None, labels=None, colors=None, autopct=None, pctdistance=0.6, shadow=Fals ...

  6. apex图表使用饼图居中_echarts饼图标题居中以及调整主副标题的间距、字号

    text:主标题 subtext:副标题 textStyle: {} //主标题的属性设置 subtextStyle: {} //副标题的属性 itemGap:主副标题之间的间距 textAlign: ...

  7. Echarts折线图属性设置大全

    Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...

  8. html一个页面同时加载多个饼图,Html5饼图绘制实现统计图的方法

    Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图(统计图)的方法.先看一下饼图效果: 这个图是动态生成的,根据传入的比例参数( ...

  9. Visual Studio 2010 C++ 用户属性设置

    在 <Visual Studio 2010 C++ 工程文件解读>中提到了C++工程中可以利用 Microsoft.Cpp.$(Platform).user.props 文件进行用户自定义 ...

最新文章

  1. Spark Learning
  2. VS2017 Pro未能找到路径“……\bin\roslyn\csc.exe”的解决方案
  3. 怎么查交集_胃镜要不要查?
  4. JDK_Tomcat_MyEclipse配置
  5. oracle dump 转储
  6. 使用Java程序输出1~100之间 7的倍数的个数及总和,并打印输出
  7. iis下安装Memcache
  8. 固定资产管理有关的计算机知识,计算机技术在固定资产管理中的具体应用.pdf...
  9. android 监听本机网络请求_fiddler如何抓取https请求实现fiddler手机抓包-证书安装失败100%解决...
  10. date js 半年_moment.js 搜索栏获取最近一周,一个月,三个月,半年,一年时间
  11. 怎样练习一万小时(转)
  12. 【LeetCode】剑指 Offer 62. 圆圈中最后剩下的数字
  13. Spring Boot引起的“堆外内存泄漏”排查及经验总结 1
  14. c语言调用函数转置矩阵,C语言问题!高手进!
  15. 【数学建模】2 TOPSIS优劣解距离法
  16. 全国计算机等级考试网络版客户端,Sctest计算机等级考试系统网络版
  17. 并行计算——冯·诺依曼结构
  18. 香山芯片调试目标完成,直播完毕
  19. 正态分布基本概念及公式
  20. Nature子刊:使用纳米孔测序从微生物组中得到完整闭环的细菌基因组

热门文章

  1. UFS详细介绍---终章
  2. 响应式布局详解(优缺点)
  3. 停电让服务器自动关机,服务器断网/断电自动关机小工具 断网/断电5分钟后自动关机...
  4. 华为软件测试工程师无线产品线实习生第一次视频面试
  5. CocosCreator学习3:定义全局变量
  6. mysql 上传rar文件大小_js文件上传 自定义压缩文件和文件格式及大小限制
  7. 子矩阵的和(Python实现)
  8. CWebBrowser 中处理回车相应的问题
  9. python模块cpca修改源码支持国外地址解析
  10. 教你快速爬取哔哩哔哩整部番剧的视频弹幕