echart 柱状图点击可以跳转页面

Question

echart 柱状图点击可以跳转页面
封装的echart 组件代码如下

<template>
  <div>
    <div id="echart-line" ref="echarts" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      channel: JSON.parse(sessionStorage.getItem('loginUserData')).channel,
      xDataName: [],
      renderingData: []
    }
  },
  methods: {
    initChart(name, xData, yData, xDatawx, chart_type) {
      const getchart = echarts.init(this.$refs.echarts)
      getchart.clear()
       this.xDataName = xData
      setTimeout(() => {
        var dataZoom = []
        var tooltip = {}
        if (chart_type !== 'tooltip') {
          tooltip = {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            }
          }
        }
        if (chart_type !== 'index') {
          dataZoom = [
            {
              orient: 'horizontal',
              show: true, // 控制滚动条显示隐藏
              realtime: true, // 拖动滚动条时是否动态的更新图表数据
              height: 15, // 滚动条高度
              start: 0, // 滚动条开始位置（共100等份）
              end: 100, // 滚动条结束位置
              bottom: '4%',
              zoomLock: false // 控制面板是否进行缩放
            }
          ]
        }
        var option = {
          tooltip,
          legend: {
            data: name,
            top: '0%',
            right: '0%'
          },
          grid: {
            // 调整图表上下左右位置
            top: '18%',
            left: '5%',
            right: '5%',
            bottom: '15%'
          },
          dataZoom,
          xAxis: {
            data: this.xDataName
          },
          yAxis: {},
          series: yData,
          toolbox: {
            show: false,
            orient: 'horizontal',
            left: 'left',
            top: 'top',
            feature: {
              saveAsImage: { show: true } // 保存图表
            }
          }
        }
        console.log(option, 'option.tooltip')
        getchart.setOption(option)
        // 随着屏幕大小调节图表
        window.addEventListener('resize', () => {
          getchart.resize()
        })
      }, 100)

      getchart.on('click', function(params) {
        if (params.seriesType === 'bar') {
          // 检查事件是否由柱状图触发
          console.log('柱子被点击了！')
          console.log('点击的数据是:', params.data) // 输出点击的柱子对应的数据
          // 你可以在这里处理点击后的逻辑
          this.$emit('clickBar', params)
        }
      })
    }
  }
}
</script>

如何在父组件中使用此处的点击方法

Answer 1

父组件代码示例：

<template>
  <div>
    <bar-chart @bar-click="handleBarClick"></bar-chart>
  </div>
</template>
<script>
export default {
  methods: {
    handleBarClick(data) {
      // 这里处理点击事件，data是从子组件传递过来的数据
      // 例如，你可以使用data来导航到新的路由
      this.$router.push({ path: `/item/${data.itemId}` });
    }
  }
}
</script>

子组件代码示例：

<template>
  <div ref="barChart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
 
export default {
  mounted() {
    this.initBarChart();
  },
  methods: {
    initBarChart() {
      const myChart = echarts.init(this.$refs.barChart);
      const option = {
        // ECharts 配置
      };
      myChart.setOption(option);
 
      myChart.on('click', (params) => {
        // 当柱子被点击时，发出事件给父组件
        this.$emit('bar-click', params.data);
      });
    }
  }
}
</script>