Echarts 教程
1. ECharts 教程 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 饼图 5. ECharts 样式设置 6. ECharts 异步加载数据 7. ECharts 交互组件 8. ECharts 数据的视觉映射 9. ECharts 事件处理 10. ECharts 旭日图

ECharts 饼图

ECharts 饼图

前面的章节我们已经学会了使用 ECharts 绘制一个简单的柱状图,本章节我们将绘制饼图。

饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目。因为不在直角坐标系上,所以也不需要 xAxis,yAxis。

实例

myChart.setOption({ series : [ { name: '访问来源', type: 'pie', // 设置图表类型为饼图 radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。 data:[ // 数据数组,name 为数据项名称,value 为数据项值 {value:235, name:'视频广告'}, {value:274, name:'联盟广告'}, {value:310, name:'邮件营销'}, {value:335, name:'直接访问'}, {value:400, name:'搜索引擎'} ] } ] })

55面试教程网 »

我们也可以通过设置参数 roseType: 'angle' 把饼图显示成南丁格尔图。

实例

option = { series : [ { name: '访问来源', type: 'pie', radius: '55%', roseType: 'angle', data:[ {value:235, name:'视频广告'}, {value:274, name:'联盟广告'}, {value:310, name:'邮件营销'}, {value:335, name:'直接访问'}, {value:400, name:'搜索引擎'} ] } ] };

55面试教程网 »

阴影的配置

itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等:

实例

option = { series : [ { name: '访问来源', type: 'pie', radius: '55%', data:[ {value:235, name:'视频广告'}, {value:274, name:'联盟广告'}, {value:310, name:'邮件营销'}, {value:335, name:'直接访问'}, {value:400, name:'搜索引擎'} ], roseType: 'angle', itemStyle: { normal: { shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };

55面试教程网 »