如何在echarts条形图中使条形周围的空间可点击？答案

【问题标题】：How to make space around bar clickable in echarts bar chart?如何在echarts条形图中使条形周围的空间可点击？
【发布时间】：2020-11-02 10:22:23
【问题描述】：

“点击”事件仅在栏内完全点击时才会触发。如果我们有一个小宽度或高度的条，这不方便。当我将鼠标悬停在条形图上时，条形图周围的一些空间会以完整的图表高度突出显示，并显示工具提示。我想让突出显示的区域可点击，并且条形数据应该在事件中可用。我已经浏览了文档并尝试了 chart.on('click', 'xAxis.category', function () {...}); 但是没有触发该功能。

在此演示中，仅当我在栏内单击时才会触发警报。如何使周围区域可点击？

https://codesandbox.io/s/cocky-banzai-6j5pg?file=/src/Chart.js

【问题讨论】：

标签： javascript data-visualization echarts apache-echarts

【解决方案1】：

确实，点击栏外时无法接收普通事件，但是Echarts是成熟的框架，几乎任何事件都可以通过低级对象zRender接收。您需要使用getZr() 访问zRender，然后将点击像素的坐标转换为图表坐标。之后，您将拥有系列数据点的索引，并且使用它来获取类别将很容易。

myChart.getZr().on('click', params => {
  var pointInPixel = [params.offsetX, params.offsetY];
  var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
  var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
  console.log(category);
});

查看示例：

var myChart = echarts.init(document.getElementById('main'));

var option = {
  title: {
    text: 'ECharts'
  },
  tooltip: {},
  legend: {
    data: ['Label']
  },
  xAxis: {
    data: ["Category1", "Category2", "Category3", "Category4", "Category5", "Category6"]
  },
  yAxis: {},
  tooltip: {
    trigger: "axis",
    confine: true,
    enterable: true,
    axisPointer: {
      type: "shadow",
      shadowStyle: {
        color: "rgba(255,0,0, 0.5)"
      }
    },
    backgroundColor: "rgba(255,255,255,1)",
    textStyle: {
      color: "#6D6D70"
    },
    extraCssText: `box-shadow:  3px 6px 14px #cccccc61;border-radius: 10px;`
  },
  series: [{
    name: 'Series',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    showBackground: true,
  }]
};

myChart.setOption(option);

myChart.getZr().on('click', params => {
  var pointInPixel = [params.offsetX, params.offsetY];
  var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
  var category = myChart.getModel().get('xAxis')[0].data[pointInGrid[0]]
  console.log(category);
});

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

【讨论】：