Echarts——VUE中如何给echarts绑定click事件

简介: Echarts——VUE中如何给echarts绑定click事件

前言

一个老项目需求需要给echarts图表增加点击事件,点击图表的时候跳转到对应的页面;

echarts: 4.9.0

步骤

实现

this.chart.on('click', () => {
    this.$router.push({ path: '/source/sourceList' })
})

完整

this.chart = echarts.init(this.$el, 'macarons')
this.chart.resize()
this.chart.clear()
this.chart.setOption(this.options, true)
this.chart.on('click', () => {
    this.$router.push({ path: '/source/sourceList' })
})

演示

学无止境,谦卑而行.

目录
相关文章
|
30天前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
127 1
|
30天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
203 0
|
30天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
371 0
|
30天前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
78 0
|
3月前
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图
|
3月前
|
JavaScript 数据可视化 搜索推荐
在Vue项目中使用Echarts图表库
这篇文章介绍了如何在Vue项目中集成ECharts图表库,并通过具体的代码示例展示了如何创建并配置一个饼图来展示数据。
44 0
在Vue项目中使用Echarts图表库
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
3月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
38 1
|
5月前
|
JavaScript 开发工具 git
大事件项目17----Vue项目引入Echarts
大事件项目17----Vue项目引入Echarts
大事件项目17----Vue项目引入Echarts
|
4月前
|
JavaScript 定位技术
【vue】 vue中echarts渐变被覆盖、失效,echarts.graphic.LinearGradient,不能正常显示的解决方法。
【vue】 vue中echarts渐变被覆盖、失效,echarts.graphic.LinearGradient,不能正常显示的解决方法。
280 0