npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了
npm install highcharts --save
1、components目录下新建一个chart.vue组件
<template>
<div>
<div v-if="hasNoData()">
<p >{{ emptyText }}</p>
</div>
<div :id="id" v-else></div>
</div>
</template>
<script>
import highcharts from 'highcharts';
export default {
props: {
id: {
type: String
},
config: {
data: {
required: true,
type: Array
},
colors: {
type: Array
},
option: {
type: Object
}
},
emptyText: {
default: '暂无数据'
}
},
data() {
return {
option: {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
type: 'category',
tickWidth: 0
},
yAxis: {
visible: false
},
legend: {
enabled: false
},
...this.config.option,
plotOptions: {
column: {
colorByPoint: true,
colors: this.config.colors,
dataLabels: {
enabled: true
}
}
},
series: [{
data: this.config.data
}]
}
};
},
methods: {
hasNoData() {
if (this.config.data) {
return this.config.data.length > 0;
}
return true;
}
},
beforeDestroy() {
if (this.chart) {
this.chart.destroy();
}
},
created() {
},
mounted() {
if (!this.hasNoData()) {
this.chart = highcharts.chart(this.id, this.option);
}
}
};
</script>
2、chart组件建好后,开始创建chart-options目录,里面创建一个options.js用来存放模拟的chart数据
module.exports = {
bar: {
colors: ['#a7d7f6', '#7ec2ef', '#ffad57', '#f29260', '#f93d3b'],
data: [
['1号', 10],
['2号', 20],
['3号', 30],
['4号', 40],
['5号', 50]
],
option: {
tooltip: {
formatter: function () {
return `<span style="color:${this.color}">u25CF</span> `;
}
}
}
}
}
3、引用chart组件
<template>
<div id="app">
<x-chart :id="id" :config="option" empty-text="暂无数据"></x-chart>
</div>
</template>
<script>
// 导入chart组件
import XChart from 'components/chart.vue'
// 导入chart组件模拟数据
import options from './chart-options/options'
export default {
name: 'app',
data() {
let option = options.bar
return {
id: 'test',
option: option
}
},
components: {
XChart
}
}
</script>
<style>
#test {
width: 400px;
height: 400px;
margin: 40px auto;
}
</style>
如果是Nuxt使用Highcharts的话,记得在nuxt.config..js里的build里vendor里写入highcharts以减少应用 bundle 的体积
嗯,就酱~~
参考 https://blog.csdn.net/lily2016n/article/details/75570716