下圖是ECharts折線圖堆疊的官方源碼,設置折線圖不堆疊只需要將每一個stack的值設置為不一樣的名稱或者將stack屬性刪除即可。
option = { 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] } ] };
(題外話:我還專門查了下什么叫做折線圖堆疊~
折線圖堆疊的意思就是:第二條線的數值=本身的數值+第一條線的數值,第三條的數值=第二條線圖上的數值+本身的數值,以此類推......
拿官網的數據舉例(以周一的數據為例):堆疊圖實際顯示的是:郵件營銷=120,聯盟廣告=120+220=340,視頻廣告=340+150=490,直接訪問=490+320=810,搜索引擎=810+820=1630)