在 ECharts 中,可以通过监听图例的点击事件来实现相应的交互。当图例被点击时,可以捕获这个事件并执行相应的操作。

legendselectchanged 事件上添加了一个监听器,当图例被点击时,会触发这个事件,可以获取到点击的图例信息,然后执行相应的操作。

核心代码:

// 监听图例点击事件
    myChart.on('legendselectchanged', function (params) {
        console.log(params); // 输出点击的图例信息
        // 在这里执行你想要的操作,根据点击的图例进行相应的处理
    });

点击图例,打印结果如下:

完整代码如下:

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  setup() {
    const chart = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (chart.value) {
        const myChart = echarts.init(chart.value);

        const option = {
          legend: {
            data: ['A', 'B', 'C'],
          },
          xAxis: {
            type: 'category',
            data: ['January', 'February', 'March', 'April', 'May'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: 'A',
              type: 'bar',
              data: [2, 2, 1, 12, 43],
            },
            {
              name: 'B',
              type: 'bar',
              data: [2, 43, 22, 1, 12],
            },
            {
              name: 'C',
              type: 'line',
              data: [2, 1, 12, 43, 2],
            },
          ],
        };

        myChart.setOption(option);

        // 监听图例点击事件
        myChart.on('legendselectchanged', function (params) {
          console.log(params); // 输出点击的图例信息
          // 在这里执行你想要的操作,根据点击的图例进行相应的处理
        });
      }
    });

    return { chart };
  },
});
</script>

GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