原地址：https://blog.csdn.net/shiyanfangye/article/details/81910218
解决方式：myCharts.off('click')
最近写vue项目时用到echarts做个小功能，点击饼状图的每一块，生成新的柱状图，同时要给柱状图绑定点击事件，弹出每一条柱状数据详情。
做完后发现一个问题，第一次点击柱状图时点击事件只触发一次，点击饼状图第二次生成柱状图后，柱状图的点击事件就会触发两次，以此类推……最后越来越多。
代码如下：
// 画饼状图
drawPie() {
let myCharts = Echarts.init(document.getElementById('pie'))
let option = {
title: {
text: '所有会员',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: 10,
left: 'center',
data: ['注册会员', '超级合伙人', '超级合伙人-战略合作', '网点']
},
series: [
{
type: 'pie',
center: ['50%', '50%'],
selectedMode: 'single',
data: this.allMember
}
]
}
myCharts.setOption(option)
// 点击饼状图的每一块生成新的数据
myCharts.on('click', (params) => {
this.getData(params.name)
})
}
// 获取数据,数据时请求接口动态获取的
getData (name) {
let url = '/api/user/top/role?roleId=' + name
this.$root.loading.show()
this.$http.get(url).then(res => {
this.$root.loading.hide()
if (res.data.success) this.chartsData = res.data.data.content
else this.$message.error()
this.drawBar(name, this.chartsData)
})
}
// 画柱状图
drawTopten(name, val) {
let myCharts = Echarts.init(document.getElementById('bar'))
myCharts.off('click') // 这里很重要！！！
let x = []
let y1 = []
let y2 = []
let idList = []
val.forEach(e => {
x.push(e.name)
y1.push(e.invitationNum)
y2.push(e.totalMoney / 100)
idList.push(e.id)
}) // 这些都是自己做的一些数据处理，可以忽略
let option = {
title: {
text: name + '前十用户',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
bottom: 10,
left: 'center',
data: ['推广用户', '总收益/元']
// selectedMode: false
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center'
},
calculable: true,
xAxis: [
{
type: 'category',
name: '昵称',
axisTick: {show: false},
data: x
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '推广用户',
type: 'bar',
barGap: 0,
data: y1
},
{
name: '总收益/元',
type: 'bar',
data: y2
}
]
}
myCharts.on('click', (e) => {
alert(111) // 如果不加off事件，就会叠加触发
})
myCharts.setOption(option)
}
其中重点就是，在画触发点击事件的柱状图时，首先要加上一个off事件： myCharts.off('click')
看过其他的clear方法，或者在setOption时加上第二个参数true其实都是没用的。
