在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>

运行结果显示如下：

3、显示多条，准备数据：

<template>
  <div id="chart">
    <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
  export default {
    name: "spline",
    computed: {},
    methods: {},
    data() {
      return {
        chartOptions: {
          chart: {
            type: 'bar',
            height: 350
          },
          plotOptions: {
            bar: {
              horizontal: false,
              columnWidth: '55%',
              endingShape: 'rounded'
            },
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
          },
          xaxis: {
            categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
          },
          yaxis: {
            title: {
              text: '$ (thousands)'
            }
          },
          fill: {
            opacity: 1
          },
          tooltip: {
            y: {
              formatter: function (val) {
                return "$ " + val + " thousands"
              }
            }
          }
        },
        series: [{
          name: 'Net Profit',
          data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
        }, {
          name: 'Revenue',
          data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
        }, {
          name: 'Free Cash Flow',
          data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
        }],
      };
    },
  };
</script>

<style scoped>
</style>

4、直接调用，图像显示