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.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)`