以echarts的柱狀圖作為示例，圖例可以設(shè)置點(diǎn)擊，控制對(duì)應(yīng)的柱子顯示隱藏，那么問(wèn)題來(lái)了，如果所有的柱子都可以點(diǎn)擊隱藏，那么就會(huì)剩下一個(gè)光禿禿的x軸，頁(yè)面展示則會(huì)特別丑！如下

光禿禿的echarts圖

如果想要更美觀，這種情況下可以設(shè)置至少保留一個(gè)圖例。即只剩下一個(gè)圖例時(shí)，點(diǎn)擊不隱藏該柱子。

上代碼

ecElement = echarts.init(document.getElementById(' ecElement '));

var option = {...};//echarts圖的一些配置項(xiàng)

ecElement.clear();

ecElement.setOption(option);

//下面是重點(diǎn)

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)；

});? ? ??

這樣子就可以達(dá)成目的了，無(wú)論你如何點(diǎn)擊都至少會(huì)保留一個(gè)圖例和對(duì)應(yīng)的柱子的

完成！

希望可以幫助到遇到同樣問(wèn)題的你！