vue中echarts點擊事件點擊一次多次觸發(fā)問題
更新時間：2024年06月12日 17:34:25 作者：浩星
這篇文章主要介紹了vue中echarts點擊事件點擊一次多次觸發(fā)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
vue中使用echarts圖，并且使用他的點擊事件就會發(fā)現(xiàn)一個問題，第一次我echarts圖的點擊事件是生效的而且正常的，但是一旦重新渲染這個echarts圖以后，就會出現(xiàn)再重新渲染一次，（相當于2次渲染echarts圖），點擊事件會被調(diào)用2次，第二次重新渲染，點擊事件就會被調(diào)用3次，這個問題。
問題展示
（我這里是調(diào)用后臺，我的日歷刷新一次時間，就會重新渲染一次我的echarts圖）
正常點擊事件
（前，點擊一次調(diào)用一次后臺）
異常
（當我選了日歷以后，重新渲染echarts圖，再點擊的時候，重新渲染幾次，點擊多幾次）
解決辦法
再渲染echarts圖前加
this.myChart.off('click') // 這里很重要！！解決重復(fù)點擊
this.myChart = echarts.init(this.$refs.chart);
this.myChart.off('click') // 這里很重要！！解決重復(fù)點擊
this.myChart.setOption({封裝組件源碼
<template>
<div class="echarts" ref="chart"></div>
</template>
<script>
const echarts = require('echarts');
export default {
props:{
data:{//echarts數(shù)據(jù)
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;//單位
/**
* 處理數(shù)據(jù)
*/
// 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;
/**
* 獲取數(shù)據(jù)內(nèi)部最大值，+100來設(shè)置背景圖高度
*/
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') // 這里很重要??！解決重復(fù)點擊
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:{//網(wǎng)格線
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>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇在Vue組件中獲取全局的點擊事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
如果說是JQuery是手工作坊,那么Vue.js就像是一座工廠,雖然Vue.js做的任何事情JQuery都可以做,但無論是代碼量還是流程規(guī)范性都是前者較優(yōu),這篇文章主要給大家匯總介紹了關(guān)于Vue項目中常用的實用技巧,需要的朋友可以參考下2021-07-07
vue2.0結(jié)合Element-ui實戰(zhàn)案例
這篇文章主要介紹了vue2.0結(jié)合Element-ui實戰(zhàn)案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家介紹了簡單卻不失優(yōu)雅、小巧而不乏大匠的Vue.js,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue-cli4.0如何配置CDN加速問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue mvvm數(shù)據(jù)響應(yīng)實現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實現(xiàn)的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
在項目中很多時候需要用到vue打包成html不需要放在服務(wù)器上就能瀏覽,根據(jù)官網(wǎng)打包出來的html直接打開是顯示空白,下面這篇文章主要給大家介紹了關(guān)于vue打包后出現(xiàn)空白頁的原因及解決方式的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了VUE響應(yīng)式原理的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
本篇文章主要介紹了詳解用vue-cli來搭建vue項目和webpack，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04