Echarts.js: Detect a click on a subset of data

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

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;
      });
    },
  },

Advertisement

Answer