vue中echarts点击事件点击一次多次触发问题
更新时间：2024年06月12日 17:34:25 作者：浩星
这篇文章主要介绍了vue中echarts点击事件点击一次多次触发问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
vue中使用echarts图，并且使用他的点击事件就会发现一个问题，第一次我echarts图的点击事件是生效的而且正常的，但是一旦重新渲染这个echarts图以后，就会出现再重新渲染一次，（相当于2次渲染echarts图），点击事件会被调用2次，第二次重新渲染，点击事件就会被调用3次，这个问题。
问题展示
（我这里是调用后台，我的日历刷新一次时间，就会重新渲染一次我的echarts图）
正常点击事件
（前，点击一次调用一次后台）
异常
（当我选了日历以后，重新渲染echarts图，再点击的时候，重新渲染几次，点击多几次）
解决办法
再渲染echarts图前加
this.myChart.off('click') // 这里很重要！！解决重复点击
this.myChart = echarts.init(this.$refs.chart);
this.myChart.off('click') // 这里很重要！！解决重复点击
this.myChart.setOption({封装组件源码
<template>
<div class="echarts" ref="chart"></div>
</template>
<script>
const echarts = require('echarts');
export default {
props:{
data:{//echarts数据
type:Array,
default:()=>[]
},
Params:Object,
},
data () {
return {
name:'柱图',
myChart:null,
};
},
components: {},
mounted() {
this.initCharts(this.data);
},
watch:{
data(val){
this.initCharts(val);
}
},
methods: {
initCharts(data){
if(data.length==0){
return;
}
let unit = this.Params.unit;//单位
/**
* 处理数据
*/
// let dataAxis = ['10.24', '10.25', '10.26', '10.27', '10.28', '10.29', '今日'];
// let Ydata = [220, 182, 191, 234, 290, 330, 310];
let dataAxis = [];
let Ydata = [];
data.forEach(item => {
dataAxis.push(item.date);//日期
Ydata.push(item.value);//积分
});
let maxLengthVal = Ydata.length-1;
/**
* 获取数据内部最大值，+100来设置背景图高度
*/
var max = Ydata.reduce( (a,b)=> b > a ? b : a );//获取最大值
var dataShadow = [];
var yMax;
if(max<100){
yMax = max+30;
}else if(max>100 && max<500){
yMax = max+100;
}else{
yMax = max+200;
}
for (var i = 0; i < Ydata.length; i++) {
dataShadow.push(yMax);
}
this.myChart = echarts.init(this.$refs.chart);
this.myChart.off('click') // 这里很重要！！解决重复点击
this.myChart.setOption({
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
textStyle: {
color: '#000',
fontSize:'100%'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
position: "top",
z:10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine:{//网格线
show:false
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
normal: {color: '#F6FBFE'},
emphasis: {color: 'rgba(255,188,117,.3)'}
},
barGap:'-100%',
barCategoryGap:'40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
color:'#000',
fontSize:'100%',
formatter: function (params) {
return params.value+unit;
},
},
},
itemStyle: {
normal: {
// color: new echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [
// {offset: 0, color: '#FF3405'},
// {offset: 0.5, color: '#FF6A47'},
// {offset: 1, color: '#FF9076'}
// ]
// )
color: function(params) {
if(params.dataIndex == maxLengthVal){
return new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FF3405'},
{offset: 0.5, color: '#FF6A47'},
{offset: 1, color: '#FF9076'}
]
);
};
return new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FFBD77'},
{offset: 0.5, color: '#FF9F38'},
{offset: 1, color: '#FF8505'}
]
);
}
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FF3405'},
{offset: 0.5, color: '#FF6A47'},
{offset: 1, color: '#FF9076'}
]
)
}
},
data: Ydata
}
]
})
this.myChart.on('click',(params)=>{
let name = '';
data.forEach(item=>{
if(item.date == params.name){
name = item.dateYear
}
})
this.$emit('echartsClick',name);
});
},
},
}
</script>
<style lang='less' scoped>
.echarts{
width: 100%;
height:100%;
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现兄弟组件之间跳转指定tab标签页，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue组件中使用props传递数据的实例详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
本文主要介绍了vite创建一个标准vue3+ts+pinia项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
Vue3使用exceljs将excel文件转化为html预览最佳方案
在企业应用中,我们时常会遇到需要上传并展示 Excel 文件的需求,以实现文件内容的在线预览,经过一番探索与尝试,笔者最终借助 exceljs 这一库成功实现了该功能,本文将以 Vue 3 为例,演示如何实现该功能,需要的朋友可以参考下2025-05-05
这篇文章主要介绍了Vue3中引入Pinia存储库使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
老虎机在很多地方都可以见到，可以设置中奖位置，以及中奖回调，本文主要介绍了VUE 实现一个简易老虎机的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了vue实现导出Word文件(数据流方式)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要给大家介绍了关于Vue.js如何利用v-for循环生成动态标签的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
在开发中,PDF预览和交互功能是一个常见的需求,无论是管理系统、在线教育平台,还是企业内部的知识库,能够高效地展示和操作PDF文件都能极大地提升用户体验,本文将详细介绍如何在Vue项目中实现pdf预览功能,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了Vue默认插槽,具名插槽,作用域插槽定义及使用方法,插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据,下面详细内容需要的小伙伴可以参考一下2022-03-03
最新评论