Nuxt结合Vue ApexCharts混合图表如何调整图层堆叠顺序

解决方法 #

你需要为每个系列手动配置zIndex属性控制图层堆叠顺序，zIndex数值越小的系列越靠底层，该配置优先级高于ApexChart默认的类型排序规则，也不受series数组顺序影响。

你可以按照下方规则分配zIndex实现柱状图居底的效果：

• 柱状图：zIndex: 1（最底层）
• 面积图：zIndex: 2（中间层）
• 折线图：zIndex: 3（最顶层）

修改后的series配置示例如下：

series: [{
  name: 'TEAM A',
  type: 'line',
  data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
  zIndex: 3
}, {
  name: 'TEAM B',
  type: 'area',
  data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
  zIndex: 2
}, {
  name: 'TEAM C',
  type: 'bar',
  data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
  zIndex: 1
}]

修改完成后图表堆叠顺序就会变为你需要的柱状图 → 面积图 → 折线图（从底到顶）。

内容的提问来源于stack exchange，提问作者RenaudC5