Echarts 仪表盘实现平均值和实时值

const gaugeData = [
  {
    value: 20,
    name: '互动发起率实时值',
    title: {
      offsetCenter: ['-25%', '10%']
    },
    detail: {
      offsetCenter: ['-25%', '18%']
    }
  },
  {
    value: 40,
    name: '互动发起平均值',
    title: {
      offsetCenter: ['25%', '10%']
    },
    detail: {
      offsetCenter: ['25%', '18%']
    }
  },
  // {
  //   value: 60,
  //   name: 'Perfect',
  //   title: {
  //     offsetCenter: ['40%', '80%']
  //   },
  //   detail: {
  //     offsetCenter: ['40%', '95%']
  //   }
  // }
];
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '50%'],
      radius: '90%',
      min: 0,
      max: 100,
      // 仪表盘轴线相关配置
      axisLine: {
        // roundCap: true,
        lineStyle: {
          width: 6, // 轴线宽度
          color: [ // 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示
            [0.25, '#FF6E76'],
            [0.5, '#FDDD60'],
            [0.75, '#58D9F9'],
            [1, '#7CFFB2']
          ]
        }
      },
      // 表盘中指针的固定点
      anchor: {
        show: true,
        showAbove: true,
        size: 8,
        itemStyle: {
          color: '#FAC858'
        }
      },
      // 仪表盘指针
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 4,
        length: '80%', // 指针长度，可以是绝对数值，也可以是相对于半径的半分比
        offsetCenter: ['0%', '0%']
        
        // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        // length: '12%',
        // width: 20,
        // offsetCenter: [0, '-60%'],
        // itemStyle: {
        //   color: 'auto'
        // }
      },
      // progress: {
      //   show: true,
      //   overlap: true,
      //   roundCap: true
      // },
      data: gaugeData,
      // 仪表盘标题
      title: {
        fontSize: 14
      },
      // 仪表盘详情，用于显示数据
      detail: {
        width: 40,
        height: 14,
        fontSize: 14,
        color: '#fff',
        backgroundColor: 'inherit',
        borderRadius: 3,
        formatter: '{value}%'
      }
    }
  ]
};
setInterval(function () {
  gaugeData[0].value = +(Math.random() * 100).toFixed(2);
  // gaugeData[1].value = +(Math.random() * 100).toFixed(2);
  // gaugeData[2].value = +(Math.random() * 100).toFixed(2);
  myChart.setOption({
    series: [
      {
        data: gaugeData
      }
    ]
  });
}, 2000);

效果图：