Echarts3实例南丁格尔饼图

实现效果

知识点

• 图例垂直&＃xff0c;位置
• 饼图位置
• 设置多种颜色
• Tooltip格式化

代码实现

option &＃61; {title: {text: &＃39;管线管龄分类统计&＃39;,top:10,left:10},tooltip : {trigger: &＃39;item&＃39;,formatter: "{a}
{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: &＃39;vertical&＃39;,top:40,left: 20,data: [&＃39;不足10年&＃39;,&＃39;10~20年&＃39;,&＃39;20~30年&＃39;,&＃39;30~40年&＃39;,&＃39;40~50年&＃39;,&＃39;无记录日期&＃39;]},series : [{name:&＃39;管线管龄&＃39;,type:&＃39;pie&＃39;,radius : &＃39;70%&＃39;,center: [&＃39;55%&＃39;, &＃39;55%&＃39;],data:[{value:335, name:&＃39;不足10年&＃39;},{value:310, name:&＃39;10~20年&＃39;},{value:274, name:&＃39;20~30年&＃39;},{value:235, name:&＃39;30~40年&＃39;},{value:400, name:&＃39;40~50年&＃39;},{value:260, name:&＃39;无记录日期&＃39;}].sort(function (a, b) { return a.value - b.value; }),roseType: &＃39;radius&＃39;,label: {emphasis: {show: true}},lableLine: {emphasis: {show: true}},itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: &＃39;rgba(0, 0, 0, 0.5)&＃39;}},animationType: &＃39;scale&＃39;,animationEasing: &＃39;elasticOut&＃39;,animationDelay: function (idx) {return Math.random() * 200;}}]}