vue+echarts实现桑吉图的效果

前言：

在我们项目使用图形的情况下，桑吉图算是冷门的图形了，但是它可以实现我们对多级数据之间数据流向更好的展示的需求，比如，我们实际数据流向中，具有1对多，多对多的情况下，如果用tree是不合适，用思维导图的话，只能实现线路的展示，达不到我们想对数据可视化的需要。

实现效果：

实现代码：

1、初始化调用方法

echarts挂载点击事件： radarChart.getZr().on

echarts随着界面的变动自动适应：window.onresize

源码：

let chartDom = document.getElementById("radar")
let radarChart = echarts.init(chartDom)//配置属性值radarChart.setOption(option.value)//挂载点击事件radarChart.getZr().on("click", event=> {// 第三层文字点击事件if (event.topTarget?.type === "tspan") {const text = event.topTarget.style.textif(text.indexOf('/') !== -1){console.log(event);console.log(text);}}})//让echarts随着界面的变动自动适应
window.onresize = () => {radarEcharts.resize()}

2、配置属性

注意1：echarts通用的用网格的方法添加内边距，在桑吉图是无效的

grid: {top: "0",left: "10%",right: "10%",bottom: "0",containLabel: true,
}
// 桑吉图中添加内边距的特殊方法

series: {
type: "sankey",
top: "1%",          // 距离上距离
bottom: "1%", // 距离下距离
left: "0",                  // 距离左距离
right: "16.5%",         // 距离右距离

...

注意2：桑吉图中文字内容是可以自定义的，但是排版是固定的，不会自定义生成距离

注意3：桑吉图的数据中通过 depth 这个字段来控制他是第几层

源码：

option.value = {tooltip: {trigger: "item",triggerOn: "mousemove",rich: {"a": {"fontSize": 14,"fontWeight": 500,'color':'#fff',padding: [0, 0, 5, 0],}},// 鼠标滑上去的展示信息formatter: function(params) {if (params.data.source) {return `${params.data.source}-${params.data.target}：${params.data.value}`;} else {return `${params.name}：${params.value}`;}}},series: {type: "sankey",layout: "none",top: "1%",bottom: "1%",left: "0",right: "16.5%",draggable: false,focusNodeAdjacency: 'allEdges', // 鼠标划上时高亮的节点和连线，allEdges表示鼠标划到节点上点亮节点上的连线及连线对应的节点lineStyle: {opacity: 0.3,color: "gradient",curveness: 0.7,},label: {color: "#000",fontSize: 15,formatter: function (params) {// 一级 硕士研究生 博士研究生if(params.data.depth === 0 && params.data.name==='本科生') return "{a|" + params.data.name + "\n}" +"{b|" + params.data.value+ "}";if(params.data.depth === 0 && params.data.name==='硕士研究生') return "{a2|" + params.data.name + "\n}" +"{b2|" + params.data.value+ "}";if(params.data.depth === 0 && params.data.name==='博士研究生') return "{a3|" + params.data.name + "\n}" +"{b3|" + params.data.value+ "}";// 二级if(params.data.depth === 1) return "{c|" + params.data.name + "}" +"{d|" + params.data.value+ "}";// 三级if(params.data.depth === 2){let str = ''params.data.typeArr.forEach(item=>{// str += "{e|" + params.data.name + "/"+ item.typeName +"\n}"+"{f|" + item.value+ "\n}"str += "{m|" + params.data.name + "/"+ item.typeName +"}"+"{n|" + item.value+ "\n}"})return str;}},rich: {"a": {"fontSize": 14,"fontWeight": 500,'color':'#7BA2DF',padding: [0, 0, 5, 0],},"b": {"fontSize": 24,"fontWeight": 600,'color':'#7BA2DF',padding: [0, 0, 0, 0],},"a2": {"fontSize": 14,"fontWeight": 500,'color':'#BA86ED',padding: [0, 0, 5, 0],},"b2": {"fontSize": 24,"fontWeight": 600,'color':'#BA86ED',padding: [0, 0, 0, 0],},"a3": {"fontSize": 14,"fontWeight": 500,'color':'#59DEC6',padding: [0, 0, 5, 0],},"b3": {"fontSize": 24,"fontWeight": 600,'color':'#59DEC6',padding: [0, 0, 0, 0],},"c": {"fontSize": 16,"color": "#332D2D","lineHeight": 20,},"d": {"fontSize": 16,"fontWeight": 600,"lineHeight": 20,"color": "#332D2D ",padding: [0, 0, 0, 2],},"e": {"fontSize": 14,"fontWeight": 500,'color':'#332D2D',padding: [0, 0, 5, 0],},"f": {"fontSize": 16,"fontWeight": 600,'color':'#332D2D',padding: [0, 0, 20, 0],},"m": {"fontSize": 14,"fontWeight": 500,'color':'#332D2D',padding: [0, 0, 0, 0],},"n": {"fontSize": 16,"fontWeight": 600,'color':'#332D2D',padding: [0, 0, 0, 10],},},},// nodeWidth:100,nodeGap: 20, // 每一组之间的距离layoutIterations: 0,// 自动优化列表，尽量减少线的交叉，为0就是按照数据排列emphasis: {focus: "adjacency",},data: allData,links: allGuideData,},}

3、测试数据填入：

// 测试数据1let allData= [{ name: "本科生",value:430, itemStyle: { color: "#7BA2DF" }, depth: 0 },{ name: "硕士研究生",value:60, itemStyle: { color: "#BA86ED" }, depth: 0 },{ name: "博士研究生",value:60, itemStyle: { color: '#59DEC6' }, depth: 0 },{ name: "预防医学",value:60, itemStyle: { color: '#5FD981' }, depth: 1 },{ name: "综合楼",value:60, itemStyle: { color: "#00baff" }, depth: 1 },{ name: "2022级",typeArr:[{typeName:"本科",value:50},{typeName:"硕士研究生",value:30}], itemStyle: { color: "#f8b551" }, depth: 2 },{ name: "2021级",typeArr:[{typeName:"硕士研究生",value:50}], itemStyle: { color: "#7ecef4" }, depth: 2 },{ name: "2023级",typeArr:[{typeName:"博士研究生",value:50}], itemStyle: { color: "#7ecef4" }, depth: 2 },]// 测试数据2，连线let allGuideData = [// L1→L3	 4509{ source: "本科生", target: "预防医学", value: 800 },// L2→L3	 12196{ source: "硕士研究生", target: "预防医学", value: 200 },// L1→L2→L3	 2404{ source: "综合楼", target: "2022级", value: 200 },{ source: "综合楼", target: "2023级", value: 200 },{ source: "博士研究生", target: "2022级", value: 300 },{ source: "预防医学", target: "2021级", value: 400 },{ source: "预防医学", target: "2023级", value: 100 },]