使用ApexCharts构建交互式可视化SVG图表 - vue3-apexcharts

使用ApexCharts构建交互式可视化SVG图表 - vue3-apexcharts
插件名称 vue3-apexcharts
发布时间 2021年1月14日
插件作者 apexcharts

一个使用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],
        },
      ],
    };
  },
};