取消點擊事件兩種方法：
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' //調(diào)用后臺接口
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 //接口返回數(shù)據(jù)賦值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}
: {c} (u0z1t8os%)'
},
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: 'u0z1t8os%'
}
}
}
]
})
// 關(guān)鍵代碼
myChart.off('legendselectchanged')
myChart.on('legendselectchanged', function (params) {
myChart.setOption({
legend:{selected:{[params.name]: true}}
})
console.log('點擊了', params.name);
});
})
},
}
}
</script>
