Echarts 饼状图隐藏指定图例 隐藏legend

最近工作中要求画一个饼图来显示完成率，其他样式完成后样式是这样的

修改前效果图

因为有两条数据分别是完成和回退，所以会显示两个legend（图例）

data: [
        {
          value: 9,
          name: '完成',
          emphasis: {
            itemStyle: {
              color: '#e6e8ea'
            }
          }
        },
        {
          value: 2,
          name: '回退'
        }
      ],

但是设计稿上要求只显示 完成 一个legend

我们可以去设置legend.data来控制legend的显示数量

官方文档传送门

option = {
    ...
  legend: {
    data: [{ name: '回退' }],//填写要显示数据的name
  },
    ...
 }

修改后效果图

完整代码

option = {
  tooltip: {
    // 提示框触发类型
    trigger: 'item' // 鼠标移到数据项上时触发提示框
  },
  // 图例
  legend: {
    bottom: '0%', // 图例组件离容器底部的距离
    data: [{ name: '回退' }], // 图例的数据数组，数组中每一项代表一个系列的名称
    selectedMode: false // 图例选择的模式，'false' 表示不可选择
  },
  avoidLabelOverlap: false, // 防止标签重叠
  series: [
    {
      type: 'pie', 
      legendHoverLink: false, // 图例是否联动高亮
      radius: ['55%', '70%'], 
      label: {
        show: true, // 是否显示标签
        position: 'center', // 标签的位置，'center' 表示在饼图的中心
        formatter: '{total|' + '{d}%' + '}' + '\n' + '{active|{b}率}', // 标签的格式化字符串
        rich: {
          total: {
            fontSize: 36,
            fontFamily: '微软雅黑', 
            color: '#454c5c', 
            backgroundColor: '#fff', 
            height: 36
          },
          active: {
            fontSize: 20,
            fontFamily: '微软雅黑', 
            color: '#6c7a89', 
            backgroundColor: '#fff',
            height: '18' 
          }
        }
      },
      emphasis: {
        label: {
          show: true // 高亮时显示标签
        }
      },
      data: [
        {
          value: 9,
          name: '完成',
          emphasis: {
            itemStyle: {
              color: '#e6e8ea' // 高亮时的数据项的颜色
            }
          }
        },
        {
          value: 2, 
          name: '回退'
        }
      ],
      color: ['#e6e8ea', '#4183e6']
    }
  ]
};