From 045e502fa06255c7ebe1ad6bb4ff503825006cbe Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 14 十一月 2023 14:55:56 +0800
Subject: [PATCH] 去除ts
---
src/views/line_graph/components/DustRadarChart.vue | 84 ++++++++++++++++++++++++-----------------
1 files changed, 49 insertions(+), 35 deletions(-)
diff --git a/src/views/line_graph/components/DustRadarChart.vue b/src/views/line_graph/components/DustRadarChart.vue
index 3541676..1062f26 100644
--- a/src/views/line_graph/components/DustRadarChart.vue
+++ b/src/views/line_graph/components/DustRadarChart.vue
@@ -16,7 +16,7 @@
yData: {
type: Array,
default: () => {
- return [];
+ return [100,0,0,0,100];
}
}
},
@@ -32,28 +32,36 @@
},
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() {
- // this.data[0] = this.data[0]*0.01
let option = {
title: {
text: '缁煎悎椋庨櫓'
},
tooltip: {},
radar: {
- // 杞�
- // axisLine: {
- // show:true,
- // lineStyle: {
- // color: '#F53F3F' ,// 璁剧疆杈规绾跨殑棰滆壊涓洪粦鑹�
- // type:'dashed',
- // }
- // },
-
// 杈规棰滆壊
splitLine: {
lineStyle: {
@@ -61,24 +69,19 @@
color: ['#ddd', '#aaa']
}
},
- // shape: 'circle',
+
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 }
+
],
- // splitArea: {
- // areaStyle: {
- // // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
- // shadowColor: 'rgba(0, 0, 0, 0.2)',
- // shadowBlur: 10
- // }
- // },
+
axisName: {
- color: '#428BD4'
- },
+ color: '#428BD4',
+ },
legend: {
borderColor: '#428BD4'
}
@@ -89,26 +92,37 @@
data: [
{
value: [
- (this.yData[0] / 100).toFixed(4),
+ (1 - this.yData[0]/100).toFixed(4),
this.yData[1],
this.yData[2],
- (this.yData[3] / 100).toFixed(4),
- (this.yData[4] / 100).toFixed(4)
+ (this.yData[3]/100).toFixed(4),
+ (1-this.yData[4]/100).toFixed(4)
],
+
name: '寮傚父鍒嗘瀽'
}
],
label: {
- show: true,
- formatter: function (params) {
- return params.value;
- }
+ 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>
@@ -119,7 +133,7 @@
<style scoped>
.chart {
- width: 100%;
+ width: 650px;
height: 500px;
}
</style>
--
Gitblit v1.9.3