vue中使用echarts以及简单关系图的点击事件方式
作者：宣宣丿
这篇文章主要介绍了vue中使用echarts以及简单关系图的点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1.安装
在Vue项目中打开终端执行命令：
npm install echarts --save
下载后在package.json文件中可以看到下载的Echarts版本：
2.导入
在需要使用Echarts图表的页面中导入：
import * as echarts from "echarts";
如果多个地方使用的话可以通过全局引入：
import * as echarts from 'echarts' // 挂载到Vue实例 Vue.prototype.$echarts = echarts
3.绘制静态图表
在需要用到echarts的地方设置一个有宽高的div盒子
<div>
<div
ref="chart"
style="width:800px;height:600px;margin: auto">
</div>
</div>
定义echarts关系图的数据
data() {
return {
data: [
{
name: "Node 1",
x: 300,
y: 300,
},
{
name: "Node 2",
x: 800,
y: 300,
},
{
name: "Node 3",
x: 550,
y: 100,
},
{
name: "Node 4",
x: 550,
y: 500,
},
],
links: [
{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: true,
},
lineStyle: {
width: 5,
curveness: 0.2,
},
},
{
source: "Node 2",
target: "Node 1",
label: {
show: true,
},
lineStyle: {
curveness: 0.2,
},
},
{
source: "Node 1",
target: "Node 3",
},
{
source: "Node 2",
target: "Node 3",
},
{
source: "Node 2",
target: "Node 4",
},
{
source: "Node 1",
target: "Node 4",
},
],
num: 0, // 点击次数
};
},
在methods中定义实例化echarts对象的方法，在mounted生命周期中调用（确保dom元素已经挂载到页面当中）
mounted() {
this.getEchartData();
},
methods: {
getEchartData() {
const chart = this.$refs.chart;
// 初始化echarts
this.mychart = echarts.init(chart);
let that = this;
// option就是需要引进echarts关系图中的代码
let option = {
title: {
text: "Basic Graph",
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: "quinticInOut",
series: [
{
type: "graph",
layout: "none",
symbolSize: 50,
roam: true,
label: {
show: true,
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20,
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0,
},
// data: []
data: that.data,
// links: [],
links: that.links,
},
],
};
// option数据放入图表中
this.mychart.setOption(option);
},
},
启动项目，在页面中看到如下效果：
4.关系图节点点击事件
上面只是展示了静态的关系图，如节点数据太多，各节点关系复杂，就可只展示主要数据，其他可通过点击节点查看各节点关系
需求：新建一个Node5，Node5和Node2有关系，点击Node2展示Node5节点
在上面原本的getEchartData()方法中，添加关系图的节点点击事件
通过事件参数param中的dataType属性值确认点击的对象是关系图节点还是节点之间的边缘，值为node时点击的是节点，值为edge时点击的是边缘
通过param中的dataIndex值确定点击的节点元素
完整代码如下：
getEchartData() {
const chart = this.$refs.chart;
// 初始化echarts
this.mychart = echarts.init(chart);
let that = this;
// option就是需要引进echarts关系图中的代码
let option = {
title: {
text: "Basic Graph",
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: "quinticInOut",
series: [
{
type: "graph",
layout: "none",
symbolSize: 50,
roam: true,
label: {
show: true,
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20,
},
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0,
},
// data: []
data: that.data,
// links: [],
links: that.links,
},
],
};
// echarts图表的点击事件，可通过param参数确认点击的对象
that.mychart.on("click", function (param) {
if (param.dataType == "node") {
// Node2的 param.dataIndex 值为1
if (param.dataIndex == 1) {
// 判断点击的次数，单数显示Node5数据，双数隐藏
that.num++;
if (that.num % 2 == 1) {
that.data.push({
name: "Node 5",
x: 900,
y: 300,
});
that.links.push({
source: "Node 2",
target: "Node 5",
});
that.mychart.setOption(option);
} else {
that.data.pop();
that.links.pop();
that.mychart.setOption(option);
}
}
} else {
console.log("点击了边", param);
}
});
// option数据放入图表中
this.mychart.setOption(option);
},
最终效果如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。