echarts 图表中添加点击事件

最新推荐文章于 2025-04-22 15:18:55 发布

ivan_jq

最新推荐文章于 2025-04-22 15:18:55 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 Echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/ivan_jq/article/details/109173751

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

Echarts

4 篇文章

订阅专栏

本文介绍如何在ECharts中为柱状图等元素添加点击事件，实现数据交互。包括安装ECharts、全局及局部引入方法，并通过实例展示了如何设置点击、鼠标悬停及移出事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、例如柱状图中，经常需要点击某柱状图，进行全局的数据请求，此时就需要给图表添加点击事件。

二、使用

1、安装echarts

npm i -g echarts

2、引入

全局引入
main.js中
import echarts from ‘echarts’;
Vue.prototype.$echarts = echarts;
局部引入

3、使用

	const chart = document.getElementById('');
    let instance = this.$echarts.init(chart);
    instance.setOption(option);
    instance.on('click', (params) => {
      console.log('click', params);
      // 执行方法
    });
    instance.on('mouseover', (params) => {
      console.log('mouseover', params);
    });
    instance.on('mouseout', (params) => {
      console.log('mouseout', params);
    });