[Echarts] 饼图或环形图某项数据为0时，隐藏图例Label与LabelLine

饼图或环形图某项数据为0时，隐藏图例Label与LabelLine

下图中类别3项数据为0

Echarts的版本不同，解决方案不同，本文Echart版本为5.5.1

实现思路

第一步：首先在series.data配置项中为每项数据的label与labelLine添加默认值

data: [
  {
    value: 100,
    name: "类别1",
    labelLine: { show: true },
    label: { show: true },
  },
  {
    value: 100,
    name: "类别2",
    labelLine: { show: true },
    label: { show: true },
  },
  {
    value: 0,
    name: "类别3",
    labelLine: { show: true },
    label: { show: true },
  },
],

只有以上声明存在时，才能在series.label属性中，通过formatter的入参读取label与labelLine属性值并修改。

第二步：在formatter函数中判断当前项数据值，重新设置label与labelLine的显示隐藏

label: {
  formatter: function (e) {
    console.log('参数值:', e);
    const data = e.data;
    if (data.value === 0) {
      data.labelLine.show = false;
      data.label.show = false;
    } else {
      return data.value;
    }
  }
},

完整代码附录

<template>
  <div class="pie-chart-container">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "PieChart",
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            label: {
              formatter: function (e) {
                console.log("参数值:", e);
                const data = e.data;
                if (data.value === 0) {
                  data.labelLine.show = false;
                  data.label.show = false;
                } else {
                  return data.value;
                }
              },
            },
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: 100,
                name: "类别1",
                labelLine: { show: true },
                label: { show: true },
              },
              {
                value: 100,
                name: "类别2",
                labelLine: { show: true },
                label: { show: true },
              },
              {
                value: 0,
                name: "类别3",
                labelLine: { show: true },
                label: { show: true },
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
#main {
  height: 500px;
  width: 500px;
}
</style>