在 vue apexcharts 中加载 axios 数据答案

【问题标题】：Load axios data in vue apexcharts在 vue apexcharts 中加载 axios 数据
【发布时间】：2021-12-23 15:33:40
【问题描述】：

作为标题，我正在尝试使用 vue2 在 Vue apexcharts（折线图）中加载 Axios 数据。我已经阅读了 apexcharts 的文档，但仍然无法弄清楚如何将数据传递到图表中。我想将日期作为 x 轴，将其他日期作为折线图中的值。

还有，我在vue devtools里查过了，好像数据传成功了？

我的数据格式是这样的：

follower = [
  {
    date: '2021-11-10',
    follower: 2000,
    following: 500,
    media: 150
  }
  {
    date: '2021-11-11',
    follower: 2000,
    following: 500,
    media: 150
  }
]

我的图表初始化：

 <template>
   <apexchart
     ref="sample"
     width="500"
     type="area"
     :options="chartOptions"
     :series="series"
  >
  </apexchart>
 </template>

export default {
  name: "FollowerLineApex",
  components: {
    apexcharts: VueApexCharts,
  },
  data: function() {
    return {
      series: [{
        name: 'test',
        data: []
      }],
      chartOptions: {
        chart: {
          height: 350,
          type: 'area',
        },
        dataLabels: {
          enabled: true
        },
        title: {
          text: 'Example-1',
        },
        xaxis: {
          type: "datetime"
        },
     }
  }

下面是我在 Axios 部分的代码：

created: function () {
  this.getData()
},

methods: {
  getData() {
    this.$axios.get('/api/')
        .then(res => {
          this.series = [{
            data: res.data["follower"]
          }]
          console.log(this.series)
          this.$refs.sample.updateOptions({
            series: [{
              data: this.series
            }]
          })
        })
        .catch(err => {
          console.log(err);
        })
  }
},

【问题讨论】：

这是 vue 2 还是 vue 3？
我正在使用 vue2。我会在文章中补充，谢谢提醒！
在 3 个数据点（follower、following 和 media）中，您希望它们如何绘制图表？它们是分开的系列吗？
我想让每个日期一起显示这 3 个数据点。喜欢链接中的折线图：apexcharts.com/javascript-chart-demos/line-charts/data-labels
再过一遍文档就好了。是的，我认为这 3 个数据点应该是单独的系列。

标签： javascript vue.js axios apexcharts

【解决方案1】：

您的数据格式不正确。您需要格式化从您的 api 获得的数据，然后再将其传递给图表的系列。您的datetime xaxis 图表应格式化为 x,y 坐标数组。这里描述https://apexcharts.com/docs/series/

示例：

  [
    {
      x: 10,
      y: 20,
    },
    {
      x: 100,
      y: 50,
    },
  ]

工作沙盒示例

https://codesandbox.io/s/vue-basic-example-forked-r26j6?file=/src/components/Chart.component.vue

<template>
  <div class="app">
    <apexcharts
      width="500"
      height="350"
      type="area"
      :options="chartOptions"
      :series="series"
    ></apexcharts>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
  name: "Chart",
  components: {
    apexcharts: VueApexCharts,
  },
  data: function () {
    return {
      follower: [
        {
          date: "2021-11-10",
          follower: 2000,
          following: 500,
          media: 150,
        },
        {
          date: "2021-11-11",
          follower: 2000,
          following: 500,
          media: 30,
        },
      ],
      series: [
        {
          name: "test",
          data: [],
        },
      ],
      chartOptions: {
        chart: {
          height: 350,
          type: "area",
        },
        dataLabels: {
          enabled: true,
        },
        title: {
          text: "Example-1",
        },
        xaxis: {
          type: "datetime",
        },
      },
    };
  },
  created: function () {
    this.getData();
  },
  methods: {
    getData() {
      
      // TODO Axios to get data here.

      // Format data correctly
      let formattedData = this.follower.map((e, i) => {
        return {
          x: e.date,
          y: e.media,
        };
      });

      // update the series with axios data
      this.series = [
        {
          name: "test",
          data: formattedData,
        },
      ];      
    },
  },
};
</script>

【讨论】：

【解决方案2】：

您已将 VueApexCharts 组件注册为 apexcharts（复数），因此您应该在模板中使用 <apexcharts>（复数）或将其注册为 apexchart...

components: {
  apexchart: VueApexCharts
}

按照the documentation，不需要手动调用updateOptions...

更新您的 Vue 图表数据很简单。您只需更新您传递给<apexchart> 组件的系列道具，它会自动触发事件来更新图表。

您需要做的是将数据格式化为图表可以使用的格式

data: () => ({
  followerData: [],
  chartOptions: { /* same as you already have */ }
}),
computed: {
  // compute series data from you API results
  series: ({ followerData }) => {
    const series = followerData.reduce((map, { date, ...points }) => {
      Object.entries(points).forEach(([ name, point ]) => {
        const s = (map.has(name) ? map : map.set(name, [])).get(name)
    
        s.push({
          x: date,
          y: point
        })
      })
      return map
    }, new Map())

    return Array.from(series.entries(), ([ name, data ]) => ({
      name,
      data
    }))
  }
},
methods: {
  async getData() {
    const { data } = await this.$axios.get("/api/")
    this.followerData = data
  }
},
created () {
  this.getData()
}

【讨论】：