A few days ago, the project encountered the development of charts, summarized the process, and shared it with everyone
The process of loading highcharts will not be described in detail. For details, please refer to
the Highcharts Vue tutorial linked below
Go directly to the code
vue chart layout 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 pie chart function implements 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 column chart function implementation 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>
The display effect is as follows
when attaching the dynamic calling code of vue when the front-end and back-end interact
饼图
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
})
}
The above is the assignment process of the front-end page, and the java back-end patchwork data involves querying the database, and will continue to be updated when there is time.
If there is something that is not written in place, welcome to correct me, I will accept it humbly