如何在echarts条形图中使条周围的空间可点击? [英] How to make space around bar clickable in echarts bar chart?

问题描述

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

The 'click' event gets triggered only when clicked exactly inside the bar. This is not convenient if we have a bar with small width or height. When i hover the bar, some space around the bar is highlighted with full chart height and tooltip is displayed. i want to make the highlighted region clickable and the bar data should be available in the event. I have gone through the docs and tried chart.on('click', 'xAxis.category', function () {...}); But the function is not triggered.

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

In this demo, Alert is triggered only when i click inside a bar. How do i make the surrounding area clickable?

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

推荐答案

是的，当您单击外部栏时，您将无法接收到公共事件，但是Echarts是成熟的框架，几乎所有事件都可以通过低级对象 zRender接收到..您需要使用 getZr()访问 zRender ，然后将单击像素的坐标转换为图表坐标.之后，您将获得系列数据点的索引，并通过该索引来获取类别将很容易.

It's true, you cannot receive the common event when click outside bar but Echarts is mature framework and almost any events can received with low-level object zRender. You need to get access to zRender with getZr() and then convert coordinates of the clicked pixel to chart coordinates. After it you will have index of series datapoint and with this to fetch category will be easy.

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>

这篇关于如何在echarts条形图中使条周围的空间可点击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！