有一個需求場景，使用echarts時想要自定義legend的點擊事件，但是不要legend的默認點擊事件——就是點擊會隱藏和顯示對應的餅圖
查閱文檔和手冊之後，發現沒有可以直接使用的方法
那麼換個思路，在默認事件觸發之後再把取消選中的legend選中回來就可以啦
依賴以下下幾個配置：
1. legendselectchanged
myChart.on('legendselectchanged', function (params) {
// ...
});
監聽legend點擊改變的事件，可以實現自定義事件，但是不能覆蓋默認的選中和取消選中的事件
2. selected
option = {
tooltip: {
selected: {
// ...
},
// ...
},
//...
}
可以設置初始選中項，這裏不會直接使用
3. setOption
myChart.setOption({
legend:{
selected:{
//...
}
})
動態改變配置，到這裏就很清晰了，將 legendselectchanged 中取消選中的legend動態設置回來
4. animation
option = {
animation: false,
//...
}
如果對動畫沒要求，關閉動畫，效果會更好
完整html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 實例</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
animation: false, // 取消動畫
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
myChart.setOption(option);
// 關鍵代碼
myChart.on('legendselectchanged', function (params) {
myChart.setOption({
legend:{selected:{[params.name]: true}}
})
console.log('點擊了', params.name);
// do something
});
</script>
</body>
</html>