vue.js 3 / 根据 REST API 调用更改 VueApexCharts 图例

Question

有一个 REST API，其中 returns 一组名称和金额（示例见下文）。我创建了一个 vue3.js 组件，它查询 API 并使用 VueApexCharts 圆环图可视化数据。这行得通。但是，我需要更改什么才能将 API 调用返回的名称添加到图表图例中？我无权访问定义在 data() 部分的 chartOptions。

[
    {
        "Name": "Somename",
        "Amount": 100,
    },
       {
        "Name": "Othername",
        "Amount": 100,
    }
]

代码vue3.js组件

< script lang = "ts" >

  import {
    defineComponent
  } from 'vue'
import {
  onMounted,
  ref
} from 'vue'
import axios from 'axios'
import VueApexCharts from "vue3-apexcharts";


export default defineComponent({

    components: {
      apexchart: VueApexCharts,
    },

    data() {
      return {
        // series: [10, 20, 30],
        chartOptions: {
          chart: {
            width: 380,
            type: 'donut',
          },
          plotOptions: {
            pie: {
              startAngle: -90,
              endAngle: 270
            }
          },
          dataLabels: {
            enabled: false
          },
          fill: {
            type: 'gradient',
          },
          legend: {
            formatter: function(val, opts) {
              return val + " - " + opts.w.globals.series[opts.seriesIndex]
            }
          },
          title: {
            text: 'Gradient Donut with custom Start-angle'
          },
          responsive: [{
            breakpoint: 480,
            options: {
              chart: {
                width: 200
              },
              legend: {
                position: 'bottom'
              }
            }
          }]
        }
      }
    },

    name: 'HelloWorld',
    props: {
      msg: String,
    },

    setup() {
      const series = ref([0]);

      onMounted(async() => {
        const res = await axios.get("http://127.0.0.1:5000/backend");

        res['data'].forEach(function(value) {
          series.value.push(value['ValueInEUR'])
        });
      });

      return {
        series
      };
    },

  }) <
  /script>

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

Answer 1

我认为你只需要将 chartOptions 移动到 setup 并将 label 分配给 chartOptions。

这是代码框：

https://codesandbox.io/s/sleepy-flower-772qz?file=/src/components/HelloWorld.vue

setup() {
    const chartOptions = ref({
      chart: { ... },
      plotOptions: { ... },
      dataLabels: { ... },
      fill: { ... },
      legend: { ... },
      title: { ... },
      labels: [],  // add a empty labels to be ready for assignment
      responsive: [ ... ],
    });

    onMounted(async () => {
      const res = await axios.get("http://127.0.0.1:5000/backend");

      res["data"].forEach(function(value) {
        series.value.push(value["ValueInEUR"]);

        // construct and assign label here
        chartOptions.value.labels.push(value["Name"] as never);
      });
    });

    return {
      series,
      chartOptions, // return chartOptions
    };
}

vue.js 3 / 根据 REST API 调用更改 VueApexCharts 图例

vue.js 3 / Change VueApexCharts Legend based on REST API call

vue.js

apexcharts

vuejs3