ECharts 饼图
前面的章节我们已经学会了使用 ECharts 绘制一个简单的柱状图，本章节我们将绘制饼图。
饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要 xAxis，yAxis。
实例
myChart.setOption({
series : [
{
name: &qpos;访问来源&qpos;,
type: &qpos;pie&qpos;, // 设置图表类型为饼图
radius: &qpos;55%&qpos;, // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data:[ // 数据数组，name 为数据项名称，value 为数据项值
{value:235, name:&qpos;视频广告&qpos;},
{value:274, name:&qpos;联盟广告&qpos;},
{value:310, name:&qpos;邮件营销&qpos;},
{value:335, name:&qpos;直接访问&qpos;},
{value:400, name:&qpos;搜索引擎&qpos;}
]
}
]
})
尝试一下 »
我们也可以通过设置参数 roseType: &qpos;angle&qpos; 把饼图显示成南丁格尔图。
实例
option = {
series : [
{
name: &qpos;访问来源&qpos;,
type: &qpos;pie&qpos;,
radius: &qpos;55%&qpos;,
roseType: &qpos;angle&qpos;,
data:[
{value:235, name:&qpos;视频广告&qpos;},
{value:274, name:&qpos;联盟广告&qpos;},
{value:310, name:&qpos;邮件营销&qpos;},
{value:335, name:&qpos;直接访问&qpos;},
{value:400, name:&qpos;搜索引擎&qpos;}
]
}
]
};
尝试一下 »
阴影的配置
itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等：
实例
option = {
series : [
{
name: &qpos;访问来源&qpos;,
type: &qpos;pie&qpos;,
radius: &qpos;55%&qpos;,
data:[
{value:235, name:&qpos;视频广告&qpos;},
{value:274, name:&qpos;联盟广告&qpos;},
{value:310, name:&qpos;邮件营销&qpos;},
{value:335, name:&qpos;直接访问&qpos;},
{value:400, name:&qpos;搜索引擎&qpos;}
],
roseType: &qpos;angle&qpos;,
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: &qpos;rgba(0, 0, 0, 0.5)&qpos;
}
}
}
]
};
尝试一下 »
