init

wms_pro/qd/src/views/home/BarChart2.vue

@@ -0,0 +1,117 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '270px'
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHandler)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ listdata1 } = {}) {
+      this.chart.setOption({
+        tooltip: {
+          show: 'true',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '2%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          name: '任务类型',
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              fontSize: 12
+            }
+
+          },
+          data: ['保护膜区入库', '保护膜区出库', '聚酯区入库', '聚酯区出库', '空载具入库', '空载具出库']
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '任务数',
+          axisTick: {
+            show: true
+          }
+        }],
+        series: [{
+          name: '任务数',
+          type: 'bar',
+          barWidth: '60%',
+          data: listdata1
+        }, {
+          data: listdata1,
+          label: {
+            show: true
+          },
+          type: 'line'
+        }
+        ]
+      })
+    }
+  }
+}
+</script>

wms_pro/qd/src/views/home/PieChart2.vue

@@ -0,0 +1,100 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '250px'
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHandler)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ pietext, pieper, piedata } = {}) {
+      this.chart.setOption({
+        title: {
+          text: pietext,
+          left: 'center',
+          fontColor: '#FFF',
+          subtext: pieper
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '2',
+          data: ['有货', '无货']
+        },
+        series: [
+          {
+            name: pietext,
+            type: 'pie',
+            radius: [15, 85],
+            center: ['50%', '54%'],
+            label: {
+              show: true,
+              position: 'inner',
+              formatter: '{b}:{c}'
+            },
+            data: piedata
+          }
+        ]
+      })
+    }
+  }
+}
+</script>