• 点击柱状图区块,获取轴内数据


    1、需要的效果: 初始左图数据,点击区块,上部分改变成点击的数据(此处数据就不做说明了,只说明点击图表获取轴数据效果

      

    2、图表内容也不做说明:

    const myChart3 = this.$echarts.init(document.getElementById('myChart3'));
          myChart3.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
              textStyle: {
                "fontSize": 12
              },
              // formatter: function(e) {
              //   console.log(e);
              // },
              // triggerOn: 'click'
            },
            grid:{
              x:65,
              y:45,
              x2:65,
              y2:20
            },
            legend: {
              x: 'center',
              icon: "circle",
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                fontSize: 12
              },
              data: ['成功笔数', '拒付笔数', '退款笔数', '拒付率']
            },
            toolbox: {
              show: false,
              orient: 'vertical',
              x: 'right',
              y: 'center',
              feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                data: date
              }
            ],
            yAxis: [
              {
                type: 'value',
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed'
                  }
                }
              },
              {
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed'
                  }
                },
                splitNumber: 6,
                type: 'value',
              }
            ],
            series: [
              {
                name: '成功笔数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                  normal: {
                    color: '#2566FA',
                    barBorderRadius: [10, 10, 0, 0],
                  }
                },
                data: date_4,
                // data: [10,20,10,5,10,90,30],
                yAxisIndex: 0
              },
              {
                name: '拒付笔数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                  normal: {
                    color: '#F71F45',
                    barBorderRadius: [10, 10, 0, 0],
                  }
                },
                data: data_1,
                // data: [10,20,10,5,10,90,30],
                yAxisIndex: 0
              },
              {
                name: '退款笔数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                  normal: {
                    color: '#f7bb3d',
                    barBorderRadius: [10, 10, 0, 0],
                  }
                },
                data: data_2,
                // data: [10,20,10,5,10,90,30],
                yAxisIndex: 0
              },
              {
                name: '拒付率',
                type: "line",
                smooth: true,//平滑曲线
                itemStyle: {
                  normal: {
                    color: '#F99025'
                  }
                },
                data: data_3,
                // data: [10,20,60,50,0,5,7],
                yAxisIndex: 1
              },
            ]
          });
    

     3、需要在 setOption 后面,添加点击事件:

        myChart3.getZr().off('click');
          myChart3.getZr().on('click', async (params) => {
            this.newimgAnalysisList = [];  //需要展示的数据,初始化为空,避免多次点击多次赋值
            let pointInPixel = [params.offsetX, params.offsetY];
            let pointInGrid = myChart3.convertFromPixel({seriesIndex: 0}, pointInPixel);
            let xIndex = pointInGrid[0]; // 获取x轴下标
            let op = myChart3.getOption(); // 获取 setoption 的内容
            let machineName = op.xAxis[0].data[xIndex];
            console.log(machineName); //图表x轴名称
            for(const i in this.imgAnalysisList) { //从后端获取,并保存的数据
              if(machineName === this.imgAnalysisList[i].country) { //匹配x轴数据,获取展示内容
                this.newimgAnalysisList.push(this.imgAnalysisList[i]);
              }
            }
          });
    
  • 相关阅读:
    VituralBox 虚拟机网路设置 主机无线
    布局
    Git 安装
    剑指offer——33分行从上到下打印二叉树
    剑指offer——32从上到下打印二叉树
    剑指offer——31序列化二叉树
    剑指offer——30栈的压入、弹出序列
    剑指offer——30包含min函数的栈
    剑指offer——29顺时针打印矩阵
    剑指offer——28对称的二叉树
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/13559646.html
Copyright © 2020-2023  润新知