Typescript环境下Highcharts调用addSeries添加数组系列报错如何解决

• TypeScript 自动推导你声明的series数组时，把type字段识别为了通用string类型，没有匹配到Highcharts内置的系列类型枚举，类型校验时错误匹配到了不相关的SeriesXrangeOptions类型规则，才抛出data属性不兼容的报错
• 单独传入字面量配置时不会报错，是因为TS会直接根据addSeries方法的入参类型做上下文推导，自动识别为合法的bar系列配置，不会出现类型匹配错误

1. 首先导入Highcharts提供的系列配置类型

import type { SeriesOptionsType } from 'highcharts'

2. 给你的series数组添加明确的类型注解

// 明确指定数组元素类型为Highcharts合法系列配置
const series: SeriesOptionsType[] = [
  {
    name: 'Name 1',
    type: 'bar',
    color: '#4E868E',
    data: [5,6],
    stack: 'hello'
  },
  {
    name: 'Nam2',
    type: 'bar',
    color: '#4E868E',
    data: [1,2],
    stack: 'hello'
  }
]

3. 修复代码中其他语法&逻辑问题

• 原代码xAxis.categories中'Cat2缺少闭合单引号，修改为['Cat1', 'Cat2']
• 你的series数组仅有2个元素，原循环i<4、取series[5]的操作会导致数组越界，修改循环上限为series.length
• 批量添加系列时可以先关闭自动重绘，全部添加完成后统一调用redraw，性能更优
• plotOptions.bar.stacking为堆叠模式配置，可选值为normal/percent，不需要和stack字段值一致

<script lang="ts">
import { defineComponent } from 'vue'
import Highcharts from 'highcharts'
import type { SeriesOptionsType } from 'highcharts'
import Exporting from 'highcharts/modules/exporting'

Exporting(Highcharts)

const series: SeriesOptionsType[] = [
  {
    name: 'Name 1',
    type: 'bar',
    color: '#4E868E',
    data: [5,6],
    stack: 'hello'
  },
  {
    name: 'Nam2',
    type: 'bar',
    color: '#4E868E',
    data: [1,2],
    stack: 'hello'
  }
]

export default defineComponent({
  data () {
    return {
    }
  },
  mounted () {
    const chart = Highcharts.chart('newChart', {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Test chart'
      },
      xAxis: {
        categories: ['Cat1', 'Cat2']
      },
      yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
          text: 'Results'
        }
      },
      plotOptions: {
        bar: {
          stacking: 'normal',
          dataLabels: {
            enabled: true
          }
        }
      }
    })
    // 批量添加系列
    series.forEach(item => {
      chart.addSeries(item, false)
    })
    // 全部添加完成后统一重绘
    chart.redraw()
  }
})
</script>

内容的提问来源于stack exchange，提问作者Otorrinolaringologista -man