vue3 + ts + echarts图例点击事件(legendselectchanged事件)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
在 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 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)