一个使用ApexCharts库的Vue.js 3组件库，可在您的应用程序中创建交互式SVG图表。

下载及安装

npm install --save apexcharts
npm install --save vue3-apexcharts

如何使用它：

1.导入并注册Vue ApexCharts组件。

import VueApexCharts from "vue3-apexcharts";

const app = createApp(App);
app.use(VueApexCharts);
// or
export default {
  components: {
    apexchart: VueApexCharts
  },
};

2.将ApexCharts组件添加到模板，确定图表类型，然后定义要在图表中绘制的数据。

<apexchart
  width="500"
  height="400"
  type="bar"
  :options="chartOptions"
  :series="series"
></apexchart>

export default {
  data: function() {
    return {
      chartOptions: { // ApexCharts options
        chart: {
          id: "vuechart-example",
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
        },
      },
      series: [
        {
          name: "series-1",
          data: [30, 40, 35, 50, 49, 60, 70, 91],
        },
      ],
    };
  },
};

---

官网：https://github.com/apexcharts/vue3-apexcharts

演示：https://www.vue365.cn/code_demo.php?id=3887

GitHub下载：https://github.com/apexcharts/vue3-apexcharts/archive/main.zip