一个vue组件,两个echarts图表显示和隐藏

需求:点击上一个echarts图标的柱状图(按月),下面的图标,显示详细信息(按周).

 变化为:

 在一个组件里面,我是通过v-show控制下面图标的显示和隐藏.(用v-show会导致,开始会导致,点击切换图片时,显示的图标的宽高是100px,开始遇到这个问题,搜的资料显示需要变成v-if加上this.$nextTick()去强制渲染第二个图表,才会显示正常,但是后来应用v-show和this.$nextTick()实现了效果,也是存在疑惑的)

1.点击上一个图片柱状图(此处的点击事件,是需要点击到蓝色柱状图区域上,不在蓝色柱状图区域上是失效的)的事件

因为我把这些图表都放在了单独的组件里面,所以在点击上面的柱状图时,可能会涉及到兄弟组件之间传值的问题,用到了eventBus.

(1)在src目录下,新建的文件夹:

Bus.js:

// （实例化一个Vue对象并暴露）
import Vue from 'vue'
export default new Vue()

 (2)上一个柱状图vue文件里,在初始化完的echarts图标下,给它添加单击事件,isshow是控制下面vue组件两个图标的显示和隐藏,param参数,可以打印出来当前点击的柱子的信息 

 myCharts.on('click', this.clickFunc)

触发点击事件的时候,将控制显示隐藏的状态传过去 

clickFunc (param) {
      console.log(param)
      Bus.$emit('getParam', this.isshow = true)
    }

 2.在下面的vue文件里面,需要接收上面的组件传下来的状态,并渲染,

this.twoinitChart()是第二个图标的初始化函数;screenAdaptertwo()是图表适配,getParame()在mounted钩子里面调用.

    getParam () {
      var me = this
      // 监听'getParam'事件
      Bus.$on('getParam', res => {
        console.log(res)
        me.isshow = res
        this.$nextTick(() => {
          this.twoinitChart()
          this.screenAdaptertwo()
        })
      })
    }

  ps:旨在记录自己遇到的问题,不严谨的地方,感谢指教,一起进步,ヾ(◍°∇°◍)ﾉﾞ