桑基图如何隐藏没有值的标签

桑基图比较冷门，相关文章较少

如果出现某个标签没有值，就会出现这样

代码如下：

<template>
  <div class="page">
    <div class="sankeyDiagram">
      <h1>桑基图</h1>

      <div class="echartSankey" id="echartSankey"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
  console.log("组件已挂载");
  getEchart();
});

function getEchart() {
  var chartDom1 = document.getElementById("echartSankey");
  var myChart1 = echarts.init(chartDom1);

  let option = {
    series: {
      type: "sankey",
      layout: "none",
      emphasis: {
        focus: "adjacency",
      },
      data: [
        {
          name: "走兽",
        },
        {
          name: "水族",
        },
        {
          name: "仓鼠",
        },
        {
          name: "荷兰猪",
        },
        {
          name: "草龟",
        },
        {
          name: "迷你鹦鹉鱼",
        },
        {
          name: "泥鳅",
        },
        {
          name: "斑马鱼",
        },
      ],
      links: [
        {
          source: "走兽",
          target: "仓鼠",
          value: 5,
        },
        {
          source: "走兽",
          target: "荷兰猪",
          value: 3,
        },
        {
          source: "水族",
          target: "b1",
          value: 8,
        },
        {
          source: "水族",
          target: "草龟",
          value: 3,
        },
        {
          source: "水族",
          target: "斑马鱼",
          value: 1,
        },
      ],
    },
  };
  myChart1.setOption(option);

  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    myChart1.resize();
  });
}
</script>
<style scoped lang="scss">
.page {
  .sankeyDiagram {
    width: 100%;
    height: 500px;

    .echartSankey {
      margin: 0 auto;
      width: 600px;
      height: 600px;
      border: 1px solid black;
    }
  }
}
</style>

很明显，应该隐藏没有值的标签

修改series配置label

 label: {
        formatter: function (params) {
          // 当数据值为 0 或 null 时，不显示标签
          if (params.value === 0 || params.value == null) {
            return "";
          }
          // 否则显示默认标签格式
          return params.name;
        },
      },

效果如下：

如果还想修改label样式，写在formatter同级

全部代码如下

<template>
  <div class="page">
    <div class="sankeyDiagram">
      <h1>桑基图</h1>

      <div class="echartSankey" id="echartSankey"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
  console.log("组件已挂载");
  getEchart();
});

function getEchart() {
  var chartDom1 = document.getElementById("echartSankey");
  var myChart1 = echarts.init(chartDom1);

  let option = {
    series: {
      type: "sankey",
      layout: "none",
      emphasis: {
        focus: "adjacency",
      },
      label: {
        textStyle: {
          color: "green", // 文字颜色
          fontSize: 14, // 文字字体大小
          fontWeight: "600",
        },
        formatter: function (params) {
          // 当数据值为 0 或 null 时，不显示标签
          if (params.value === 0 || params.value == null) {
            return "";
          }
          // 否则显示默认标签格式
          return params.name;
        },
      },
      data: [
        {
          name: "走兽",
        },
        {
          name: "水族",
        },
        {
          name: "仓鼠",
        },
        {
          name: "荷兰猪",
        },
        {
          name: "草龟",
        },
        {
          name: "迷你鹦鹉鱼",
        },
        {
          name: "泥鳅",
        },
        {
          name: "斑马鱼",
        },
      ],
      links: [
        {
          source: "走兽",
          target: "仓鼠",
          value: 5,
        },
        {
          source: "走兽",
          target: "荷兰猪",
          value: 3,
        },
        {
          source: "水族",
          target: "b1",
          value: 8,
        },
        {
          source: "水族",
          target: "草龟",
          value: 3,
        },
        {
          source: "水族",
          target: "斑马鱼",
          value: 1,
        },
      ],
    },
  };
  myChart1.setOption(option);

  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    myChart1.resize();
  });
}
</script>
<style scoped lang="scss">
.page {
  .sankeyDiagram {
    width: 100%;
    height: 500px;

    .echartSankey {
      margin: 0 auto;
      width: 600px;
      height: 600px;
      border: 1px solid black;
    }
  }
}
</style>