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:\'搜索引擎\'}
            ]
        }
    ]
})

我们也可以通过设置参数 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:\'搜索引擎\'}
            ]
        }
    ]
};

阴影的配置

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)\'
                }
            }
        }
    ]
};