仪表盘组合一

新东西：markPoint、渐变色

效果图：

代码：

const colors = ["#8CE0A6","#23CBF1","#D5B32F", '#F87B8C'];
option = {
  series: [
    { // 外层
      type: 'gauge',
      startAngle: -90,
      endAngle: 270,
      radius: '68%',
      axisLine: {
        lineStyle: {
          width: 10,    // 外围光圈宽度
          color:  [   // 圆形颜色渐变
            [0.1, colors[0]],
            [0.3, new echarts.graphic.LinearGradient(
              0, 1, 0, 0,
              [{
                  offset: 0,
                  color: colors[0]
                }, {
                  offset: 0.8,
                  color: colors[1]
              }]
            )],
            [0.4, colors[1]],
            [0.6, new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [{
                offset: 0,
                color: colors[1]
              }, {
                offset: 0.9,
                color: colors[2]
              }]
            )],
            [0.9, new echarts.graphic.LinearGradient(
              0, 1, 0, 0,
              [{
                offset: 0,
                color: colors[3]
              }, {
                offset: 0.6,
                color: colors[2]
              }]
            )],
            [1, colors[3]]
          ],
        }
      },
      pointer: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitNumber: 4,   // 东南西北四个方向的须须
      splitLine: {
        show: true,
        distance: -28,
        length: 17,
        lineStyle: {
          color: "auto",
          width: 3
        }
      },
      axisLabel: {
        show: false,
      },
      detail: {
        show: false,
      },
      data: [
        {
          value: 100
        }
      ]
    },
    {  // 内层
      type: 'gauge',
      startAngle: -90,
      endAngle: 270,
      radius: '60%',
      splitNumber: 18,
      axisLine: {
        lineStyle: {
          width: 50,   // 内层分格断宽度
          color:  [
            [0.1, colors[0]],
            [0.3, new echarts.graphic.LinearGradient(
              0, 1, 0, 0,
              [{
                offset: 0,
                color: colors[0]
              }, {
                offset: 0.8,
                color: colors[1]
              }]
            )],
            [0.4, colors[1]],
            [0.6, new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [{
                offset: 0,
                color: colors[1]
              }, {
                offset: 0.9,
                color: colors[2]
              }]
            )],
            [0.9, new echarts.graphic.LinearGradient(
              0, 1, 0, 0,
              [{
                offset: 0,
                color: colors[3]
              }, {
                offset: 0.6,
                color: colors[2]
              }]
            )],
            [1, colors[3]]
          ],
        }
      },
      markPoint:{    // 指针中间的固定点
        symbol:'circle',
        symbolSize:25,
        data:[
          //跟你的仪表盘的中心位置对应上 颜色 auto自适应
          {x:'center',y:'center',itemStyle:{color: 'auto'}}
        ]
      },
      pointer: {
        itemStyle: {
          color: 'auto' // 颜色 auto自适应
        }
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        distance: -50,   // 跟axisLine的宽度保持一致
        length: 50,
        lineStyle: {
          color: '#fff',  // 改成背景颜色
          width: 10
        }
      },
      axisLabel: {
        show: false,
      },
      detail: {
        show: false,
      },
      data: [
        {
          value: 67
        }
      ]
    }
  ]
};