vue中echarts关系图动态增删节点以及连线方式
作者：JosiahH
这篇文章主要介绍了vue中echarts关系图动态增删节点以及连线方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
echarts关系图动态增删节点及连线
首先，echarts的关系图有个非常坑的地方，就是节点的id必须连续，否则增删之后节点无法连接！
下面是简单的演示实现，实际要用动态增删的话，要复杂的多得多。
我是用的关系图是力引导图
更新后不会重新渲染，只是动态增加的效果
//假设你已经渲染了关系图
test() {
let option = this.chart.getOption() //获取option配置项
//START增加节点，假设根据id连线
// option.series[0].data.push({name: '测试节点', category: 1, id: 6, des: '测试描述'})
// option.series[0].links.push({source: 0, target: 6, name: '测试连线'})
//END
//删除节点START
let data = option.series[0].data //获取节点数据
let link = option.series[0].links //获取边的数据
let flag = -1
for(let i = 0; i<data.length;i++){//假设删除id为1的节点
if (data[i].id===1){
data.splice(i,1)
link.splice(i-1,1)
flag = i
break
}
}
for(let i = flag; i<data.length;i++){
data[i].id--
if (i!==data.length){
link[i-1].target--
}
}
//删除节点END
//更新关系图
this.chart.setOption(option)
},echarts关系图vue完整代码
vue 使用echarts 实现关系图，效果如下：
说明： 关系图可以有两种，一种是指定坐标x，y。 另外一种就是通过设置series属性
layout: "force",
force: {
repulsion: [-2, 100], //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity: 0.03, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: [20, 200], //边的两个节点之间的距离，这个距离也会受 repulsion:[10, 50]值越小则长度越长
layoutAnimation: false,
},
vue全部代码如下
<template> <div class="uni-chart-container"> <div class="uni-bar-charts" :id="id"></div> </div> </template>
<script>
import echarts from "echarts";
import resize from "../mixins/resize";
export default {
name: "uniGraph",
mixins: [resize],
components: {},
data() {
return {
options: {
title: {
text: "",
},
series: [],
},
barData: [],
myChart: null,
seriesName: "",
};
},
props: {
id: {
type: String,
require: true,
},
sortMethod: {
type: String,
default: "desc",
},
title: {
type: String,
},
optionsSetup: {
type: Object,
default: () => {
return {};
},
},
isVertical: {
type: Boolean,
default: true,
},
chartsData: {
type: Object,
default: function () {
return {
nodes: [
{
name: "李志强",
category: 0,
symbolSize: 30,
value: ["确诊"],
color: "#F10F0F",
},
{
name: "张亮",
category: 2,
symbolSize: 30,
value: ["密接"],
color: "#FFC001",
},
{
name: "王飞",
category: 1,
symbolSize: 30,
value: ["次密接"],
color: "#1D84C6",
},
{
name: "王丽",
category: 2,
symbolSize: 30,
value: ["密接"],
color: "#FFC001",
},
{
name: "符华",
category: 1,
symbolSize: 30,
value: ["次密接"],
color: "#1D84C6",
},
{
name: "钱峰",
category: 1,
symbolSize: 30,
value: ["次密接"],
color: "#1D84C6",
},
{
name: "吴梦",
category: 1,
symbolSize: 30,
color: "#1D84C6",
value: ["次密接"],
},
{
name: "杨月",
category: 1,
symbolSize: 30,
color: "#1D84C6",
value: ["次密接"],
},
],
links: [
{
source: "李志强",
target: "张亮",
linkTip: "聚餐",
},
{
source: "张亮",
target: "王飞",
linkTip: "出现在同一场所",
},
{
source: "李志强",
target: "王丽",
linkTip: "出现在同一场所",
},
{
source: "张亮",
target: "钱峰",
linkTip: "聚餐",
},
{
source: "张亮",
target: "符华",
linkTip: "家庭聚集",
},
{
source: "张亮",
target: "杨月",
linkTip: "出现在同一场所",
},
{
source: "张亮",
target: "吴梦",
linkTip: "出现在同一场所",
},
],
categories: [
{
name: "确诊",
},
{
name: "次密接",
},
{
name: "密接",
},
],
};
},
},
customColor: {
type: Array,
default: function () {
return ["#1890FF"];
},
},
// 展示前5条 可传5
maxL: {
default: "auto",
},
codeStatus: {
type: Array,
},
},
watch: {
chartsData: {
deep: true,
immediate: true,
handler: function (v) {
let _this = this;
this.$nextTick(function () {
_this.init();
});
},
},
},
beforeDestroy() {
if (!this.myChart) {
return;
}
this.myChart.dispose();
this.myChart = null;
},
methods: {
init() {
//构建3d饼状图
if (this.myChart) this.myChart.dispose();
this.myChart = echarts.init(document.getElementById(this.id));
this.editorOptions(this.chartsData);
// 传入数据生成 option
this.myChart.setOption(this.options);
},
editorOptions(val) {
let series = this.getSeries(val);
var options = {
tooltip: {
// formatter: (e) => {
// console.log(e);
// return e.name + e.data.value;
// },
},
animationDuration: 1500,
animationEasingUpdate: "quinticInOut",
color: this.customColor,
grid: this.setOptionsMargin(),
series: series,
};
this.options = options;
},
getSeries(newData) {
const series = [];
series.push({
name: "关系图谱",
type: "graph",
hoverAnimation: true,
layout: "force",
force: {
repulsion: [-2, 100], //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity: 0.03, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: [20, 200], //边的两个节点之间的距离，这个距离也会受 repulsion:[10, 50]值越小则长度越长
layoutAnimation: false,
},
nodeScaleRatio: 0.6,
draggable: true,
roam: false, //鼠标缩放和平移
symbol: "circle",
edgeSymbol: ["circle", "arrow"],
data: newData.nodes,
links: newData.links,
categories: newData.categories,
cursor: "pointer",
focusNodeAdjacency: true,
scaleLimit: {
//所属组件的z分层，z值小的图形会被z值大的图形覆盖
min: 0, //最小的缩放值
max: 9, //最大的缩放值
},
edgeLabel: {
//连接线上文字
normal: {
show: true,
textStyle: {
fontSize: 10,
},
formatter: (e) => {
return e.name;
},
},
},
label: {
normal: {
show: true,
},
},
lineStyle: {
normal: {
width: 1.5,
curveness: 0,
type: "solid",
},
},
});
return series;
},
// 边距设置
setOptionsMargin() {
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true,
};
return grid;
},
},
};
</script><style lang="scss">
.uni-chart-container,
.uni-bar-charts {
width: 100%;
height: 100%;
}
</style>resize文件如下：debounce可以自行实现
import {
debounce
} from "@/utils/utils.js";
export default {
data() {
return {};
},
mounted() {
this.initListener();
},
beforeDestroy() {
this.destroyListener();
},
deactivated() {
this.destroyListener();
},
methods: {
initListener() {
window.addEventListener("resize", debounce(this.resize, 100));
},
destroyListener() {
window.removeEventListener("resize", this.resize);
},
resize() {
const {
myChart
} = this;
myChart && myChart.resize();
},
},
};
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。