1.3

src/views/deviceManagement/components/palletLevelChart.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div
+      id="palletLevel"
+      style="width: 100%"
+      :style="{ height: chartHeight + 'px' }"
+    ></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import { tableHeight } from '@/utils/index'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: 'PalletLevelChart',
+  mixins: [resize],
+  props: {
+    chartMsg: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      chart: '',
+      chartHeight: tableHeight(400) * 0.5
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getChart()
+    })
+    window.addEventListener('resize', () => {
+      this.chartHeight = tableHeight(400) * 0.5
+    })
+  },
+  watch: {
+    chartMsg: function () {
+      this.getChart()
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      var chartDom = document.getElementById('palletLevel')
+      this.chart = echarts.init(chartDom)
+      console.log(this.chartMsg)
+      var lp = this.chartMsg.okNum
+      var jg = this.chartMsg.reprocessNum
+      var fp = this.chartMsg.wasteNum
+      const color = [
+        'rgba(91, 143, 249, 0.8500)',
+        'rgba(90, 216, 166, 0.8500)',
+        'rgba(246, 189, 22, 0.8500)'
+      ]
+      var option = {
+        color: color,
+        legend: {
+          icon: 'circle',
+          bottom: '0',
+          left: 'center',
+          itemWidth: 10,
+          itemHeight: 10
+        },
+        series: {
+          name: 'palletLeve',
+          type: 'pie',
+          radius: ['40%', '60%'],
+          center: ['50%', '45%'],
+          data: [
+            {
+              value: lp,
+              name: '良品 ' + lp
+            },
+            {
+              value: jg,
+              name: '再加工品 ' + jg
+            },
+            {
+              value: fp,
+              name: '废品 ' + fp
+            }
+          ]
+        }
+      }
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>