echarts点击柱状图携带参数跳转页面

最新推荐文章于 2024-06-26 10:31:16 发布

皓月当空hy

最新推荐文章于 2024-06-26 10:31:16 发布

阅读量850

点赞数 4

分类专栏： elementUI vue echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_33911541/article/details/139152314

版权

本文介绍了如何在Echarts柱状图中设置点击事件，通过添加`triggerEvent`属性使x轴可点击，并实现点击x轴坐标或柱子时携带参数跳转页面。点击事件中，根据`componentType`判断是x轴还是系列，然后利用`dataIndex`找到对应的数据并进行页面跳转。在接口返回的数据中添加所需参数，以便在点击时获取。

摘要由CSDN通过智能技术生成

getBarCharts() {
      let that = this
      let barWidth = 20
      let manColors = []
      let womanColors = []
      let nowTime = ''
      let lastTime = ''
      let option = {
        //提示框
        tooltip: {
          trigger: 'axis',
          formatter: function(p) {
            let div = `
                ${p[0].name}
                <br/>
                ${p[0].seriesName}:${p[0].value}
                <br/>
                ${p[2].seriesName}:${p[2].value}

            `
            return div
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#1DD6CF', '#4eff8f'],
        legend: {
          textStyle: { fontSize: 12, color: '#fff' },
          itemWidth: 24,
          itemHeight: 15,
          itemGap: 15,
          bottom: '2%'
        },
        grid: {
          left: '6%',
          right: '2%',
          top: '10%'
        },
        xAxis: {
          data: this.xName,
          triggerEvent: true,
          silent: false,
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00787e',
              shadowColor: '#00787e'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // margin: 30,
            fontSize: 15,
            color: '#FFFFFF',
            formatter(value){
              if (value.length > 6) {
                return `${value.slice(0, 6)}...`