最新版Highcharts中plotOptions.area.depth配置失效如何解决？

问题根因 #

最新版Highcharts已将普通area系列的3D相关配置全部移除，depth属性仅对专属3D系列类型生效，因此原来的plotOptions.area.depth配置会出现类型报错且不生效。

具体配置步骤 #

• 第一步：引入3D扩展模块
  如果你使用npm安装的Highcharts，需要额外导入3D模块：
  import Highcharts3D from 'highcharts/highcharts-3d'
  导入后执行Highcharts3D(Highcharts)完成初始化。
• 第二步：开启图表3D配置并指定系列类型为area3d
  示例配置如下：

  chart: {
    type: 'area3d',
    options3d: {
      enabled: true,
      alpha: 20,
      beta: 25,
      depth: 250
    }
  }
  

• 第三步：配置area3d系列的depth参数实现分层
  将原来写在plotOptions.area下的depth移到plotOptions.area3d下即可：

  plotOptions: {
    area3d: {
      depth: 60, // 可自定义数值调整堆叠间隔
      stacking: null // 关闭数值堆叠，仅保留前后3D分层效果
    }
  }
  

• TypeScript类型报错修复
  如果仍出现类型不匹配提示，可给对应配置项加上类型断言：as Highcharts.PlotArea3dOptions，或临时添加// @ts-ignore注释忽略校验。

验证效果 #

配置完成后多系列会按照定义顺序从后到前排列，和旧版示例的前后堆叠效果完全一致。

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