echarts实用篇（一）——饼状图

从官网上我们可以看到通常用到的有这几类：

常规饼状图
环形图
嵌套环形图
纹理饼图
南丁格尔玫瑰图
定制饼状图

下面来看看各类的基本做法，直接使用官网上的例子。

常规饼状图

代码主体：

option = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series : [{name: '访问来源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};

title 配置主标题副标题居中，tooltip 配置提示框显示格式，legend 配置图例标记的位置样式，series 配置主体的数据，饼状图需要基本的 type、radius 、center、data 几项分别设置样式、半径、原点位置和数据。

问题一：如果要自定义扇形区域颜色，怎么办？

我们可以看到上面的例子中并没有提及颜色，每一个扇形区域额颜色实际上都是从全局调色盘 option.color 中获取的，如果想修改，只要按照顺序设置 option.color 的值即可，例如 color:[“red”,”green”] 。

问题二：某个扇形区域的角度太小，鼠标获取位置麻烦或指示不清楚，如何处理？

在 series 有一配置项 minAngle ，作用是配置最小显示角度，用于防止某个值过小导致扇区太小影响交互，取值范围（0 ~ 360）。

问题三：对于值为0的扇形区域应该怎么处理？

在 series 下有一配置项 stillShowZeroSum ，作用是：是否在数据和为0（一般情况下所有数据为0）的时候不显示扇区。默认为 true，也就意味着默认情况下不显示为0的扇形区域，但是为0的扇形区域的 label 还是会显示的，同时问题二中 minAngle 也会影响，导致 stillShowZeroSum 失效。如果想要为0的扇形区域的 label 也不显示，可以如下设置，

{name: leiData[i],value: leiTotal,itemStyle: {normal: {label: {show: function () {if (leiTotal == 0){ return false; }}()},labelLine: {show: function () {if (leiTotal == 0){ return false; }}()}}},
}

这意味着要在每一组数据里面添加 itemStyle 配置。很是繁琐，主要是因为它并不像 formatter 一样能通过回调函数设置。

环形图

代码主体：

option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]
};

只是在常规饼状图的基础上对 series 下的 radius 配置进行修改，radius: [‘50%’, ‘70%’]表示半径范围由 50% 到 70% 。

嵌套环形图

代码主体：

option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']},series: [{name:'访问来源',type:'pie',selectedMode: 'single',radius: [0, '30%'],label: {normal: {position: 'inner'}},labelLine: {normal: {show: false}},data:[{value:335, name:'直达', selected:true},{value:679, name:'营销广告'},{value:1548, name:'搜索引擎'}]},{name:'访问来源',type:'pie',radius: ['40%', '55%'],data:[{value:335, name:'直达'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1048, name:'百度'},{value:251, name:'谷歌'},{value:147, name:'必应'},{value:102, name:'其他'}]}]
};

通过常规饼状图与环状图的整合即可构成嵌套环形图，当然也可以嵌套多个。

纹理饼图

代码主体：

var piePatternImg = new Image();
piePatternImg.src = piePatternSrc;
var bgPatternImg = new Image();
bgPatternImg.src = bgPatternSrc;var itemStyle = {normal: {opacity: 0.7,color: {image: piePatternImg,repeat: 'repeat'},borderWidth: 3,borderColor: '#235894'}
};
option = {backgroundColor: {image: bgPatternImg,repeat: 'repeat'},title: {text: '饼图纹理',textStyle: {color: '#235894'}},tooltip: {},series: [{name: 'pie',type: 'pie',selectedMode: 'single',selectedOffset: 30,clockwise: true,label: {normal: {textStyle: {fontSize: 18,color: '#235894'}}},labelLine: {normal: {lineStyle: {color: '#235894'}}},data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}],itemStyle: itemStyle}]
};

纹理图主要是将 color 切换成背景图，上面的例子一方面更换了整体的背景色 backgroundColor ，一方面也修改了扇形区的背景色。

南丁格尔玫瑰图

代码主体：

