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}],
},]
};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！