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

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

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

序号插件名称序号插件名称
1Vue Wrapper For Charts.CSS 图表框架 - vue.charts.css12Vue.js创建漂亮的图表– Vue Chartkick
2Vue 3的基于SVG的图表库 - vue3-charts13交互式图表和抓图组件– vue-declarative-plots
3使用ApexCharts构建交互式可视化SVG图表 - vue3-apexcharts14Vue.js的拖放调度图表程序– scheduler-lite
4Vue 3渲染Highcharts.js图表组件​ - vue3-highcharts15Vue.js的简单反应式图表–vue-chartless
5适用于Vue.js的简单SVG图表库 - vue-simple-chart16Vue的可定制和可组合图表– vue-wcharts
6适用于Google图表的Reactive Vue.js包装器-GChart17简单的纯Vue.js图表​​组件 -pure-vue-chart
7Vue.js的现代图表库– Laue18Chart.Js创建简单和漂亮的图表 - vue-chartjs
8Vue.js 图表 Chart.js组件19使用Vue.js和Chart.js构建HTML5画布图表 - vue-chart
9Vue.js的带有SVG和Smith图表组件20Vue FusionCharts轻量级组件 - vue-fusioncharts
10Vue.js的图表库组件 - V-Charts21Vue.js中的动画条形图种族生成器
11Vue.js基于D3.js可自定义的图表​​插件22Vue和D3.js的朝阳组件 - vue-d3-sunburst

下载及安装

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],
        },
      ],
    };
  },
};