取消点击事件两种方法：
legend: {selectedMode:false,}//取消图例上的点击事件
myChart.off('legendselectchanged')
myChart.on('legendselectchanged', function (params) {
myChart.setOption({
legend:{selected:{[params.name]: true}}
})
console.log('点击了', params.name);
});
完整代码
<template>
<div id="echarts">
<div >
<div>
<div id="myChart" :style="{ width: '600px', height: '300px' }"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getarrival } from '@/api/product' //调用后台接口
export default {
name: 'Echarts',
data() {
return {
newData: [],
obj:{
id:1
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine() {
getarrival(this.obj).then((res) => {
this.newData= res.data.data.arrivel_later_result.bar //接口返回数据赋值this.newData
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: this.newData.title.text,
subtext: this.newData.title.subtext,
left: this.newData.title.left
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
legend: {
bottom: 10,
left: 'center',
selectedMode: false //取消图例上的点击事件
},
series: [
{
name: '迟到占比',
type: this.newData.series[0].type,
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: this.newData.series[0].data,
emphasis: this.newData.series[0].emphasis,
label: {
//饼图图形上的文本标签
normal: {
show: true,
position: 'inner', //标签的位置
textStyle: {
fontWeight: 300,
fontSize: 16 //文字的字体大小
},
formatter: '{d}%'
}
}
}
]
})
// 关键代码
myChart.off('legendselectchanged')
myChart.on('legendselectchanged', function (params) {
myChart.setOption({
legend:{selected:{[params.name]: true}}
})
console.log('点击了', params.name);
});
})
},
}
}
</script>
