vue2中echarts饼图和柱状图联动，点击饼图扇区带出柱状图数据的实现，以及需要注意的点_vue2 图表 实现 饼状 柱状切换

饼状图的初始化方法

 pieInit() {

      let that = this //改变this指向 直接使用this 会定位到echart  不是vue (指向问题很关键，开始我就踩坑了)

      var pieechart = echarts.init(document.getElementById('xwPie'))

      var colorspie = ['#3ba272', '#7ed3f4', '#91cc75', '#d48265', '#ffdc60','#5c7bd9' ,'#ff7070', '#ff915a', '#a969c6']

      pieechart.setOption({

        title: {

          text: '设备限位次数占比',

          left: 'center'

        },

        tooltip: {

          trigger: 'item'

        },

        legend: {

          orient: 'vertical',

          left: 'right',

          bottom: 10,

          itemHeight: 15,                      //修改icon图形大小

          icon: 'circle',

          formatter: function (name) {

            return name + '  复位'

          },

          textStyle: {

            color: function (name, index) {

              return colorspie[index]

            }

          }

        },

        series: [

          {

            name: '设备限位次数',

            type: 'pie',

            radius: '66%',

            center: ['43%', '50%'],

            data: this.aqpiedata,

            emphasis: {

              itemStyle: {

                shadowBlur: 10,

                shadowOffsetX: 0,

                shadowColor: 'rgba(0, 0, 0, 0.5)'

              }

            },

            labelLine: {

              show: true

            },

            label: {

              formatter: function (params) {

                return params.name

              }

            },

            color: colorspie // 使用相同的颜色配置

          }]

      })

      // 扇区点击事件 联动柱形图（这个点击事件就是点击扇区 然后把对应的值赋值给柱状图啦）

      pieechart.on('click', function (param) {

//或者改成箭头函数 this指向也可改变 （param）=>{}

        const devsdata = that.Devsdata

        for (let key in devsdata) {

          if (param.name == key) {

            that.aqzhuTitle = param.name

            that.aqzhudata = devsdata[key].quayCrane.value

            that.aqxdata = devsdata[key].quayCrane.name

          }

        }

        that.zhuInit() //改变指向后才能调用方法 否则会报错未定义  

      })

      // 选中legend 触发点击事件

      pieechart.on('legendselectchanged', function (params) {

        let legend = []

        for (const name in params.selected) {

          if (params.selected.hasOwnProperty(name)) {

            legend.push({ name: name })

          }

        }  // 关键

        // 触发legend 取消图例关闭

        pieechart.dispatchAction({

          type: 'legendSelect',

          batch: legend

        })

        that.fwVisible = true

        that.$set(that.aqfwform, 'devcode', params.name)

      }

      )

      // 随着屏幕大小调整图表

      window.addEventListener('resize', () => {

        pieechart.resize()

      })

    },

柱状图初始化方法

这个是获取饼图的数据  

记得在mounted里调用图表的初始化方法~

好啦~今天的总结分享到此为止