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

    ]
};