Vue中如何循环data()内数组，按series数量生成ApexChart配置？

• 第一步：使用优化后的统一Series数组作为data初始定义：

data() {
  return {
    Y_Data_length: null,
    Options: {
      xaxis: {
        categories: [],
      },
    },
    Series: [],
  };
},

• 第二步：在你获取到chart源数据的逻辑位置，计算Y_Data_length并动态生成对应长度的Series数组：

// 该逻辑可写在mounted钩子、接口请求回调等能拿到chart数据的位置
const A = this.chart[0].data
this.Y_Data_length = Object.keys(A).length
// 直接生成对应长度的Series数组，自动触发Vue响应式更新
this.Series = Array.from({ length: this.Y_Data_length }, () => ({
  name: '',
  data: []
}))

• 第三步：绑定ApexChart组件的series属性到你定义的Series数组即可：

<apexchart 
  type="line"
  height="350"
  :options="Options"
  :series="Series"
/>

注意：Vue2/3环境下直接替换整个数组的写法都可以正常触发响应式，后续如果要修改单条series的属性，直接通过下标访问对象修改即可，例如this.Series[0].name = '月度销量'、this.Series[0].data = [12,35,28,41]都可以正常触发视图更新。

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