前些天项目遇到了图表的开发，总结了一下流程，分享给大家
加载highcharts的流程不过多赘述，详情请看下方链接
Highcharts Vue教程
直接上代码
vue 图表布局 Test.vue
<template>
<div>
<s-table rowKey="id" ref="table" >
<a-row :gutter="48">
<a-col :md="11" :sm="24">
<div >
<TestBingTu/>
</div>
</a-col>
<a-col :md="11" :sm="24">
<div >
<TestZhuXingTu />
</div>
</a-col>
</a-row>
</s-table>
</div>
</template>
<script>
import TestBingTu from "./TestBingTu";
import TestZhuXingTu from "./TestZhuXingTu";
export default {
name: "Test",
components: {
TestBingTu,
TestZhuXingTu
},
data () {
return {
createValue: [],
visible: false,
visible1: false,
labelCol: {
xs: {
span: 24 },
sm: {
span: 5 }
},
wrapperCol: {
xs: {
span: 24 },
sm: {
span: 16 }
},
form: null,
mdl: {
},
sendId: "",
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {
},
selectedRowKeys: [],
selectedRows: []
}
}
};
</script>
vue 饼图功能实现 TestBingTu.vue
<template>
<div>
<highcharts :options="chartOptions" :callback="myCallback"></highcharts>
</div>
</template>
<script>
import {
Chart } from "highcharts-vue";
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
exportingInit(Highcharts)
import {
getChartHazardType } from "@/api/hidden"
export default {
name: "ChartHazardType ",
components: {
highcharts: Chart
},
data() {
return {
ser:[{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}],
chartOptions: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '种类分布'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: '百分比',
colorByPoint: true,
data: [] //数据设为空即可，方法中动态赋值
}],
credits: {
enabled:false
}
}
};
},
methods: {
myCallback() {
this.chartOptions.series[0].data= this.ser //此处可以为后台拼凑好的数据
}
}
};
</script>
vue 柱形图功能实现 TestZhuXingTu.vue
<template>
<div>
<highcharts :options="chartOptions" :callback="myCallback"></highcharts>
</div>
</template>
<script>
import {
Chart } from "highcharts-vue";
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
import {
getChartHazardTypeUnit } from "@/api/hidden"
exportingInit(Highcharts)
export default {
name: "ChartHazardTypeUnit",
components: {
highcharts: Chart
},
data() {
return {
ser :[{
name: '管道', data: [5, 3, 4] }, {
name: '管道1', data: [2, 2, 3] }, {
name: '环境' ,data: [3, 4, 4] }],
cate:['1', '2', '3'],
chartOptions: {
credits: {
enabled:false
},
chart: {
type: 'column'
},
title: {
text: '种类分布'
},
xAxis: {
categories: []//数据动态赋值
},
yAxis: {
min: 0,
title: {
text: '百分比'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +
'({point.percentage:.0f}%)<br/>',
//:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formatting
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: []//数据动态赋值
}
};
},
methods: {
myCallback() {
this.chartOptions.xAxis.categories= this.cate
this.chartOptions.series = this.ser
}
}
};
</script>
展示效果如下
附加前后端交互时vue的动态调用代码
饼图
myCallback() {
return getTestBingTu({
id:"1",pageNo: 1, pageSize: 99999 }).then(data => {
this.chartOptions.series[0].data= data.result //此处为后台拼凑好的数据
})
}
柱形图
myCallback() {
return getTestZhuXingTu({
id:"1",pageNo: 1, pageSize: 99999 }).then(data => {
this.chartOptions.xAxis.categories= data.result.categories
this.chartOptions.series = data.result.series
})
}
以上是前端页面的赋值过程，java后台拼凑数据涉及到数据库的查询，有时间会持续更新。
如有写的不到位的地方欢迎各位大佬指正，我会虚心采纳