echarts关系图（Vue3）节点背景图连线设置

效果图：

需求：节点添加背景图，连线不能从圆心连接，设置线的颜色（渐变/其他颜色），请求接口接进去即可用。

<template><div><v-chartref="vChartRef":option="option"style="width: 100%; height: 900px"></v-chart></div>
</template><script setup lang="ts">
import { ref, computed, nextTick } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { RadarChart, GraphChart } from "echarts/charts";
import {DatasetComponent,GridComponent,TooltipComponent,LegendComponent,
} from "echarts/components";
import cloneDeep from "lodash/cloneDeep";use([DatasetComponent,CanvasRenderer,RadarChart,GraphChart,GridComponent,TooltipComponent,LegendComponent,
]);const seriesItem = ref({type: "graph", // 类型:关系图layout: "none", // none circular环形布局,force类型为力导图data: <any>[],links: <any>[],categories: <any>[],label: {// 标签show: 1,position: "right",formatter: "{b}",},labelLayout: {hideOverlap: true,},lineStyle: {color: "source", // 线条颜色curveness: 0.2, // 线条卷曲程度},roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启edgeSymbolSize: [1, 1], //设置端点大小和线差不多edgeSymbol: ["circle", "circle"], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。（因节点背景是透明，不设置端点的时候是从节点中心开始连接，设置的时候是从边开始）// force: {//   //力引导图基本配置//   friction: 0.6,//   layoutAnimation: true,//   gravity: 0.05, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。//   edgeLength: 360, //边的两个节点之间的距离//   repulsion: 4000, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。// },
});const getSeries = () => {let series: any = [];const values = dataJson.value;if (values.nodes === undefined ||values.links === undefined ||values.categories === undefined) {return;}//渲染节点背景图const processedNodes = values.nodes.map((node: any) => {return {...node,symbol: `image://${node.symbol}`,};});//系列模板let item: any = cloneDeep(seriesItem.value);item.data = processedNodes; // 使用处理后的节点数据item.links = values.links;item.categories = values.categories;series = item;return series;
};const vChartRef = ref<typeof VChart>();const option = ref({tooltip: {},legend: {show: true,top: 20,textStyle: {color: "#000",fontSize: 14,},data: dataJson.value.categories.map((a) => {return a.name;}),},series: getSeries(),
});
</script>

json数据

const dataJson = ref({nodes: [{draggable: true,symbolSize: [200, 200],symbol: require("@/assets/images/graph/1.png"),name: "智能网联与新能源汽车",x: 0,y: 10,fixed: true,label: {show: false,},category: "一级",},{draggable: true,symbolSize: [150, 150],symbol: require("@/assets/images/graph/2.png"),name: "上游",x: -50,y: -10,label: {show: false,},category: "二级",},{draggable: true,symbolSize: [150, 150],symbol: require("@/assets/images/graph/2.png"),name: "中游",x: 40,y: -30,label: {show: false,},category: "二级",},{draggable: true,symbolSize: [150, 150],symbol: require("@/assets/images/graph/2.png"),name: "下游",x: 50,y: 20,label: {show: false,},category: "二级",},{draggable: true,symbolSize: [100, 100],symbol: require("@/assets/images/graph/4.png"),name: "通讯系统",x: -80,y: -50,category: "三级",},{draggable: true,symbolSize: [100, 100],symbol: require("@/assets/images/graph/4.png"),name: "感知系统",x: -90,y: 20,category: "三级",},{draggable: true,symbolSize: [100, 100],symbol: require("@/assets/images/graph/4.png"),name: "汽车零部件",x: -55,y: -60,category: "三级",},{draggable: true,symbolSize: [100, 100],symbol: require("@/assets/images/graph/4.png"),name: "执行系统",x: 85,y: -65,category: "三级",},{draggable: true,symbolSize: [100, 100],symbol: require("@/assets/images/graph/4.png"),name: "整车制造",x: 80,y: -10,category: "三级",},{draggable: true,symbolSize: [100, 100],symbol: require("@/assets/images/graph/4.png"),name: "运营维护",x: 100,y: 15,category: "三级",},{draggable: true,symbolSize: [100, 100],symbol: require("@/assets/images/graph/4.png"),name: "汽车金融",x: 90,y: 50,category: "三级",},],links: [{source: "智能网联与新能源汽车",target: "上游",lineStyle: {width: 2,color: {type: "linear",x: 0,y: 0,x2: 1,y2: 1,colorStops: [{//线渐变颜色offset: 0,color: "#0f3362", // 0% 处的颜色},{offset: 1,color: "red", // 100% 处的颜色},],global: false, // 缺省为 false},curveness: 0.2, //折线曲度},},{source: "智能网联与新能源汽车",target: "中游",},{source: "智能网联与新能源汽车",target: "下游",},{source: "上游",target: "感知系统",},{source: "上游",target: "通讯系统",},{source: "上游",target: "汽车零部件",},{source: "中游",target: "执行系统",},{source: "中游",target: "整车制造",},{source: "下游",target: "运营维护",},{source: "下游",target: "汽车金融",},],categories: [{name: "一级",},{name: "二级",},{name: "三级",},],
});