src/views/3DOverview/components/RightContentProductRate.vue

@@ -1,63 +1,57 @@
 <template>
-  <div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
+  <div ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
 </template>
 
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 
-export default {
+class ChartOption {
-  name: 'ProductRateLineChart',
+  constructor() {
-  mixins: [resize],
+    // const wenduData = Array(12)
-  props: {
+    //   .fill(1)
-    id: {
+    //   .map(_ => Random.integer(30, 100))
-      type: String,
+    // const dianyaData = Array(12)
-      default: 'default-id'
+    //   .fill(1)
-    },
+    //   .map(_ => Random.integer(30, 100))
-    title: {
+    // const dianliuData = Array(12)
-      type: String,
+    //   .fill(1)
-      default: 'default-title'
+    //   .map(_ => Random.integer(30, 100))
-    },
+
-    xData: {
+    this.color = ['#1A99FF', '#E02094', '#F0D63C']
-      type: Array,
+
-      default: () => []
+    this.legend = {
-    },
+      top: 24,
-    seriesData: {
+      right: 40,
-      type: Array,
+      itemWidth: 18,
-      default: () => []
+      itemHeight: 12,
-    }
-  },
-  data() {
-    return {
-      chart: null,
-      option: {
-        color: ['#59CBE8', '#FF7345', '#E93CAC', '#9452FF', '#6A6E87', '#52FFF1'],
-        grid: {
-          top: '40%',
-          left: '5%',
-          right: '6%',
-          bottom: '10%',
-          containLabel: true
-        },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
-        },
-        legend: {
-          width: '72%',
-          top: '20%',
-          right: '6%',
-          itemWidth: 12,
-          itemHeight: 8,
       textStyle: {
+        fontSize: 12,
         color: '#fffc'
       }
+    }
+
+    this.grid = {
+      top: 72,
+      left: 26,
+      right: 24,
+      bottom: 16,
+      containLabel: true
+    }
+
+    this.tooltip = {
+      show: true,
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 12
       },
-        xAxis: {
+      axisPointer: {
+        type: 'line'
+      },
+      formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
+    }
+
+    this.xAxis = {
       type: 'category',
       boundaryGap: false,
       // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -68,7 +62,7 @@ export default {
         show: false
       },
       axisLabel: {
-            fontSize: 10,
+        fontSize: 12,
         color: '#fffa'
       },
       axisLine: {
@@ -76,23 +70,21 @@ export default {
           color: '#fff3'
         }
       }
-        },
+    }
-        yAxis: {
+    this.yAxis = {
       type: 'value',
       name: '成品率              ',
       min: 'dataMin',
       splitNumber: 3,
       nameTextStyle: {
-            color: '#fffc',
+        color: '#fff9',
-            align: 'right',
-            verticalAlign: 'bottom',
         fontSize: 12
       },
       axisLine: {
         show: false
       },
       axisLabel: {
-            fontSize: 11,
+        fontSize: 12,
         color: '#fffa',
         formatter: '{value} %'
       },
@@ -102,8 +94,9 @@ export default {
           color: '#fff3'
         }
       }
-        },
+    }
-        series: [
+
+    this.series = [
       {
         name: 'A',
         type: 'line',
@@ -172,105 +165,70 @@ export default {
             return v
           })
       }
-          // {
-          //   name: '产线3',
-          //   type: 'line',
-          //   symbol: 'none',
-          //   areaStyle: {
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#FF734566' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   data: Array(12)
-          //     .fill(0)
-          //     .map(_ => Math.floor(Math.random() * 100))
-          // },
-          // {
-          //   name: '产线4',
-          //   type: 'line',
-          //   symbol: 'none',
-          //   areaStyle: {
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#9452FF66' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   data: Array(12)
-          //     .fill(0)
-          //     .map(_ => Math.floor(Math.random() * 100))
-          // },
-          // {
-          //   name: '产线5',
-          //   type: 'line',
-          //   symbol: 'none',
-          //   areaStyle: {
-          //     color: {
-          //       type: 'linear',
-          //       x: 0,
-          //       y: 0,
-          //       x2: 0,
-          //       y2: 1,
-          //       colorStops: [
-          //         {
-          //           offset: 0,
-          //           color: '#6A6E8766' // 0% 处的颜色
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: 'transparent' // 100% 处的颜色
-          //         }
-          //       ],
-          //       global: false // 缺省为 false
-          //     }
-          //   },
-          //   data: Array(12)
-          //     .fill(0)
-          //     .map(_ => Math.floor(Math.random() * 100))
-          // }
     ]
   }
+
+  get option() {
+    return this
+  }
+
+  optionFilter(option, calcSize = () => {} /** callback */) {
+    let newOption
+    if (Array.isArray(option)) {
+      newOption = []
+      option.forEach(item => {
+        newOption.push(this.optionFilter(item, calcSize))
+      })
+      return newOption
+    } else if (typeof option === 'object') {
+      newOption = {}
+      for (const key in option) {
+        if (key === 'colorStops') newOption[key] = option[key]
+        else if (
+          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
+          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
+        ) {
+          newOption[key] = calcSize(option[key])
+        } else newOption[key] = this.optionFilter(option[key], calcSize)
+      }
+      return newOption
+    } else {
+      newOption = calcSize(option)
+      return option
+    }
+  }
+}
+
+export default {
+  name: 'ProductRateLineChart',
+  mixins: [resize],
+  props: {},
+  data() {
+    return {
+      chart: null,
+      option: null
     }
   },
   mounted() {
     this.$nextTick(() => {
       if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
-      this.chart.setOption(this.option)
+      this.setChartOption()
     })
   },
   beforeDestroy() {
     if (this.chart) this.chart.dispose()
     this.chart = null
   },
-  methods: {}
+  methods: {
+    calcSize(num) {
+      const beilv = document.documentElement.style.getPropertyValue('--beilv')
+      return num * beilv
+    },
+    setChartOption() {
+      let chartOption = new ChartOption()
+      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
+    }
+  }
 }
 </script>
 <style scoped>

src/views/3DOverview/components/RightContentRealtimeProduction.vue

@@ -16,7 +16,6 @@
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
 import { Random } from 'mockjs'
-import { debounce } from '@/utils'
 
 class ChartOption {
   constructor() {

src/views/3DOverview/index.vue

@@ -268,7 +268,8 @@ export default {
 }
 /* 产线成品率 */
 .production {
-  height: calc(220px * var(--beilv));
+  height: calc(200px * var(--beilv));
+  flex: 1 0;
   position: relative;
 }