以echarts的柱狀圖作為示例,圖例可以設置點擊讨衣,控制對應的柱子顯示隱藏换棚,那么問題來了,如果所有的柱子都可以點擊隱藏反镇,那么就會剩下一個光禿禿的x軸固蚤,頁面展示則會特別丑!如下
如果想要更美觀歹茶,這種情況下可以設置至少保留一個圖例夕玩。即只剩下一個圖例時你弦,點擊不隱藏該柱子。
上代碼
ecElement = echarts.init(document.getElementById(' ecElement '));
var option = {...};//echarts圖的一些配置項
ecElement.clear();
ecElement.setOption(option);
//下面是重點
ecElement.on('legendselectchanged', function (params) {?
? ? var optionLegend = ecElement.getOption();?
? ? var select_value = Object.values(params.selected);?
? ? var n = 0;?
? ? select_value.map(function (res) {
? ? ? ? ?if (!res) {?
? ? ? ? ? ? ?n++;?
? ? ? ? ? }?
? ? });
? ? ?if (n == select_value.length) {
? ? ? ? ?optionLegend.legend[0].selected[params.name] = true;
? ? }
? ? ?ecElement.setOption(optionLegend)燎孟;
});? ? ??
這樣子就可以達成目的了禽作,無論你如何點擊都至少會保留一個圖例和對應的柱子的
希望可以幫助到遇到同樣問題的你揩页!