1echarts gauge配置项内容和展示

饼图

       let colors = ['#35d964', '#d9bc39', '#da5660'],
     color;
 let data = 1; //数值大小
 let max = 3; //满刻度大小
 let title = {
     text: data,
     subtext: 'PUE',
     x: 'center',
     y: 'center',
     textStyle: {
         color: '#fff',
         fontSize: 30
     },
     subtextStyle: {
         color: '#fff',
         fontSize: 12
     }
 };

 if (data < 1.5) {
     color = colors[0];
 } else if (data > 1.5 && data < 2.5) {
     color = colors[1];
 } else if (data > 2.5 || data == 2.5) {
     color = colors[2];
 }
 option = {
     backgroundColor: '#000f1e',
     title: title,
     series: [
         {
            name: "",
            type: 'gauge',
            splitNumber: 40, //刻度数量
            min: 0,
            max: 100,
            radius: '85%', //图表尺寸
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0,
                    shadowBlur: 0,
                    color: [
                        [1, '#0dc2fe']
                    ]
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: 'auto',
                    width: 2
                },
                length: 20,
                splitNumber: 5
            },
            splitLine: {
                show: true,
                length: 20,
                lineStyle: {
                    color: 'auto',
                }
            },
            axisLabel: {
                show: false
            },
            pointer: { //仪表盘指针
                show: 0,
            },
            detail: {
                show: 0,
            },
        },
         {
             type: "pie",
             center: ["50%", "50%"],
             radius: ["80%", "85%"],
             hoverAnimation: false,

             data: [
                 {
                     name: "",
                     value: data * 0.8,
                     itemStyle: {
                         borderColor: color,
                         borderRadius: 10,
                         borderWidth: 5,
                         color: color,
                     },
                     labelLine: {
                         show: false,
                         lineStyle: {
                             color: 'rgba(0,0,0,0)',
                             width: 2
                         }
                     }

                 },
                 { //画中间的图标
                     name: "",
                     value: 0,
                     label: {
                         position: 'inside',
                         backgroundColor: color,
                         borderRadius: 30,
                         borderWidth: 15,
                         borderColor: 'rgba(0,0,0,0.9)',
                         padding: 30,
                     },

                 },
                 {
                     name: "",
                     value: data * 0.2,
                     itemStyle: {
                         borderColor: color,
                         borderWidth: 5,
                         color: color,
                     },
                     labelLine: {
                         show: false,
                         lineStyle: {
                             color: 'rgba(0,0,0,0)',
                             width: 2
                         }
                     }

                 },
                 { //画剩余的刻度圆环
                     name: "",
                     value: max - data,
                     label: {
                         show: false
                     },
                     itemStyle: {
                         borderType: 'dashed',
                         borderRadius: 10,
                         borderColor: '#919192',
                         borderWidth: 0,
                         color: 'rgba(0,0,0,0)',
                     },
                     labelLine: {
                         show: true,
                         lineStyle: {
                             color: 'rgba(0,0,0,0)',
                             width: 2
                         }
                     },

                 }
             ]
         },


     ]
 };