option = {title : {text: '南丁格尔玫瑰图',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {x : 'center',y : 'bottom',data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true,type: ['pie', 'funnel']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,series : [{name:'半径模式',type:'pie',radius : [20, 110],center : ['25%', '50%'],roseType : 'radius',label: {normal: {show: false},emphasis: {show: true}},lableLine: {normal: {show: false},emphasis: {show: true}},data:[{value:10, name:'rose1'},{value:5, name:'rose2'},{value:15, name:'rose3'},{value:25, name:'rose4'},{value:20, name:'rose5'},{value:35, name:'rose6'},{value:30, name:'rose7'},{value:40, name:'rose8'}]},{name:'面积模式',type:'pie',radius : [30, 110],center : ['75%', '50%'],roseType : 'area',data:[{value:10, name:'rose1'},{value:5, name:'rose2'},{value:15, name:'rose3'},{value:25, name:'rose4'},{value:20, name:'rose5'},{value:35, name:'rose6'},{value:30, name:'rose7'},{value:40, name:'rose8'}]}]
};

相比较于常规饼状图，添加配置项 roseType 即可生成玫瑰图，它有 ‘radius’ 和 ‘area’ 两种选择，意味着用半径或面积来体现数值的大小！如果我们给它加上一点阴影就可以得到一点立体的效果，代码如下：

option = {title : {text: '南丁格尔玫瑰图',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {x : 'center',y : 'bottom',data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true,type: ['pie', 'funnel']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,series : [{name:'半径模式',type:'pie',radius : [20, 110],center : ['25%', '50%'],roseType : 'radius',label: {normal: {show: false},emphasis: {show: true}},lableLine: {normal: {show: false},emphasis: {show: true}},itemStyle:{normal:{shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX:10,shadowOffsetY:10}},data:[{value:10, name:'rose1'},{value:5, name:'rose2'},{value:15, name:'rose3'},{value:25, name:'rose4'},{value:20, name:'rose5'},{value:35, name:'rose6'},{value:30, name:'rose7'},{value:40, name:'rose8'}]},{name:'面积模式',type:'pie',radius : [30, 110],center : ['75%', '50%'],roseType : 'area',itemStyle:{normal:{shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX:10,shadowOffsetY:10}},data:[{value:10, name:'rose1'},{value:5, name:'rose2'},{value:15, name:'rose3'},{value:25, name:'rose4'},{value:20, name:'rose5'},{value:35, name:'rose6'},{value:30, name:'rose7'},{value:40, name:'rose8'}]}]
};

但是这种添加阴影的有兼容性的问题，据我所知，在 IE 10 上并不能得到展示，事实上这种玫瑰图的可用性并不高，因为用户浏览时不知道你到底是用什么方式来表现数值的大小的，用户常规思维是角度，半径或面积这样的体现方式在饼状图上还是太少见。

定制饼状图

代码主体：

option = {backgroundColor: '#2c343c',title: {text: 'Customized Pie',left: 'center',top: 20,textStyle: {color: '#ccc'}},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series : [{name:'访问来源',type:'pie',radius : '55%',center: ['50%', '50%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:274, name:'联盟广告'},{value:235, name:'视频广告'},{value:400, name:'搜索引擎'}].sort(function (a, b) { return a.value - b.value; }),roseType: 'radius',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20}},itemStyle: {normal: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]
};

定制饼状图是指根据需要添加配置项或修改默认的配置，如：

animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {return Math.random() * 200;
}

用于修改鼠标悬浮的动画方式

data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:274, name:'联盟广告'},{value:235, name:'视频广告'},{value:400, name:'搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),

改变数据的排序方式

visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},

根据数值大小配置颜色
这种需要跟随数据变化的通常称为定制饼状图。

echarts实用篇（一）——饼状图相关推荐

【H5】 echarts绘制条形统计图，饼状图
[H5] echarts绘制条形统计图表格需要引入echarts.js: https://echarts.baidu.com/dist/echarts.min.js 效果图如下: 引入结构: 实例化 ...
echarts实现3d环形饼状图
首先确保在项目中引入了echarts和echarts-gl "echarts": "^4.9.0", "echarts-gl": " ...
Echarts详解之饼状图展示
使用背景:要求展示吃喝玩乐状态,自己查阅了一些资料,现将完整步骤贴在下面,供宝子们参考. 前言:先引入echarts文件一:实现效果二:html代码三:JS代码四:Css样式
php链接echarts教程,图文详解echarts的使用方法（饼状图实例）
在页面布局时经常需要插入一些图表,比如饼状图,柱状图,地图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法 ...
一篇读懂springboot用echarts实现实时柱状图和饼状图查询
1.业务说明将数据库中的数据分别以柱状图和饼状图呈现出来 gitee项目路径:https://gitee.com/ziac/ls.git 2.1 柱状图需要引入的js 建议去echarts官网直接用 ...
echarts饼状图数据过多时，数据叠加(问题篇)
1.问题如下图所示 2.解决办法先给data中声明两个变量 seriesData: [], //决定图表中显示的个数selected: {}, // 决定图表中显示的个数处理后台取到的数据 // ...
SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
场景数据库中每个数据都有开始时间以及结束时间两个字段. 需要根据创建时间筛选出当天的四种类型的数据的平均执行时间. SpringBoot+Echarts实现请求后台数据显示饼状图: https:// ...
SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图
场景 SpringBoot+Echarts实现请求后台数据显示饼状图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/899211 ...
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网: https://www.echartsjs.com/index.html 获取Echarts ...

echarts实用篇（一）——饼状图

echarts实用篇（一）——饼状图

常规饼状图

环形图

嵌套环形图

纹理饼图

南丁格尔玫瑰图

定制饼状图

echarts实用篇（一）——饼状图相关推荐

最新文章

热门文章