echarts 图表中添加点击事件

最新推荐文章于 2024-10-30 20:09:28 发布

原创最新推荐文章于 2024-10-30 20:09:28 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

Echarts

4 篇文章

订阅专栏

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

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

二、使用

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);
    });