echarts柱状图阴影区域点击事件

Posted 2023-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts柱状图阴影区域点击事件相关的知识，希望对你有一定的参考价值。

参考技术A 我们在做echarts图表的时候经常会出现需要点击图表打开弹窗或者打开新的页面，而如果图表是柱状图的话，可能会出现最大值和最小值差距过大的情况，比如普通的值大小都在1000上下，然后有几个值的大小只有个位数，这种情况下我们首先就需要将坐标轴指示器的type改为'shadow'，这样首先鼠标移入当前数据那一列就能选中并显示tooltip了，然后更进一步，我们想要点击坐标轴指示器的阴影区域从而获取当前列的内容该怎么做呢，这个时候我们就需要echarts内部的 getZr() 方法了。

由于我项目中使用的是 vue-echarts ，可以通过 @zr:click="xxx" 直接绑定zr事件

如果是常规流程的话就是使用echarts实例调用 getZr() ，最好是先解绑click事件

理论上来说直角坐标系里面的图都可以应用这个方法，只是说柱状图最有应用价值。

这个点是几个月前的项目里用到过的，现在写这篇文章找资料的时候发现了一篇不错的文章，里面介绍的挺详细，留作以后备用。在Echarts区域的任何位置精准触发事件

ECharts 报表事件联动系列一：刷新页面

本示例实现了以下功能：

1.点击刷新按钮，仅刷新柱状图，而不是整个页面

2.点击柱状内容刷新柱状图，并更新title

3.点击X轴，Y轴更新title，并弹出alert。

源码代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>ECharts</title>
    <!-- <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>  -->
    <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    您选择了X轴的标签[<span id="xAxisTag"></span>],他的值为[<span id="barValue"></span>]
    <input type="submit" name="" value="刷新" onclick="refresh()">
    <div id="main" style="width: 600px;height:400px;"></div>
    
</body>
<script type="text/javascript">
  function getSeriesData(){

      //根据js方法本身的加载顺序，此方法需要定义在myChart前面
      //此处可以通过后台生成数据，这样后台就无需返回整个option，只需要返回动态的数据部分即可
      // $.ajax({
      //     type: \'GET\',
      //     url: "getSeriesData",
      //     cache: false,
      //     async : false,
      //     dataType: \'json\',
      //     success: function (result) {
      //         seriesdata = result;
      //     },
      //     error: function (result, XMLHttpRequest, textStatus, errorThrown) {
      //         // 状态码
      //         // console.log(XMLHttpRequest.status);
      //         // console.log(XMLHttpRequest.toLocaleString());
      //         // 状态
      //         // console.log(XMLHttpRequest.readyState);
      //         // 错误信息
      //         // console.log(textStatus);
      //     }
      // });

        var n1 = Math.floor(Math.random()*50+1);
        var n2 = Math.floor(Math.random()*50+1);
        var n3 = Math.floor(Math.random()*50+1);
        var n4 = Math.floor(Math.random()*50+1);
        var n5 = Math.floor(Math.random()*50+1);
        var n6 = Math.floor(Math.random()*50+1);
        seriesdata = [n1, n2, n3, n4, n5, n6];

      return seriesdata;
  }  

  function getxAxisData(){
    //同样适用以ajax的方式从后台获取数据
    xAxisData = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
    return xAxisData;
  }

  function getSaleOption(){
      saleOption = {
            title: {
                text: \'ECharts 入门示例\'
            },
            tooltip: {},
            legend: {
                data:[\'销量\']
            },
            xAxis: {
                // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                data : getxAxisData(),
                triggerEvent:true,
                axisTick: {
                    alignWithLabel: true //坐标值是否在刻度中间
                }
                
            },
            yAxis: {triggerEvent:true},
            series: {
                name: \'销量\',
                type: \'bar\',
                //data: [n1, n2, n3, n4, n5, n6],
                // data : seriesdata,
                data : getSeriesData(),
                itemStyle: {  
                    normal: {  
                        color: function(params) {
          　　　　　　      var colorList = [\'#2eddc1\',\'#FCCE10\',\'#E87C25\',\'#277bbb\',\'#E87fff\',\'#277aaa\'];
                            //若返回的list长度不足，不足部分自动显示为最后一个颜色
          　　　　　　        return colorList[params.dataIndex]
         　　　　　　       },
                        label: {  
                            show: true,  
                            position: \'top\'
                        }  
                    }  
                }
            }
        };

        return saleOption;
  }
  

</script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(\'main\'));
        
        // 指定图表的配置项和数据
        var option = getSaleOption();
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        myChart.on(\'click\', function (params) { 
            //param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232
            updatePage(params);
          
            if (params.componentType == "series"){
                refresh();
            }
        });
    </script>

<script type="text/javascript">
  function updatePage(params){
    //点击内容区域
    if (params.componentType == "series"){    
        tag = option.xAxis.data[params.dataIndex];
        value = params.value;
        var xAxisTag = $("#xAxisTag");  
        xAxisTag.html(tag);
        var barValue = $("#barValue");  
        barValue.html(value);
    }
    
    //点击X轴
    if (params.componentType == "xAxis"){
        tag = params.value;
        value = "";
        var xAxisTag = $("#xAxisTag");  
        xAxisTag.html(tag);
        var barValue = $("#barValue");  
        barValue.html(value);
        alert("单击了"+params.value+",X轴标签");  
    }
    //点击Y轴
    if (params.componentType == "yAxis"){
        tag = null;
        value = params.value;
        var xAxisTag = $("#xAxisTag");  
        xAxisTag.html(tag);
        var barValue = $("#barValue");  
        barValue.html(value);
        alert("单击了"+params.value+",Y轴标签");
    }
    
  };

  function refresh(){             
      
      //局部刷新series内容
      //此处没有用常用的刷新div等方法，而是直接改变了option的值，然后重新赋值给myChart
     
      //简化方法，调用getSeriesData更新数据。
      option.series.data = getSeriesData();
      
      myChart.setOption(option);
  };     
  
</script>
</html>

显示效果如下：

以上是关于echarts柱状图阴影区域点击事件的主要内容，如果未能解决你的问题，请参考以下文章

echarts柱状图柱子有没有点击事件

柱状图点击切换数据

利用Highcharts生成柱状图如何给柱状图添加单击事件,比如点击柱状图的区域跳转到另外一个页面。

ECharts 报表事件联动系列一：刷新页面

Echarts事件

关于echarts，地图区域，怎么去掉点击事件