highcharts实现饼形图和柱状图
1、后端
具体代码就不展示了,就一个查询所有的方法,注意实体类字段名最好取name、y,前端获取数据能直接对应上
2、前端
一,highchars的导入与搭建
npm install highcharts
二,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>
三,chart架子搭好后,开始创建chart-options目录,里面创建options.js用来存放模拟的chart数据
1、饼形图
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()
2、柱状图
let Options = function () {
this.chart = {
chart: {
type: 'column'
},
title: {
text: '全球各大城市人口排行'
},
subtitle: {
text: 'Wikipedia'
},
xAxis: {
type: 'category',
labels: {
rotation: -45
}
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
},
series: [{
name: '',
data: [],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // :.1f 为保留 1 位小数
y: 10
}
}]
}
}
Options.prototype.funcc = function (op) {
if (op.chart != null) {
// 复制对象
this.chart = Object.assign(this.chart, op.chart)
console.log(this.chart)
}
}
export default new Options()
四,引用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 './chart.vue'
// 导入定义好的chart模型
import options from './chart-options/options'
import options1 from './chart-options/options1'
const axios = require('axios')
export default {
data () {
let option = options.bar
return {
id1: 'pie1',
option1: null,
id2: 'pie2',
option2: null,
}
},
components: {XChart},
created(){
//this.findAll()
this.chartPie1()
this.chartPie2()
},
methods: {
// 饼图1
chartPie1 () {
return new Promise((resolve, reject) => {
options.funcc({
pie: {
title: {
text: '饼图1name'
},
series: [{
name: '情况占比',
// p1,p2,p3,p4,p5为百分占比
data: []
}]
}
})
axios.get("highchartsapi/highcharts").then(({data}) => {
options.pie.series[0].data = data;
console.log("ww"+options.pie.series[0].data)
})
.catch(error => {
console.log(error);
});
this.option1 = options.pie
// console.log(this.option1)
resolve()
}).then(resp => {
// 执行创建饼图
setTimeout(() => {
console.info('饼图模板');
this.$refs.XChart1.me();
}, 500);
})
},
// 柱状图
chartPie2(){
return new Promise((resolve, reject) => {
options1.funcc({
chart: {
title: {
text: '人口 (百万)'
},
series: [{
name: '总人口',
data: [
]
}]
}
})
axios.get("highchartsapi/highcharts").then(({data}) => {
options1.chart.series[0].data = data;
console.log("ww"+options1.chart.series[0].data )
})
.catch(error => {
console.log(error);
});
this.option2 = options1.chart
console.log(this.option2)
resolve()
}).then(resp => {
// 执行创建饼图
setTimeout(() => {
console.info('柱状图模板');
this.$refs.XChart2.me()
}, 500);
}).catch(resp =>{
// console.log("2222"+resp)
})
}
}
}
</script>