From 172d73cbe737c04b3d2c3fe8908db2460c241543 Mon Sep 17 00:00:00 2001 From: zmc <zmc_li@foxmail.com> Date: 星期一, 14 八月 2023 17:11:48 +0800 Subject: [PATCH] 油烟监测系统 Vue代码 --- src/sfc/DashboardChart.vue | 153 ++++++++++++++++++++++++++++----------------------- 1 files changed, 84 insertions(+), 69 deletions(-) diff --git a/src/sfc/DashboardChart.vue b/src/sfc/DashboardChart.vue index a1d3b7d..e54969d 100644 --- a/src/sfc/DashboardChart.vue +++ b/src/sfc/DashboardChart.vue @@ -8,95 +8,110 @@ </template> <script> - import * as echarts from 'echarts'; export default { props: ['data'], data() { - return { - chart: null - } + return { + chart: null + }; }, // 鐖剁粍浠惰缃簡瀹炴椂鏇存柊 褰撴簮鏁版嵁鍙戠敓鍙樺寲鏄� 鐩戝惉鍒扮珛鍗虫洿鏂颁华琛ㄧ洏 - watch:{ - data(newValue){ - this.chart.setOption({ - series: [ - { - name: '瀹炴椂鏁版嵁', - type: 'gauge', - detail: { formatter: '{value} mg/m鲁', fontSize : 17}, - axisLine: { - lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 } - }, - data: [{ - value: newValue, - name: '娌圭儫娴撳害', - itemStyle: { - color: newValue >= 1 ? 'red' : 'green' - }, - - }], - - max: 2 + watch: { + data(newValue) { + this.chart.setOption({ + series: [ + { + name: '瀹炴椂鏁版嵁', + type: 'gauge', + detail: { formatter: '{value} mg/m鲁', fontSize: 17 }, + axisLine: { + lineStyle: { + color: [ + [0.2, '#67e0e3'], + [0.5, '#37a2da'], + [1, '#fd666d'] + ], + width: 15 } - ] - }) - } - }, - mounted() { - // 椤甸潰鍔犺浇瀹屾垚鍚庤皟鐢ㄤ华琛ㄧ洏 - this.init() - window.addEventListener('resize',this.updateChart) + }, + data: [ + { + value: newValue, + name: '娌圭儫娴撳害', + itemStyle: { + color: newValue >= 1 ? 'red' : 'green' + } + } + ], + + max: 2 + } + ] + }); + } }, - methods:{ - // 鍒濆鍖栦华琛ㄧ洏 - init(){ - this.chart = echarts.init(this.$refs.chartContainer); + mounted() { + // 椤甸潰鍔犺浇瀹屾垚鍚庤皟鐢ㄤ华琛ㄧ洏 + this.init(); + window.addEventListener('resize', this.updateChart); + }, + methods: { + // 鍒濆鍖栦华琛ㄧ洏 + init() { + this.chart = echarts.init(this.$refs.chartContainer); // 璁剧疆榛樿鐨勭┖鏁版嵁浠〃鐩� this.chart.setOption({ - // 浣犵殑浠〃鐩橀厤缃」 - series: [ - { - name: '瀹炴椂鏁版嵁', - type: 'gauge', - detail: { formatter: '{value} mg/m鲁', fontSize : 17}, - axisLine: { - lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 } - }, - data: [{ - value: this.data, - name: '娌圭儫娴撳害', - itemStyle: { - color: this.data >= 1 ? 'red' : 'green' - } - }], - max: 2 + // 浣犵殑浠〃鐩橀厤缃」 + series: [ + { + name: '瀹炴椂鏁版嵁', + type: 'gauge', + detail: { formatter: '{value} mg/m鲁', fontSize: 17 }, + axisLine: { + lineStyle: { + color: [ + [0.2, '#67e0e3'], + [0.5, '#37a2da'], + [1, '#fd666d'] + ], + width: 15 } - ] + }, + data: [ + { + value: this.data, + name: '娌圭儫娴撳害', + itemStyle: { + color: this.data >= 1 ? 'red' : 'green' + } + } + ], + max: 2 + } + ] }); - }, - updateChart(){ - this.$nextTick(() => { - if (this.chart) { - this.chart.resize(); - } - }); - } + }, + updateChart() { + this.$nextTick(() => { + if (this.chart) { + this.chart.resize(); + } + }); + } }, beforeUnmount() { - // 閿�姣佷华琛ㄧ洏瀹炰緥 - this.chart.dispose(); - }, - + // 閿�姣佷华琛ㄧ洏瀹炰緥 + this.chart.dispose(); + } }; </script> <style> .dashboard-item { - width:100%; + width: 100%; height: 300px; /* margin: 10px; */ } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3