在VUE中使用ApexCharts

2021-10-09 18:58:56 阅读：844 来源： 互联网

标签：vue alarm Vue VUE apexcharts 使用 import data ApexCharts

安装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" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
export default {
  name: "alarmCalcul",
  computed: {},
  methods: {},
  data() {
    return {
      chartOptions: {
        xaxis: {
          categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        },
      },
      series: [
        {
          name: "series-1",
          data: [10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 60, 80],
        },
      ],
    };
  },
};
</script>

<style scoped>
</style>

2、将导入到helloword.vue中进行显示运行结果显示如下：

<template>
 <div>
	 <AlarmCalcul />
 </div>
</template>


<script>
import AlarmCalcul from "@/components/my_comp/alarm/alarm_calcul"; //导入写好的vue

export default {
  name: "alarm",
  components: { AlarmCalcul},  //声明一下
  data() {
    return {};
  },
  computed: {},
  methods: {},
  data() {
    return {};
  },
};
</script>

<style scoped>
</style>

运行结果显示如下：

标签：vue,alarm,Vue,VUE,apexcharts,使用,import,data,ApexCharts
来源： https://blog.csdn.net/qq_53113396/article/details/120677068

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在VUE中使用ApexCharts