Il y a quelques jours, le projet a rencontré le développement de graphiques, a résumé le processus et l'a partagé avec tout le monde
Le processus de chargement des highcharts ne sera pas décrit en détail. Pour plus de détails, veuillez vous référer au
tutoriel Highcharts Vue lié ci-dessous
Aller directement à la
mise en page code vue chart 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>
La fonction de graphique à secteurs Vue implémente 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>
Implémentation de la fonction d'histogramme 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>
L'effet d'affichage est le suivant
lors de l'attachement du code d'appel dynamique de vue lorsque le front-end et le back-end interagissent
饼图
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
})
}
Ce qui précède est le processus d'attribution de la page frontale, et les données de patchwork Java back-end impliquent d'interroger la base de données et continueront d'être mises à jour quand il sera temps.
S'il y a quelque chose qui n'est pas écrit en place, bienvenue à me corriger, je l'accepterai humblement