echarts 渲染顺序控制 zlevel 案例

ECharts 是一个强大的数据可视化库，它支持通过 `zlevel` 属性来控制图形的渲染层级。`zlevel` 是一种二维空间的概念，每个图形都有一个 zlevel 值，值越大的图形会先于值小的图形绘制在画布上。当有多个图层需要混合显示时，这种方式非常有用。

案例来说，假设你有一个散点图、折线图和一个背景区域图，你可以这样做：

// 散点图
var scatter = echarts.init(document.getElementById('scatter'));
scatter.setOption({
  series: [
    {
      type: 'scatter',
      zlevel: 2 // 高于折线图
    }
  ]
});

// 折线图
var line = echarts.init(document.getElementById('line'));
line.setOption({
  series: [
    {
      type: 'line',
      zlevel: 1 // 略低于散点图
    }
  ]
});

// 背景区域图
var background = echarts.init(document.getElementById('background'));
background.setOption({
  series: [
    {
      type: 'area', // 区域图通常设置底层
      zlevel: 0
    }
  ]
});

在这个例子中，散点图因为更高的 zlevel 会覆盖在折线上方，而区域图则在最底层，形成明显的层次效果。当你需要调整图形之间的视觉优先级时，可以利用这个特性。