<template>
<div>
<div id="myEcharts" ref="myEcharts" style="width:1000px;height: 600px"></div>
<div style="width: 100px;height: auto">
<div class="liStyle" @click="handleClick(0)">LOC</div>
<div class="liStyle" @click="handleClick(1)">PER</div>
<div class="liStyle" @click="handleClick(2)">NAME</div>
<div class="liStyle" @click="handleClick(3)">角色</div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "Echart",
data() {
return {
dataArr: [
{
'name': 'per',
'category': 'name',
'draggable': true,
}, {
'name': 'loc',
'category': 'body',
'draggable': true
}, {
'name': 'name',
'category': 'per',
'draggable': true
}, {
'name': '角色',
'category': 'time',
'draggable': true
}],
liArr: [
{
source: 'per',
target: 'loc'
}, {
source: 'per',
target: 'name'
}, {
source: 'per',
target: '角色'
}, {
source: 'loc',
target: 'name'
}, {
source: '角色',
target: 'name'
}],
}
},
mounted() {
this.drawChart(this.dataArr, this.liArr)
},
methods: {
handleClick(num) {
for (let i = 0; i < this.dataArr.length; i++) {
if (num == i) {
this.dataArr[i]['symbolSize'] = 80
console.log(this.dataArr[num])
this.drawChart(this.dataArr, this.liArr)
} else {
this.dataArr[i]['symbolSize'] = 60
}
}
},
drawChart(data, line) {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById("myEcharts"));
// 指定图表的配置项和数据
let option = {
title: {
text: ''
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'force', //因为节点的位置已经有了就不用在这里使用布局了
focusNodeAdjacency: false,
// legendHoverLink: true,
roam: true, //添加缩放和移动
edgeSymbolSize: [4, 8],
edgeSymbol: ['circle', 'none'], // 边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头
cursor: 'pointer',
force: {
repulsion: [1000, 2000], //节点之间的斥力因子,支持设置成数组表达斥力的范围
edgeLength: [600, 100],
// edgeLength: [10, 20],
layoutAnimation: true,
friction: 0.1, //节点的移动速度。取值范围 0 到 1。
// edgeLength: [70, 90], //两个节点之间的距离,这个距离也会受 repulsion影响
},
label: {
show: true, // 图形上的文本标签, 可用于说明图形的一些数据信息, 比如值, 名称等
fontSize: 12,
color: '#000', //如果设置为 'inherit',则为视觉映射得到的颜色,如系列色。
width: 100,
overflow: "break", //文字超出宽度是否截断或者换行。配置width时有效
},
labelLayout: {
moveOverlap: 'shiftX', //在标签重叠的时候是否挪动标签位置以防止重叠。
draggable: true, //标签是否可以允许用户通过拖拽二次调整位置。
},
emphasis: {
scale: true, //是否开启高亮后节点的放大效果。
focus: 'adjacency'
},
draggable: true, //这里设置为false,不然拖拽鼠标和节点有偏移
categories: [
{
name: 'per',
itemStyle: {
normal: {
color: "#009800",
}
}
}, {
name: 'name',
itemStyle: {
normal: {
color: "#4592FF",
}
}
}, {
name: '角色',
itemStyle: {
normal: {
color: "#ff232b",
}
}
}, {
name: 'time',
itemStyle: {
normal: {
color: "#e6dd1c",
}
}
}, {
name: 'body',
itemStyle: {
normal: {
color: "#c489e6",
}
}
}, {
name: 'sigos',
itemStyle: {
normal: {
color: "#a0e6a5",
}
}
}, {
name: 'check',
itemStyle: {
normal: {
color: "#e6bfac",
}
}
}, {
name: 'disease',
itemStyle: {
normal: {
color: "#859f89",
}
}
}, {
name: 'treatmeot',
itemStyle: {
normal: {
color: "#686767",
}
}
}],
symbolSize: 100, //改变节点大小
lineStyle: {
color: "#ccc",
width: 3,
opacity: 0.9,
curveness: 0, //关系线的曲度,支持从 0 到 1 的值,值越大曲度越大。
},
data: data,
links: line,
nodes: [
{category: 1, name: '李四', value: 2},
{
category: 1, name: '张三', value: 4, onclick: function focus(param) {
alert(param)
}
},
],
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 点击node节点的事件
myChart.on('click', function (param) {
console.log('node节点的数组---->', param.data); // 打印出param, 可以看到里边有很多参数可以使用
// let key = 'symbolSize'
// let value = 80
//
// param.data[key] = value
//获取节点点击的数组序号
var arrayIndex = param.dataIndex;
console.log('arrayIndex---->', arrayIndex);
console.log('name---->', param.name);
if (param.dataType == 'node') {
// alert("点击了节点" + param.name)
} else {
// alert("点击了边" + param.value)
}
})
}
}
}
</script>
<style scoped>
.liStyle {
height: 40px;
line-height: 40px;
}
</style>
Vue实现Echarts的关系图以及点击事件
最新推荐文章于 2024-05-24 17:52:25 发布