echarts点击柱状图带参数跳转到指定页面（路由）

echarts点击柱状图带参数跳转到指定页面（路由）

项目开发者常用echarts来实现数据可视化功能。上次遇到了一个问题，就是通过后台返回的数据渲染echarts数据完成后需要点击柱形图图标的时候跳转制定的新的页面展示（当然新的页面内容，后台通过柱形图的参数来给我们返回过来的）

1，引入echarts

2，准备渲染echarts的区域div 

3，通过后台数据渲染数据

init2(arr) {
        let labelData = []
        let valueData = []
        let num = 0
        arr.forEach(item => {
          labelData.push(item.label)
          valueData.push(item.value)
          num += parseInt(item.value)
        })
        labelData.push('')
        valueData.push(0)
        // 基于准备好的dom，初始化echarts实例
        this.myChart1 = echarts.init(document.getElementById('echart1'));
        let option1 = {
          title: {
            text: '数据不合格数量: ' + num,
            left: 'center'
          },
          xAxis: {
            type: '',
            data: labelData,
            axisLabel: {
              interval: 0,
              rotate: -15
            },
            name: "（公司）"
          },
          yAxis: {
            type: 'value',
            name: "（数量）",
          },
          series: [
            {
              name: '销量',
              data: valueData,
              type: 'bar',
              itemStyle: {
                normal: {
                  barBorderRadius: [4, 4, 0, 0],
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    { offset: 0, color: '#1FB9CE' },
                    { offset: 1, color: '#0846A3' },
                  ])
                }
              },
              label: {
                show: true,
                position: 'top'
              },
            }
          ]
        }
        // 绘制图表
        this.myChart1.setOption(option1)
// ------echarts点击事件获取对应的index和公司名称-------------
        // echarts点击事件获取对应的index和公司名称---跳转对应的数据核查页面ok
        this.myChart1.getZr().on('click', params => { // 柱形图点击事件
              var pointInPixel = [params.offsetX, params.offsetY]
              // 判断给定的点是否在指定的坐标系
              if (this.myChart1.containPixel('grid', pointInPixel)) {
                const xIndex = this.myChart1.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
                const option = this.myChart1.getOption()
                const xAxis = option.xAxis
                const name = xAxis[0].data[xIndex]
                console.log(xIndex)
                console.log(name)
                // console.log('--------打印index和公司名称-----------------')
                if (name !== undefined || name === '') { // 非空校验，防止没数据点击空白图表跳转
                  // 路由跳转传参
                  this.$router.push({
                    path: 'dataVerification',
                    query: {
                      echartsIndex: xIndex, //index值
                      echartsName: name,   //公司名称
                    }
                  })
                  console.log(this.$route.query)
                }
              }
        })
// -------------------
        window.addEventListener("resize", () => {
          this.myChart1.resize();
        });
      },

 4，实现点击柱形图图标带参数跳转制定页面(核心代码)

    // echarts点击事件获取对应的index和公司名称---跳转对应的数据核查页面ok
        this.myChart1.getZr().on('click', params => { // 柱形图点击事件
              var pointInPixel = [params.offsetX, params.offsetY]
              // 判断给定的点是否在指定的坐标系
              if (this.myChart1.containPixel('grid', pointInPixel)) {
                const xIndex = this.myChart1.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
                const option = this.myChart1.getOption()
                const xAxis = option.xAxis
                const name = xAxis[0].data[xIndex]
                console.log(xIndex)
                console.log(name)
                // console.log('--------打印index和公司名称-----------------')
                if (name !== undefined || name === '') { // 非空校验，防止没数据点击空白图表跳转
                  // 路由跳转传参
                  this.$router.push({
                    path: 'dataVerification',
                    query: {
                      echartsIndex: xIndex, //index值
                      echartsName: name,   //公司名称
                    }
                  })
                  console.log(this.$route.query)
                }
              }
        })

5，跳转完成-再新的页面接受参数