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