vue实现 【echarts中graph关系图图例】，制作一个知识点的关系图表，其中包含 “点击节点” 和 “提示弹窗按钮点击事件” 实现【页面跳转】

一、安装echarts

npm install echarts --save

二、在需要的页面引入 

import * as echarts from "echarts"

三、创建页面KnowChart.vue

html部分

js部分

页面跳转的2种方式：点击提示窗中的按钮点击事件 / 点击节点

1、点击提示窗中的按钮点击事件

vue中改变echarts 提示窗样式部分，需取消scored，再加class名

 以下截图实现弹窗跳转页面

在之前 option 基础上，加上 // 提示框的配置 tooltip:{} ，以及弹窗点击事件myAerlt()， 页面跳转函数goDetail ()

其中，在myAerlt函数中，直接使用this调用goDetail ，是找不到 报错undefined，想要使用vue中的函数以及router路由，将vue的this指向赋值给变量给一个变量（let _this = this） ，即可解决

​ methods: {
    // 跳转至详情页
    goDetail () {
      this.$router.push({name: 'knowMath'})
    },
    montheahcrt () {
      let _this = this  // 将vue的this指向赋值给变量，获取到跳转的router路由
      function myAerlt (val) {
        if (val) {
          _this.goDetail()
        }
      }
      window.myAerlt = myAerlt
      ....
      var option = {
        title: { ...... },
        grid: { ...... },
        // 提示框的配置
        tooltip: {
          triggerOn: 'click',
          enterable: true,
          formatter: function (x) {
            return `

                    

                      

                        必会
                      
                      
 ${x.data.name}
                    
                    
书中位置：必修2P102
                    
                      针对学
                    
                  
`
          },
          extraCssText:'width:120px; white-space:pre-wrap' // 文字内换行样式
        },
        legend:
        ......
      }
      ......
    }
  }

​

2、点击节点

在之前的基础上，添加节点事件

let myChart = echarts.init(document.getElementById('atlasChart'))
myChart.on('click', function (param) {
  if (param.dataType === 'node') {
     // 点击节点
     _this.goDetail()
  } else {
    // 点击边
    console.log('点击了边', param)
  }
})

3、切换数据时，加载慢的的解决方法 

A、释放图表 实例不可用 myChart.dispose()

B、清空画布内容 实例可用 myChart.clear()

C、还原图表，各种状态均被清除 myChart.restore()

D、刷新图表 myChart.refresh()

if (this.myChart_ == null) {
  this.myChart_ = echarts.init(document.getElementById(this.id))
} else {
  this.myChart_.dispose()
  this.myChart_ = echarts.init(document.getElementById(this.id))
}
let myChart = this.myChart_

有坑：vue为echarts绑定数据库数据，不显示的问题

此处导致的原因是：将option的内容放在mounted钩子函数了，因此echarts图先渲染出来了，数据没出来。

解决方法：将option与数据库中的数据，执行加载的顺序换一下

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~