G2Plot图表库——桑基图开发

ChaselHi2025-06-06 18:32

最近在产品上有一个需求需要用到桑基图进行实现，在ECharts上稍微找了一下感觉都不太美观，于是找到了G2Plot这个库进行实现

1、G2Plot

这个库是antv（ant-design的可视化库）的一个产品，也有React和Vue3的版本，由于项目上用的是vue2，所以这边选择的是一个vue2的版本。官网：g2plot.antv.antgroup.com/

2、桑基图

图表的效果基本如上，我这边实现的主要是一个企业迁入/迁出的数据展示，所以这个图表基本也能满足需求实现

3、代码实现

js 复制代码

      <div id="sankey" style="width: 1082px; height: 469px; margin-top: 23px"></div>

正常建一个容器用于图表的渲染，这一块跟Echart基本比较相似，使用canvas进行渲染

js 复制代码

 init() {
      this.sankey = new Sankey("sankey", {
        data: this.data, //数据
        sourceField: "source",
        targetField: "target",
        weightField: "value",
        color: this.randomColors, //一个颜色数组，可删除
        nodeWidthRatio: 0.008,
        nodePaddingRatio: 0.03,
        interactions: [{ type: "element-active" }],
        labels: (node) => {
          return node.name;
        },

        // 支持节点排序，降序
        nodeSort: (a, b) => b.value - a.value,
        // 支持边排序，降序
        // linkSort: (a, b) => b.value - a.value,
      });

      this.sankey.render();
      this.sankey.on("element:click", (...args) => {
        // 区分点击线还是点看data.isNode
        console.log(args);
        this.handleDrawer(args[0].data);
      });

    },

初始化方法如上，data处是你要渲染的数据，color这里根据UI需求我这边定义了一个颜色数组，只用我们产品主题的一些颜色，这样风格会更统一一些，排序方法则是对节点进行从大到小排序，然后还构造了一些点击方法进行图表交互的实现。具体的参数内容可以参考官方API文档：g2plot.antv.antgroup.com/api/plot-ap...