本文主要是介绍EChart案例-圆形环比图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果：
配置options:
let data=[{value: 20,name: '水质',itemStyle:{normal: {color:'#40a7e9'}}}, {value: 35,name: '流量',itemStyle:{normal: {color:'#f4c052'}}}, {value: 25,name: '状态',itemStyle:{normal:{color: '#6ed971'}}}, {value: 15,name: '水位',itemStyle:{normal: {color:'#f38051'}}}]let option = {title: {text: '',},legend:{data:['水质','流量','状态','水位',],bottom:10,left:90,orient:'vertical',itemGap:25,formatter(name){let item=data.find(node=>node.name==name);return ['{title|'+item.name+'}{value|'+item.value+'%}{value|'+item.value+'}'].join('\n')},textStyle:{color:'#fff',fontSize:18,rich: {title: {color: '#73a1b0',align: 'left',fontSize:22,width:165,},value: {color: '#fff',align: 'left',fontSize:26,width:165,fontFamily:'Helvetica'},}}},series: [{z:10,type: 'pie',center:['50%', '35%'],radius: ['45%', '55%'],startAngle: 135,itemStyle : {normal : {label : {show : false},labelLine : {show : false}},},data:data},{ //内圆type: 'pie',center:['50%', '35%'],radius: '40%',itemStyle: {normal: {color: new echarts.graphic.RadialGradient(.5, .5, .8, [{offset: 0,color: '#0a2957'},{offset: .52,color: '#0a2957'},{offset: 1,color: '#71a8ca'}], false),shadowColor: '#71a8ca',shadowBlur: 12,label: {show:true,position:'center',textStyle: {color: '#fff',fontSize: 30,fontWeight:400,},},labelLine: {show: false}},},hoverAnimation: false,label: {show: true,},tooltip: {show: false},data: [{name:'100',value:0}],
},]
};
这篇关于EChart案例-圆形环比图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
