如何使用 vue-apexcharts 将数据更新为饼图答案

【问题标题】：How to update data to pie chart using vue-apexcharts如何使用 vue-apexcharts 将数据更新为饼图
【发布时间】：2021-07-03 23:50:33
【问题描述】：

我想用 vue-apexcharts 创建饼图。我有来自 API 的数据，但我不知道如何更新图表的数据。

 mounted() {
    axios
      .get("/data/episodes.json")
      .then(response => {
         console.log(response);
     });
  }

我要创建的图表是这样的

【问题讨论】：

您需要了解库（您从中获取饼图）如何接受数据。我有使用echart 和chart.js 的经验。告诉我您正在使用的库，我们将一起解决。
你好，我正在使用 vue-apexcharts。
我没有使用 vue-apexcharts 的经验，但我阅读了他们的文档并写下了我的理解。这是他们的文档链接apexcharts.com/vue-chart-demos/pie-charts/simple-pie-chart

标签： api vue.js vuejs2 vue-component pie-chart

【解决方案1】：

这是我的理解，...

首先你必须定义图表的数据和选项值。

components: {
    apexchart: VueApexCharts,
  },
  data: {
    series: [],
    chartOptions: {
      chart: {
        width: 380,
        type: "pie",
      },
      labels: [],
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200,
            },
            legend: {
              position: "bottom",
            },
          },
        },
      ],
    },
  },

现在在挂载时，您可以调用您的 api 来获取数据并更新图表信息。像这样 ... 我在想你的服务器会返回一个具有值和键的对象数组。

 mounted() {
    axios.get("/data/episodes.json").then((response) => {
      for (let i = 0; i < response.data.length; i++) {
        this.data.series.push(response.data[i].value);
        this.data.chartOptions.labels.push(response.data[i].key);
      }
    });
  },

最后，你必须将图表组件添加到 vue 模板中。像这样。

<div id="chart">
    <apexchart type="pie" width="380" :options="chartOptions" :series="series"></apexchart>
</div>

完成，

如果你不清楚，问我。

【讨论】：