1. highchars的导入与搭建
npm install highcharts
2. components下的commons公共目录下新建一个chart.vue文件,用于搭建chart组件的架子
<template>
<div class="x-bar">
<div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
// 验证类型
props: {
id: {
type: String
},
option: {
type: Object
}
},
mounted() {
// 静态数据,随页面打开自动创建
// HighCharts.chart(this.id,this.option)
}
methods: {
// 动态数据,当数据加载完毕再执行创建
me(){
HighCharts.chart(this.id,this.option)
}
}
}
</script>
3. chart架子搭好后,开始创建chart-options目录,里面创建一个options.js用来存放模拟的chart数据
let $back = $("#myBack");
let Options = function() {
this.pie= {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
},
showInLegend: true,
events: {
click: function(e) {
// alert($back.val())
// alert(e.point.url);
// window.open(e.point.url);
// location.href = e.point.url;
}
}
},
},
series: [{
name: '',
colorByPoint: true,
// 动态接收数据
data: []
}]
}
};
Options.prototype.funcc = function (op) {
if(op.pie != null){
// 复制对象
this.pie = Object.assign(this.pie, op.pie)
}
}
export default new Options();
4. 引用chart组件
<template>
<div class="pie">
<div id="pie1">
<x-chart ref="XChart1" :id="id1" :option="option1"></x-chart>
</div>
<div id="pie2">
<x-chart ref="XChart2" :id="id2" :option="option2"></x-chart>
</div>
</div>
</template>
<script>
// 导入chart组件
import XChart from 'components/chart.vue'
// 导入定义好的chart模型
import options from './chart-options/options'
export default {
data() {
let option = options.bar
return {
id1: 'pie1',
option1: null,
id2: 'pie2',
option2: null,
}
},
components: {XChart},
methods: {
// 饼图1
chartPie1(){
return new Promise((resolve, reject) => {
options.funcc({
pie: {
title: {
text: '饼图1name'
},
series: [{
name: '情况占比',
// p1,p2,p3,p4,p5为百分占比
data: [
['A', p1],
['B', p2],
['C', p3],
{
name: 'D',
y: p4,
url:'',
sliced: true, // 突出显示这个点(扇区),用于强调。
selected: true
},
['E', p5],
]
}]
}});
let option1 = options.pie;
this.option1 = option1;
resolve();
}).then(resp => {
// 执行创建饼图
this.$refs.XChart1.me();
})
},
}
}
</script>