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

Question

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

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

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

Answer 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>