新增模块

2024-04-17 16:17:07 +08:00
parent 5b59893edb
commit 320d747eb8
22 changed files with 5374 additions and 124 deletions
--- a/src/views/greenest/lineChart.vue
+++ b/src/views/greenest/lineChart.vue
@@ -0,0 +1,211 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: zhp
+ * @LastEditTime: 2024-04-16 15:48:46
+ * @Description:
+-->
+<template>
+  <!-- <div> -->
+    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
+    <div :id="id" class="epChart" :style="{  height: height, width: width }" />
+  <!-- </div> -->
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from '@/mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    // className: {
+    //   type: String,
+    //   default: 'epChart'
+    // },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '550px'
+    },
+    legendPosition: {
+      type: String,
+      default: 'center'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.initChart()
+    // })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      console.log(1111)
+      this.chart = echarts.init(document.getElementById(this.id))
+      console.log(document.querySelector(".app-container").style);
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        // toolbox: {
+        //   feature: {
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
+        grid: { top: 60, right: 90, bottom: 10, left: 10, containLabel: true },
+        legend: {
+          data: ['废水', '废气', 'VOC'],
+          right: '90px',
+          top: '0%',
+          icon: 'roundRect',
+          itemGap: 40,
+          itemWidth: 20,
+          itemHeight: 2,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '废水/t',
+            min: 0,
+            max: 250,
+            interval: 50,
+            axisLabel: {
+              formatter: '{value}'
+            }
+          },
+          {
+            type: 'value',
+            name: '废气/m³',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value}'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '废水',
+            type: 'line',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' t';
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(40, 138, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(40, 138, 255, 1)' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+            ]
+          },
+          {
+            name: '废气',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' m³';
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(99, 189, 255, 1)' //改变折线颜色
+                }
+              }
+            },
+            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+          },
+          {
+            name: 'VOC',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' m³';
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255, 206, 106, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(255, 206, 106, 1)' //改变折线颜色
+                }
+              }
+            },
+            data: [33.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* .epChart {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 10px;
+} */
+</style>