Echarts3实例 南丁格尔饼图

实现效果

知识点

图例垂直，位置
饼图位置
设置多种颜色
Tooltip格式化

代码实现

option = {
title: {
text: '管线管龄分类统计',
top:10,
left:10
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}公里 ({d}%)"
},
toolbox: {
show : true,
top:10,
right:10,
feature : {
saveAsImage : {show: true}
}
},
grid:{
top:60,
right:20,
bottom:30,
left:60
},
legend: {
orient: 'vertical',
top:40,
left: 20,
data: ['不足10年','10~20年','20~30年','30~40年','40~50年','无记录日期']
},
series : [
{
name:'管线管龄',
type:'pie',
radius : '70%',
center: ['55%', '55%'],
data:[
{value:335, name:'不足10年'},
{value:310, name:'10~20年'},
{value:274, name:'20~30年'},
{value:235, name:'30~40年'},
{value:400, name:'40~50年'},
{value:260, name:'无记录日期'}
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
emphasis: {
show: true
}
},
lableLine: {
emphasis: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
}