From 72085226bc9f82a9129b8fbcd17fab1edf9ef270 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 05 一月 2024 15:08:19 +0800
Subject: [PATCH] 1. 修复飞行巡检模块中有效率异常详情弹出框无法正常显示的bug； 2.优化各异常类型的折线图配置项生成逻辑；
---
src/views/exception/components/DustLineChart.vue | 204 +++++++++++++++++++++++---------------------------
1 files changed, 94 insertions(+), 110 deletions(-)
diff --git a/src/views/exception/components/DustLineChart.vue b/src/views/exception/components/DustLineChart.vue
index 4f2880e..6db079b 100644
--- a/src/views/exception/components/DustLineChart.vue
+++ b/src/views/exception/components/DustLineChart.vue
@@ -4,118 +4,102 @@
**鐖剁粍浠�
-->
- <template>
+<template>
+ <div id="main" class="line-chart-exception"></div>
+</template>
- <div id="main" class="line-chart-exception"></div>
+<script>
+import * as echarts from 'echarts'
-
- </template>
-
- <script>
- import * as echarts from 'echarts';
-
- export default {
- props: {
- option:{
- type:Object,
- default(){
- return {}
- }
- },
- isOpenDialog:{
- type:Boolean
- },
-
- },
- data() {
- return {
- chart: null
- };
- },
- mounted() {
- // 鑾峰彇椤甸潰瀹藉害鐨勪竴鍗�
- this.initChart();
- this.chart.clear
- this.chart.setOption(this.option,true)
- window.addEventListener('resize', this.resizeChart);
- },
- watch: {
- option(){
- // this.chart.clear
- // 涓嶄笌涔嬪墠鐨刼ption杩涜鍚堝苟
- this.chart.setOption(this.option,true)
- },
- isOpenDialog(){
- window.addEventListener('resize', this.resizeChart);
- },
- },
- // beforeUnmount() {
- // if (this.chart) {
- // this.chart.dispose;
- // }
- // },
- methods: {
- initChart() {
- // 鍒涘缓echarts瀹炰緥
- this.chart = echarts.init(document.getElementById('main'));
- // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
- const option = {
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {},
- toolbox: {
- // 宸ュ叿鏍�
- feature: {
- // dataZoom: {
- // // 鍖哄煙缂╂斁
- // yAxisIndex: 'none'
- // },
- // 淇濆瓨涓哄浘鐗�
- saveAsImage: {}
- }
- },
- xAxis: {
- type: 'time',
- data: [],
- },
- yAxis: {
- type: 'value',
- },
- series: [
- {
- name: '棰楃矑鐗╂祿搴�',
- type: 'line',
- data: []
- }
- ]
- };
- // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃
- this.chart.setOption(option, true);
- },
-
- // 璺熼〉闈㈠搷搴斿紡鍙樺寲
- resizeChart() {
- this.$nextTick(() => {
- if (this.chart) {
- this.chart.resize();
- }
- });
+export default {
+ props: {
+ option: {
+ type: Object,
+ default() {
+ return {}
}
}
- };
- </script>
-
-
- <style scoped>
- .line-chart-exception {
- width: 700px;
- height: 250px;
- margin-bottom: 20px;
- min-width: 500px;
+ },
+ data() {
+ return {
+ chart: null
+ }
+ },
+ mounted() {
+ // 鑾峰彇椤甸潰瀹藉害鐨勪竴鍗�
+ this.initChart()
+ this.chart.clear
+ this.chart.setOption(this.option, true)
+ window.addEventListener('resize', this.resizeChart)
+ },
+ watch: {
+ option(nV) {
+ // this.chart.clear
+ // 涓嶄笌涔嬪墠鐨刼ption杩涜鍚堝苟
+ this.chart.setOption(nV, true)
+ }
+ },
+
+ methods: {
+ initChart() {
+ // 鍒涘缓echarts瀹炰緥
+ this.chart = echarts.init(document.getElementById('main'))
+ // 瀹氫箟鍥捐〃鐨勯厤缃」鍜屾暟鎹�
+ const option = {
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ tooltip: {},
+ toolbox: {
+ // 宸ュ叿鏍�
+ feature: {
+ // dataZoom: {
+ // // 鍖哄煙缂╂斁
+ // yAxisIndex: 'none'
+ // },
+ // 淇濆瓨涓哄浘鐗�
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'time',
+ data: []
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '棰楃矑鐗╂祿搴�',
+ type: 'line',
+ data: []
+ }
+ ]
+ }
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃
+ this.chart.setOption(option, true)
+ },
+
+ // 璺熼〉闈㈠搷搴斿紡鍙樺寲
+ resizeChart() {
+ this.$nextTick(() => {
+ if (this.chart) {
+ this.chart.resize()
+ }
+ })
+ }
}
- </style>
-
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+.line-chart-exception {
+ width: 600px;
+ height: 250px;
+ margin-bottom: 20px;
+ min-width: 500px;
+}
+</style>
--
Gitblit v1.9.3