The ecarts pie chart hides data with data of 0

Time:2021-9-21

Idea:
1. Add a default item for each data item. Show is true
label: { show: true },
labelLine: { show: true }

2. When the data of traversal data is 0, assign show to false

/*Early warning event*/
    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 ["warning"] ["storage time"],
                Name: "storage time",
                itemStyle: { color: "#2498ff" },
                Label: {show: true}, // add item
                Labeline: {show: true}, // add item
              },
              {
                Value: this. Chartdata ["warning"] ["combustible gas"],
                Name: "combustible gas",
                itemStyle: { color: "#18e3ff" },
                label: { show: true },
                labelLine: { show: true },
              },
              {
                Value: this. Chartdata ["alert"] ["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);
    },
/*Hide data with data 0*/
    setEchartsHide(data) {
      const Arr = data.map((item) => item.value).join("");
      //If each item is 0 (the chart disappears), it is not hidden
      if (+Arr) {
        data.forEach((item) => {
          if (!item.value) {
            item.label.show = false;
            item.labelLine.show = false;
          }
        });
      }
    },