遇到一個需求,就是如何保證echarts圖表里至少顯示一個圖例的數(shù)據(jù)(也就是最后一個圖例不能變成unselected的狀態(tài))
下圖是最初加載時的畫面
不想出現(xiàn)圖例都被點擊取消導致圖表只有一個坐標軸,太丑了
在發(fā)帖前查閱了一些思路:
都不是能夠很好的解決,找到一個可以參考的代碼
var option = {
title: {
text: '折線圖堆疊'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['郵件營銷','聯(lián)盟廣告','視頻廣告','直接訪問','搜索引擎']
},
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:'聯(lián)盟廣告',
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]
}
]
};
myChart.setOption(option);
myChart.on('legendselectchanged', function (params) {
let option = this.getOption();
let select_key = Object.keys(params.selected);
if (!params.selected[params.name]) {
select_key.map(res => {
option.legend[0].selected[res] = !params.selected[res];
});
} else {
select_key.map(res => {
option.legend[0].selected[res] = false;
});
option.legend[0].selected[params.name] = true;
}
this.setOption(option)
});
輸入到http://echarts.baidu.com/exam... 的代碼框里可以看到效果,基本上算是手動多選切換成了單選,但是成單選后就無法多選,所以我想問有沒有什么方法可以實現(xiàn)需求,或者獲取最后一個圖例的對象后,只禁用該對象的點擊事件
自己解決了,下附解決思路及部分代碼。
思路:當選擇最后一個圖例的時候,將其selected的值改為true就可以了,之前附的參考代碼改一改就實現(xiàn)了
代碼如下:
myChart.on('legendselectchanged', function (params) {
let option = this.getOption();
let select_key = Object.keys(params.selected);
let select_value = Object.values(params.selected);
console.log('select_value',select_value,'length',select_value.length)
var n = 0;
select_value.map(res => {
if(!res){
n++;
}
});
console.log('n',n)
if( n ==select_value.length){
option.legend[0].selected[params.name] = true;
}
this.setOption(option)
});
完美解決,回頭再整理博客
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
達內教育集團成立于2002年,是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構,是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
北大課工場是北京大學校辦產業(yè)為響應國家深化產教融合/校企合作的政策,積極推進“中國制造2025”,實現(xiàn)中華民族偉大復興的升級產業(yè)鏈。利用北京大學優(yōu)質教育資源及背
博為峰,中國職業(yè)人才培訓領域的先行者
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔任項目經理從事移動互聯(lián)網管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責任公司從事總經理職務負責iOS教學及管理工作。
浪潮集團項目經理。精通Java與.NET 技術, 熟練的跨平臺面向對象開發(fā)經驗,技術功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網頁制作和網頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經驗。曾經歷任德國Software AG 技術顧問,美國Dachieve 系統(tǒng)架構師,美國AngelEngineers Inc. 系統(tǒng)架構師。