最近在做一個功能:用echarts做一張折線圖,圖中有多條線。在初始狀態,所有折線都顯示,然後點擊其中一個圖例,其他折線會隱藏。
借用了https://www.cnblogs.com/shj-com/p/11327072.html 的思路。在他的基礎上重寫了。
效果是這樣的(option設置使用了echarts的官方案例):
剛初始化好:
點擊“郵件營銷”:
再點擊“聯盟廣告”:
$(document).ready(function(){
var chart = echarts.init(document.getElementById('chart'));
// for blog example - from https://www.echartsjs.com/examples/zh/editor.html?c=line-stack
options = {
title: {
text: '折線圖堆疊'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '郵件營銷',
type: 'line',
stack: '總量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯盟廣告',
type: 'line',
stack: '總量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '視頻廣告',
type: 'line',
stack: '總量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接訪問',
type: 'line',
stack: '總量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '總量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
chart.on('legendselectchanged', function(obj) {
var selected = obj.selected;
var name = obj.name; // current clicked one
// if all legends are selected, only enable clicked legend, others are toggled to false.
// other situation, do what is default.
if (selected != undefined) {
if (isOnlyClickedOneIsUnSelected(name, selected)) {
// all legend are selected except current clicked one
onlyEnableCurrentSelectedLegend(name, selected, chart);
}
}
chart.setOption(options, true);
});
function isOnlyClickedOneIsUnSelected(name, selected){
var unSelectedCount = 0;
for ( item in selected) {
if (!selected.hasOwnProperty(item)) {
continue;
}
if (selected[item] == false) {
++unSelectedCount;
}
}
return unSelectedCount==1 && selected[name] == false;
}
function onlyEnableCurrentSelectedLegend(name, selected, echartInstance){
var legend = [];
for ( item in selected) {
if (!selected.hasOwnProperty(item)) {
continue;
}
legend.push({'name': item});
echartInstance.dispatchAction({
type: 'legendToggleSelect',
batch: legend
});
}