echart图，多柱状图没有值不占位

最新推荐文章于 2024-12-23 23:34:11 发布

南小鱼

最新推荐文章于 2024-12-23 23:34:11 发布

阅读量2.9k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_44737178/article/details/127010776

版权

本文介绍了在开发中如何解决ECharts图表中数据缺失造成的占位问题，通过实例展示了从数据预处理到代码实现的完整过程，重点在于代码调整和美化图表效果的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发过程中遇到这样一个问题

实现前的效果如图所示

没有数据的也会产生占位，导致页面效果不是很好

实现之后的效果

实现代码

barDataList是后台返回的值

xAxname 是x轴的坐标

names 是对应的第一个x轴的数据名称

initBar() {
        let colorList = [
          "#2b9eff",
          "#ff8f41",
          "#c441fb",
          "#2fb74f",
          "#3b42d9",
          "#8f59e5",
          "#b20dee",
        ];
        let names = proxy.barDataList.map((item) => item.name);
        let xAxname = proxy.barDataList[0].nameArr
          ? proxy.barDataList[0].nameArr.map((item) => item)
          : [];
        proxy.barDataList.sort(bar.compare("name", true));
        let aXiasList = [];
        let seriesList = [];
        xAxname.forEach((res, key) => {
          let aXiasdata = [];
          xAxname.forEach(() => {
            aXiasdata.push("");
          });
          aXiasdata[key] = res;
          let obj = {
            type: "category",
            position: "bottom",
            data: aXiasdata,
          };
          aXiasList.push(obj);
        });
        proxy.barDataList.forEach((item, index) => {
          for (let i = 0; i < item.data.length; i++) {
            if (item.data[i] && item.data[i].count) {
              let newArrList = [];
              for (let a = 0; a < i; a++) {
                newArrList.push("");
              }
              newArrList[i] = item.data[i].count;
              let serObg = {
                name: item.name,
                type: "bar",
                xAxisIndex: i,
                data: newArrList,
                barWidth: 10,
                itemStyle: {
                  normal: {
                    color: colorList[index],
                  },
                },
              };
              seriesList.push(serObg);
            }
          }
        });
        let namenum = Math.floor(100 / names.length);
        let myChart = echarts.init(proxy.$refs.barChart);
        myChart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              label: {
                backgroundColor: "#6a7985",
              },
            },
            formatter: function (params) {
              let result = `<div>${params[0].name}</div>`;
              params.forEach(function (item) {
                let dotHtml =
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                  item.color +
                  '"></span>';
                result += item.value
                  ? `${dotHtml}${item.seriesName}: ${item.value}<br/>`
                  : "";
              });
              return result;
            },
          },
          grid: {
            height: proxy.barHeight,
            bottom: "30%",
            right: 50,
          },
          xAxis: aXiasList,
          yAxis: {
            type: "value",
            axisLabel: {
              color: "#FFFFFF",
              formatter: function (value, index) {
                if (value > 10000 && value <= 10000000) {
                  value = value / 10000 + "万";
                } else if (value >= 10000000) {
                  value = value / 10000000 + "千万";
                }
                return value;
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(41,132,171, 0.2)",
              },
            },
          },
          series: seriesList,
        });
      },