Echarts 仪表盘增加图例legend

效果图：

分析：

仪表盘没有图例，可以使用柱状图的图例legend属性，将2个图叠加，在将柱状图除了图例部分全部设置为隐藏，同时禁用legend的点击事件；　

代码：

const option = {
  legend: {
    orient: 'vertical', // 竖排展示
    align: 'left', // 图标在前，文字在后
    icon: 'circle', // 图标圆形
    itemHeight: 12,
    itemWidth: 12,
    bottom: '2%',
    fontStyle: {
      color: '#8C8C8C',
    },
    //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
    data: ['aaaa','bbbb'], // 对应的图例名称
    selectedMode: false,  //图例禁止点击
  },
  xAxis: [   //这里有很多的show，必须都设置成不显示
    {
      type: 'category',
      data: [],
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      splitArea: {
        interval: 'auto',
        show: false
      }
    }
  ],
  yAxis: [ //这里有很多的show，必须都设置成不显示
    {
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    }
  ],
  toolbox: {
    show: false,
  },
  tooltip: {
    show: false,
    // formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      type: 'gauge', // 仪表盘
      startAngle: 180, // 仪表盘起始角度：正右手侧为0度，正上方为90度，正左手侧为180度。
      endAngle: 0, // 仪表盘结束角度。
      center: ['50%', '60%'], // （圆心）坐标
      data: [{ value: this.fenToYuan(this.totalDeduction) }], // 数据值
      min: 0,
      max: this.userDeduction, // 最大数值
      radius: '85%', // 仪表盘半径
      itemStyle: {
        color: '#73A0FA', // 进度条颜色
      },
      progress: {
        show: true, // 是否显示进度条
        width: 30, // 进度条宽度
      },
      axisLine: {
        show: true, // 是否显示仪表盘轴线
        lineStyle: {
          width: 30, // 仪表盘轴线宽度（灰色的背景）
        },
      },
      pointer: {
        show: false, // 仪表盘指针
      },
      splitNumber: 1, // 仪表盘刻度的分割段数
      axisTick: {
        show: false, // 刻度
      },
      splitLine: {
        show: false, // 分隔线
      },
      // 刻度标签
      axisLabel: {
        distance: -38, // 标签与刻度线的距离
        padding: [30, 0, 0, 23], // [上, 右, 下, 左]的边距
        color: '#999',
        fontSize: 12,
        formatter: function (value) {
          if (value) {
            value = value.toLocaleString('en-US', {
              maximumFractionDigits: 2,
              minimumFractionDigits: 2,
            });
          }
          return value;
        },
        rich: {},
      },
      anchor: {
        show: false, // 表盘中指针的固定点
      },
      title: {
        show: false, // 仪表盘标题
      },
      // 仪表盘详情，用于显示数据
      detail: {
        valueAnimation: true, // 开启标签的数字动画
        width: '60%',
        lineHeight: 40,
        offsetCenter: [0, '-15%'], // 相对于仪表盘中心的偏移位置 [水平方向，垂直方向]
        fontSize: 24,
        fontWeight: 'bold',
        formatter: function (value) {
          let str = value.toString();
          let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
          return str.replace(reg, '$1,');
        },
        color: '#111A34',
      },
    },
    {
      name: 'aaaa',
      type: 'bar',
      barWidth: '30%',  //不显示，可以随便设置
      data: [0],
      itemStyle: {
        normal: {
          color: '#bfcef5',  //这里的图例要注意，颜色设置和仪表盘的颜色对应起来
        }
      }
    },
    {
      name: 'bbbb',
      type: 'bar',
      barWidth: '60%',
      data: [0],
      itemStyle: {
        normal: {
          color: '#73A0FA',
        }
      }
    }
  ],
};
myChart.setOption(option); // 为echarts对象加载数据