echarts饼图-自定义legend内容

itmacy

于 2024-02-22 10:32:31 发布

阅读量846

点赞数 5

分类专栏： echarts 文章标签： echarts 前端

本文链接：https://blog.csdn.net/itmacy/article/details/136226861

版权

echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

自定义legend内容，从而显示更多内容，并且设置数值为0的内容在图表中显示灰色效果，其效果图如下
在这里插入图片描述
实现代码如下：

const total = 53;
const alarmTypeData = [
  {
    name: '温度告警',
    value: 33,
    ratio: 62.26
  },
  {
    name: '湿度告警',
    value: 0,
    ratio: 0.0
  },
  {
    name: '烟雾告警',
    value: 20,
    ratio: 37.74
  },
  {
    name: '水浸告警',
    value: 0,
    ratio: 0.0
  },
  {
    name: '安防告警',
    value: 0,
    ratio: 0.0
  },
  {
    name: '网络告警',
    value: 0,
    ratio: 0.0
  }
];
const colors = [
  '#7F8AF2',
  '#FFD666',
  '#F892B7',
  '#FFA275',
  '#79D38A',
  '#81D3F8'
];
let legendSelected = {};
alarmTypeData.forEach((item, index) => {
  // legendSelected[item.name] = item.value > 0
  item.itemStyle = {
    color: colors[index]
  };
  if (item.value <= 0) {
    item.itemStyle = {
      color: '#CCCCCC'
    };
  }
});
option = {
  color: colors,
  tooltip: {
    trigger: 'item',
    formatter: (v) => {
      return `${v.marker} ${v.name} ${v.value}`;
    }
  },
  legend: {
    icon: 'circle', // 图例形状
    top: '30%',
    left: 'right',
    orient: 'vertical',
    align: 'left', // 文字位置
    padding: [0, 20],
    selected: legendSelected,
    formatter(name) {
      let target;
      alarmTypeData.forEach((item) => {
        if (item.name === name) {
          target = item;
        }
      });
      return `{a| ${name} } {c| |} {b| ${target.value} } {c| ${target.ratio}%}`;
    },
    textStyle: {
      align: 'right',
      rich: {
        a: {
          color: '#666666',
          width: 80,
          fontSize: 14
        },
        b: {
          color: '#666666',
          width: 60,
          fontSize: 14
        },
        c: {
          color: '#999999',
          fontSize: 14
        }
      }
    }
  },
  series: [
    {
      name: '告警类型',
      type: 'pie',
      radius: ['45%', '60%'],
      center: ['30%', 'center'],
      labelLine: {
        show: false
      },
      label: {
        show: true,
        position: 'center',
        fontSize: 18,
        formatter: '告警总数\n\n' + total
      },
      avoidLabelOverlap: false,
      data: alarmTypeData
    }
  ]
};