关于前端:ECharts饼图隐藏数据为0的数据

5次阅读

共计 1175 个字符,预计需要花费 3 分钟才能阅读完成。

思路:
1. 每一项数据增加默认项 show 为 true
label: {show: true},
labelLine: {show: true}

2. 在遍历 data 的属于为 0 的就把 show 赋值为 false

/* 预警事件 */
    initCensus() {
      this.census = {
        tooltip: {
          trigger: "item",
          formatter: `{a} <br/>{b} <br/> {c} ({d}%)`,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data: [
              {value: this.ChartData["预警"]["储存工夫"],
                name: "储存工夫",
                itemStyle: {color: "#2498ff"},
                label: {show: true},// 增加项
                labelLine: {show: true},// 增加项
              },
              {value: this.ChartData["预警"]["可燃气体"],
                name: "可燃气体",
                itemStyle: {color: "#18e3ff"},
                label: {show: true},
                labelLine: {show: true},
              },
              {value: this.ChartData["预警"]["TVOC"],
                name: "TVOC",
                itemStyle: {color: "#1fb4ff"},
                label: {show: true},
                labelLine: {show: true},
              },
            ].sort(function (a, b) {return a.value - b.value;}),
            roseType: "radius",
            label: {
              position: "outer",
              alignTo: "none",
              color: "#f1f1f1",
            },
            labelLine: {
              lineStyle: {color: "#f1f1f1",},
              smooth: 0.1,
              length: 10,
              length2: 12,
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {return Math.random() * 200;
            },
          },
        ],
      };
      this.setEchartsHide(this.census.series[0].data);
    },
 /* 暗藏数据为 0 的数据 */
    setEchartsHide(data) {const Arr = data.map((item) => item.value).join("");
      // 如果每项都为 0 则不暗藏
      if (+Arr) {data.forEach((item) => {if (!item.value) {
            item.label.show = false;
            item.labelLine.show = false;
          }
        });
      }
    },
正文完
 0