echarts实用篇（一）——饼状图
echarts实用篇（一）——饼状图
从官网上我们可以看到通常用到的有这几类：
- 常规饼状图
- 环形图
- 嵌套环形图
- 纹理饼图
- 南丁格尔玫瑰图
- 定制饼状图
下面来看看各类的基本做法，直接使用官网上的例子。
常规饼状图
代码主体：
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
{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}
{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}
{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}
{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}
{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}
{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]
}
},根据数值大小配置颜色
这种需要跟随数据变化的通常称为定制饼状图。