在VUE中使用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