触发echarts里的点击事件,改变vue组件的内容

191 阅读1分钟

1、echarts 和 vue组件的传值我用的是eventBus方式

这里先说一下eventBus的写法和用法

建一个eventBus.js文件
  const install = (Vue) => {
      const Bus = new Vue();
      Vue.prototype.$bus = Bus;
  }  
  export default {
      install,
  }
  

然后在echarts.js里写,我是把echarts写成的vue的插件使用的,

`  import echarts from 'echarts'
   const echartsInstance = function (Vue) {
       Object.defineProperties(Vue.prototype,{
         $echartsPlugin: {
             get () {
                 // 这个保存的是vue的this
                 let that = this
                 // 关系图,id是绘制echarts的容器,analystGragh是你后台给你的要显示在关系图上的数据,这里就不关心写在这里了哈。
                 basicGraph(id,analystGragh) {
                     let myEchart = echarts.init(document.getElementById(id))
                     // 这是触发echarts里的点击事件
                     // params是你点击后,传入的参数,不知道是什么你可以打印出来
                     myEchart.on(‘click’, function(params) {
                         // 判断是点击在节点上了么
                         if (params.dataType == 'node') {
                             if (params.data.type === '这个是我业务里的关建词') {
                             that.$bus.$emit (
                             'echartsData',
                             params.data.name
                             )
                             }
                         }
                     })
                 }
             }
         }
       })
   
   }`

在vue组件里

`mounted()

{

this.bus.bus.on('echarts', 你在组件里定义的变量用来,用来接收传来的传,this.~~~)

}`

别忘记在main.js里use你写的这两个js

`import eventBus from './util/eventbus.js'

import echarts from '.util/echarts.js'

Vue.use(eventBus);

Vue.use(echarts)`