班组&能源基础

src/views/energy/monitoring/orderEnergy/components/barChart.vue

@@ -0,0 +1,93 @@
+<template>
+  <div 
+    id="orderEnergyChart"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "BarChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(430)
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(430)
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('orderEnergyChart')
+      this.chart = echarts.init(this.chartDom)
+      console.log(this.chartData)
+      let xData = []
+      let yData = []
+      this.chartData && this.chartData.map(item =>{
+        xData.push(item.objName)
+        yData.push(item.useNum)
+      })
+      var option = {
+        color:['#288AFF'],
+        grid: {
+          left: '2%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLabel: {
+            rotate: "45"
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yData,
+            type: 'bar',
+            barMaxWidth: 20,
+            label: {
+              show: true,
+              position: 'top'
+            }
+          }
+        ]
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>