插件名称 | 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],
},
],
};
},
};