在VUE中使用ApexCharts

本文介绍了如何在Vue项目中使用ApexCharts,包括安装ApexCharts库,配置vue-apexcharts为全局组件,以及在.vue文件中创建并展示一个简单的条形图示例。
摘要由CSDN通过智能技术生成
安装Apexcharts
npm install --save apexcharts 
npm install --save vue-apexcharts

安装之后,会在package.json的dependencies中找到这2个包文件:
在这里插入图片描述

配置vue-apexcharts

main.js文件中,导入Vue和vue-apexcharts,创建一个名为apexchart的全局组件。

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'
 
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
在.vue文件中使用apexcharts

经过上面的步骤,即可在.vue文件中使用。下面以一个最简单的条形图示例:
1、新建如下alarm_calcul.vue文件:

<template>
  <div>
    <apexchart width="500" type="bar" 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值