zlevel分層,數值大的覆蓋數值小的,預設為0
阿新 • • 發佈:2018-11-10
zlevel
用於 Canvas 分層,不同zlevel
值的圖形會放置在不同的 Canvas 中,Canvas 分層是一種常見的優化手段。
我們可以把一些圖形變化頻繁(例如有動畫)的元件設定成一個單獨的zlevel
。
需要注意的是過多的 Canvas 會引起記憶體開銷的增大,在手機端上需要謹慎使用以防崩潰。
zlevel
大的 Canvas 會放在 zlevel
小的 Canvas 的上面。
1、zlevel預設值是0,zlevel = -1,隱藏grid面板之下,會被座標軸線切割
2、不同zlevel值,顯示情況,如下圖:
option = { color: ['red', 'green', 'blue', 'yellow'], backgroundColor: 'lightgray', title: { text: '堆疊區域圖' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['系列1', '系列2', '系列3', '系列4'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '20%', right: '20%', bottom: '20%', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: true, data: ['週一', '週二', '週三', '週四'] }], yAxis: [{ type: 'value' }], series: [{ name: '系列1', type: 'line', areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, //開始位置,從上向下 color: 'rgba(220,20,60,1)' }, { offset: 1, color: 'rgba(220,20,60,.4)' } ] ) } }, zlevel: 1,//第二級 data: [40, 50, 60, 40] }, { name: '系列2', type: 'bar', zlevel: 2,//第一級,最高階 barWidth: 10, areaStyle: { normal: {} }, data: [32, 33, 31, 34] }, { name: '系列3', type: 'bar', zlevel: 0,//第三級,預設值 barWidth: 10, areaStyle: { normal: {} }, data: [32, 33, 31, 34] }, { name: '系列4', type: 'bar', barWidth: 10, zlevel: -1, //第四級,最小,隱藏在grid面板之下,被座標軸切割 data: [20, 32, 31, 34] } ] };