渐变gauge+pieecharts 饼配置项内容和展示

借鉴之后的修改，

      var data=0.4;
var colorList = [
    [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#58ffc8'
          }, {
            offset: 1,
            color: '#ffffae'
          }]), "#0d5e6d"],
    [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: '#f99b4e'
    }, {
        offset: 1,
        color: '#ffcc96'
    }]), "#0d5e6d"],
];
option = {
    backgroundColor: "#031845",
    color: ['#293041', '#293041', '#fcfa3c', '#f44061','1b6783'],
    series: [
        {
            name: '外环',
            type: 'pie',
            clockWise: false,
            radius: ["40%", "32%"],
            startAngle: 90,
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                }
            },
            hoverAnimation: false,
            center: ['50%', '50%'],
            data:[{
                name: '暗部',
                value: 100-data*100,
                itemStyle: {
                    normal: {
                        color: colorList[0][1],
                        shadowColor: colorList[0][1],
                        shadowBlur: 0
                    }
                },
            }, {
                name: '亮部',
                value: data*100,
                itemStyle: {
                    normal: {
                        color: colorList[0][0],
                         shadowColor: colorList[0][0],
                        shadowBlur: 40,
                    },
                    emphasis: {
                        color: colorList[0][0],
                    }
                }
            }],
            },
           {
            name: "内环",
            type: 'gauge',
            splitNumber: 100,
            radius: '30%',
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269,
            detail: {
              formatter: "{value}%",
              show: true,
              offsetCenter: ["0", "0%"],
              fontWeight: "bold",
              fontSize: 40,
              color:'#18ffd9',
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: [[data, colorList[0][0]],[1, colorList[0][1]]]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                length: 22,
                lineStyle: {
                    color: 'auto',
                    width: 2.5
                }
            },
            axisLabel: {
              show: false
            },
            title: {
              show: false
            },
            pointer: {
              show: false
            },
                    data: [{
              value: data*100,
            }],
        },
      
    ]
};