时间戳

首页 > 解决方案 > Echarts.js：检测对数据子集的点击

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

问题描述

我想检测对条形图中特定子集的点击。因为我想在单击后使用单击子集中的数据来初始化一个新图表。目前，当我单击图表条时，我会获取整个图表的数据，并且无法仅检索一个条的数据。

这是我所拥有的：

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

标签： javascriptvue.jsecharts

解决方案

在您的点击处理程序中，您正在传递对图表原始配置对象的引用，因此这将在您的 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，此信息对象将允许您确定单击了哪个栏。

推荐阅读