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);
    },

最终效果如下：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3之路由的query参数和params参数用法
这篇文章主要介绍了Vue3之路由的query参数和params参数用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue实现计数器案例
这篇文章主要为大家详细介绍了Vue计数器案例的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
Vue实战之掌握自定义指令
作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、v-for、v-if等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼
2022-11-11
vue3中reactive和ref函数及对比分析
这篇文章主要介绍了vue3中reactive和ref函数及对比,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2024-01-01
一次在vue中使用post进行excel表下载的实战记录
最近遇到了需求,觉着有必要给大家总结下,这篇文章主要给大家介绍了关于一次在vue中使用post进行excel表下载的实战记录,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue如何动态修改$router参数
这篇文章主要介绍了vue如何动态修改$router参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3如何获取来源路由
这篇文章主要介绍了Vue3如何获取来源路由问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vue分页组件实例代码
这篇文章主要为大家详细介绍了Vue分页组件的实例代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
关于ElementPlus中的表单验证规则详解
这篇文章主要介绍了关于ElementPlus中的表单验证,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
关于axios配置请求头content-type实例详解
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,下面这篇文章主要介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下
2022-04-04