Vue2中如何将Axios请求的数据加载到Apexcharts折线图中

存在的问题 #

1. 数据格式不符合Apexcharts要求：直接将接口返回的包含date、follower等字段的对象数组传给series.data，Apexcharts无法识别该结构。datetime类型x轴的折线图，要么把单条series的data转为[日期, 数值]的二维数组格式，要么单独提取日期数组作为x轴categories，每条series存对应数值数组。
2. 未按需求生成多组series：需要展示follower、following、media三个指标的折线，要对应生成3个series项，而非只有1个默认项。
3. 图表更新逻辑错误：已经给apexchart组件绑定了响应式属性:series="series"，直接修改this.series就会触发图表自动更新，不需要手动调用updateOptions，原调用逻辑还错误地把series数组又嵌套了一层，导致数据结构完全错乱。

修正方案 #

1. 调整chartOptions配置（data部分修改）

data: function() {
  return {
    series: [],
    chartOptions: {
      chart: {
        height: 350,
        type: 'area',
      },
      dataLabels: {
        enabled: true
      },
      title: {
        text: 'Example-1',
      },
      xaxis: {
        type: "category",
        categories: []
      },
   }
}

2. 重写getData数据处理逻辑

methods: {
  getData() {
    this.$axios.get('/api/')
        .then(res => {
          const rawData = res.data.follower
          // 提取日期作为x轴分类
          this.chartOptions.xaxis.categories = rawData.map(item => item.date)
          // 生成三个指标对应的折线数据
          this.series = [
            {
              name: '粉丝数',
              data: rawData.map(item => item.follower)
            },
            {
              name: '关注数',
              data: rawData.map(item => item.following)
            },
            {
              name: '内容数',
              data: rawData.map(item => item.media)
            }
          ]
        })
        .catch(err => {
          console.log(err);
        })
  }
}

可选方案（保留x轴datetime类型） #

如果需要保留x轴的datetime类型特性，不需要配置xaxis.categories，直接把series数据转为[日期, 数值]二维数组即可：

this.series = [
  {
    name: '粉丝数',
    data: rawData.map(item => [item.date, item.follower])
  },
  {
    name: '关注数',
    data: rawData.map(item => [item.date, item.following])
  },
  {
    name: '内容数',
    data: rawData.map(item => [item.date, item.media])
  }
]

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