echart饼图数据为0时不显示label

1.问题

饼图展示只有一数据有值,其他都是0,饼图内部只展示一条label,目前展示了两条,需要进行处理

2.解决办法

对数据进行过滤处理,对后端传过来的数据加上两个属性,先对传过来的数组对象进行遍历,加上对应属性,再进行过滤处理

//data是对应数组对象
data.forEach((item) => {
          item.label = { show: true };
          item.labelLine = { show: true };
        });
//数据过滤处理
formatter: function (e) {
                    let data = e.data;
                    if (data.value == 0) {
                      data.labelLine.show = false;
                      data.label.show = false;
                    } else {
                      return `${data.name}`;
                    }
                  },
//echart饼图相关配置,根据实际需要进行处理
 label: {
                normal: {
                  position: "inside",
                  formatter: function (e) {
                    let data = e.data;
                    if (data.value == 0) {
                      data.labelLine.show = false;
                      data.label.show = false;
                    } else {
                      return `${data.name}`;
                    }
                  },
                  textStyle: {
                    align: "center",
                    baseline: "middle",
                    fontSize: 12,
                    fontWeight: "100",
                    color: "#FFFFFF",
                  },
                },
              },

 

posted @ 2023-03-02 16:17  福纨  阅读(2100)  评论(0)    收藏  举报