vue中使用echarts以及简单关系图的点击事件方式
更新时间：2024年06月12日 10:44:25 作者：宣宣丿
这篇文章主要介绍了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);
},
最终效果如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue+elementui 实现新增和修改共用一个弹框的完整代码
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI ，今天给大家普及vue+elementui 实现新增和修改共用一个弹框的完整代码，一起看看吧2021-06-06
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue如何监听某个元素的大小变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了在vue-cli项目中如何使用swiper问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本篇文章主要介绍了vue之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
Vue Camera组件是一个用于在Web应用中使用摄像头的Vue插件,它提供了一些常见的功能和方法来控制摄像头和捕获图像或视频数据,本文给大家介绍Vue Camera组件的常见功能和使用方法,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要为大家详细介绍了Vue使用localStorage存储数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了Vue字符串中如何添加多个空格问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度，本文就整理一下，分享给大家，有兴趣的可以学习2021-06-06
vue3中echarts图表在页面刷新后无法自适应改变大小的解决过程
优化ECharts图表开发需独立变量、创建显示方法,并通过添加和移除窗口大小监听实现响应式刷新,确保性能与资源管理2025-09-09
最新评论