init

src/views/QualityManager/scrap/components/barChart.vue

@@ -0,0 +1,119 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 10:26:44
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="barStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    barStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    legend: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    xAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    yAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    series: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    color: {
+      type: Array,
+      default: () => {
+        return ['#5470C6']
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    series: {
+      handler() {
+        this.init()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.init()
+    addEventListener('resize', () => {
+      this.chart.resize()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        color: this.color,
+        title: this.title,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: this.legend,
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: this.xAxis,
+        yAxis: this.yAxis,
+        series: this.series
+      })
+    }
+  }
+}
+</script>