1.4

src/views/databoard/components/EnergeMonitoringChart.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="energe-monitoring-chart"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+export default {
+  name: 'EnergeMonitoringChart',
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  computed: {
+    energyMonitoring() {
+      return this.$store.state.websocket.energyMonitoring
+    }
+  },
+  watch:{
+    energyMonitoring: {
+			handler(newVal, oldVal) {
+        if (newVal === oldVal) {
+          return false
+        }
+        this.updateChart()
+			}
+		}
+  },
+  mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+  methods: {
+    updateChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(this.$el);
+      let xData = []
+      let yData = []
+      this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
+        xData.push(item.lineName)
+        yData.push(item.useQuantity)
+      })
+      var option = option = {
+        // color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
+        grid: { top: 32, right: 12, bottom: 20, left: 60 },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          },
+          className: "energe-monitoring-chart-tooltip"
+        },
+        legend: {
+          data: ['电耗能'],
+          textStyle: {
+            color: "#DFF1FE",
+            fontSize: 12,
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: xData,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+            },
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: "#213259",
+              },
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位',
+            // min: 0,
+            // max: 250,
+            // interval: 50,
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              formatter: '{value}'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#213259",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#213259a0",
+              },
+            }
+          }
+        ],
+        series: [
+          {
+            name: '电耗能',
+            type: 'bar',
+            // barWidth: 12,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#5CB7FF' },
+                { offset: 1, color: '#364BFE' }
+              ])
+            },
+            data: yData
+          }
+        ]
+      }
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.energe-monitoring-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .energe-monitoring-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .energe-monitoring-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>