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]
}
]
};