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

Question

我想检测对条形图中特定子集的点击。因为我想在点击后使用来自点击子集的数据初始化一个新图表。目前，当我点击图表柱时，我会得到整个图表的数据，而不能只检索一个柱的数据。

这是我的：

<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

我设法通过向组件添加 refs 属性和点击事件并传递一个函数来检测点击的子集。然后我把这个函数放在方法中：

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

Answer 2

在您的点击处理程序中，您传递了对图表原始配置对象的引用，因此这就是您在 mergeOptions 函数中可用的内容

如果删除括号和参数，您的函数将获取点击事件的事件信息 @click="mergeOptions"

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

根据文档echarts.baidu.com/tutorial.html#Events%20and%20actions%20in%20ECharts%0D此信息对象将允许您确定单击了哪个栏。

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

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

javascript

vue.js

echarts