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

    ]
};