From ef10dea2a96d68a00a9a316f8594e0636103a6ab Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 12 十月 2023 16:50:25 +0800
Subject: [PATCH] 扬尘前端页面
---
src/views/line_graph/components/DustRadarChart.vue | 117 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 87 insertions(+), 30 deletions(-)
diff --git a/src/views/line_graph/components/DustRadarChart.vue b/src/views/line_graph/components/DustRadarChart.vue
index e6162a9..1062f26 100644
--- a/src/views/line_graph/components/DustRadarChart.vue
+++ b/src/views/line_graph/components/DustRadarChart.vue
@@ -4,17 +4,19 @@
<script>
import * as echarts from 'echarts';
export default {
- props:{
- name:{
- type:Array,
- default:()=>{
- return []
- }
- },
- data:{
- type:Array,
- default:()=>{
- return []
+ props: {
+ // 灞炴��
+ name: {
+ type: Array,
+ default: () => {
+ return [];
+ }
+ },
+ // 鏁版嵁
+ yData: {
+ type: Array,
+ default: () => {
+ return [100,0,0,0,100];
}
}
},
@@ -23,49 +25,104 @@
chart: null
};
},
- watch:{
- data(){
- this.set()
+ watch: {
+ yData() {
+ this.set();
}
},
mounted() {
this.initRadarChart();
+ window.addEventListener('resize', this.resizeChart);
+ },
+ computed:{
+ valid(){
+ return (100-this.yData[0]).toFixed(2)
+ },
+ exceptionRecurrence(){
+ return this.yData[1]*100
+ },
+ exceptionTypeAggregation(){
+ return this.yData[2]*100
+ },
+ exceeding(){
+ return this.yData[3]
+ },
+ online(){
+ return (100-this.yData[4]).toFixed(2)
+ }
},
methods: {
initRadarChart() {
this.chart = echarts.init(document.getElementById('main'));
},
- set(){
+ set() {
let option = {
title: {
- text: '鍩虹鍒嗘瀽'
+ text: '缁煎悎椋庨櫓'
},
tooltip: {},
radar: {
- // shape: 'circle',
+ // 杈规棰滆壊
+ splitLine: {
+ lineStyle: {
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color: ['#ddd', '#aaa']
+ }
+ },
+
indicator: [
- { name: this.name[0], max: 1 },
- { name: this.name[1], max: 1 },
- { name: this.name[2], max: 1 },
- { name: this.name[3], max: 1 },
- { name: this.name[4], max: 1 }
- ]
+ { name: this.name[0] +' '+ this.valid+'%', max: 1 },
+ { name: this.name[1] +' '+ this.exceptionRecurrence+'%', max: 1 },
+ { name: this.name[2] +' '+ this.exceptionTypeAggregation+'%', max: 1 },
+ { name: this.name[3] +' '+ this.exceeding+'%', max: 1 },
+ { name: this.name[4] +' '+ this.online+'%', max: 1 }
+
+ ],
+
+ axisName: {
+ color: '#428BD4',
+ },
+ legend: {
+ borderColor: '#428BD4'
+ }
},
series: [
{
- name: 'Budget vs spending',
type: 'radar',
data: [
{
- value: [this.data[0]*0.01,this.data[1]*0.01, this.data[2]*0.01,this.data[3]*0.01,this.data[4]*0.01],
+ value: [
+ (1 - this.yData[0]/100).toFixed(4),
+ this.yData[1],
+ this.yData[2],
+ (this.yData[3]/100).toFixed(4),
+ (1-this.yData[4]/100).toFixed(4)
+ ],
+
name: '寮傚父鍒嗘瀽'
- },
- ]
+ }
+ ],
+ label: {
+ show: false,
+ position: 'bottom',
+ formatter: function(params) {
+ return params.value*100+'%'
+ }
+ }
}
]
};
this.chart.setOption(option);
- }
+ },
+ // 璺熼〉闈㈠搷搴斿紡鍙樺寲
+ resizeChart() {
+ this.chart.resize();
+ // this.$nextTick(() => {
+ // if (this.chart) {
+ // this.chart.resize();
+ // }
+ // });
+ }
}
};
</script>
@@ -76,7 +133,7 @@
<style scoped>
.chart {
- width: 100%;
- height: 35vh;
+ width: 650px;
+ height: 500px;
}
</style>
--
Gitblit v1.9.3