Echarts.js：检测对数据子集的点击

Question

I want to detect a click on a particular subset in a bar chart. As I want to init a new chart after the click, with the data from the clicked subset. Currently when I click on chart bars, I get data of the whole chart and can't retrieve data of just one bar.

Here is what I have:

<template>
 <chart :options="chartOptionsBar"
           :autoresize="true"
           ref="barChart"
           @click="mergeOptions(chartOptionsBar)"></chart>
<template>

<script>
...
export default {
  data() {
    return {
      manualOptions: '',
      chartOptionsBar: {
        xAxis: {
          data: ['Q1', 'Q2', 'Q3', 'Q4'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            type: 'bar',
            data: [
              { value: 335, name: '1' },
              { value: 310, name: '2' },
              { value: 234, name: '3' },
              { value: 135, name: '4' },
            ],
          },
        ],
        title: {
          text: 'Quarterly Sales Results',
          x: 'center',
          textStyle: {
            fontSize: 24,
          },
        },
        color: ['#127ac2'],
      },
    };
  },
  methods: {
    mergeOptions (options) {
      console.log(options.series[0]);
    },
  },
};
</script>

Answer 1

In your click handler you are passing in a reference to the original config object for the chart, so this is what will be available to you in your mergeOptions function

If you remove the parenthesis and argument your function will get the event information for the click event @click="mergeOptions"

mergeOptions (eventInfo) {
  console.log(eventInfo);
  // hopefully this information will be a bit more use
}

According to the documentation echarts.baidu.com/tutorial.html#Events%20and%20actions%20in%20ECharts%0D this information object will allow you to determine which bar was clicked.

Answer 2

I managed to detect the clicked subset by adding a refs attribute and the click event to the component and passing a function. Then I put this function in methods:

methods: {
    getDataSubset() {
      this.$refs.barChart.chart.on('click', (params) => {
        this.subset = params.data;
      });
    },
  },