G2Plot图表库——桑基图开发

最近在产品上有一个需求需要用到桑基图进行实现,在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...

相关推荐
gAlAxy...3 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁3 小时前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web
会飞的小妖3 小时前
个人博客系统(十一、前端-简短的配置)
前端
念念不忘 必有回响4 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL5 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟6 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
fruge8 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
sean8 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636028 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
太过平凡的小蚂蚁10 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin