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

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

Answer 2

我设法通过向组件添加refs属性和click事件并传递函数来检测单击的子集。然后我将此函数放入方法中：

select mr_id, sup_id,
       avg(case when status = 'Accepted' then 1.0 else 0 end) as ratio_accepted,
       avg(case when status = 'Rejected' then 1.0 else 0 end) as ratio_rejected,
       avg(case when status = 'InProgress' then 1.0 else 0 end) as ratio_inprogress,
       avg(case when status = 'Forwarded' then 1.0 else 0 end) as ratio_forwarded
from t
group by mr_id, sup_id;

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

2 个答案: