安装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、直接调用,图像显示