diff --git a/src/views/3DOverview/components/DianChart.vue b/src/views/3DOverview/components/DianChart.vue
index 45fb162..6a9c73e 100644
--- a/src/views/3DOverview/components/DianChart.vue
+++ b/src/views/3DOverview/components/DianChart.vue
@@ -5,6 +5,218 @@
 <script>
 import echarts from 'echarts'
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import { Random } from 'mockjs'
+
+class ChartOption {
+  constructor() {
+    this.color = ['#E02094', '#F0D63C', '#1A99FF']
+
+    this.legend = {
+      top: 11,
+      right: 32,
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: {
+        color: '#fff9',
+        fontSize: 10
+      }
+    }
+
+    this.grid = {
+      top: 36,
+      left: 64,
+      bottom: 36
+    }
+
+    this.tooltip = {
+      show: true,
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line',
+        axis: 'x',
+        lineStyle: {
+          color: '#41888F90',
+          shadowColor: '#41888F',
+          shadowBlur: 10,
+          width: 2
+        }
+      },
+      extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
+    }
+
+    this.xAxis = {
+      type: 'category',
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#fff9',
+        fontSize: 12,
+        margin: 10
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#fff3'
+        }
+      }
+    }
+
+    this.yAxis = [
+      {
+        name: '电流/A    ',
+        nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
+        type: 'value',
+        splitNumber: 4,
+        onZero: true,
+        position: 'left',
+        offset: 28,
+        axisTick: { show: false },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#5982B2',
+            width: 1
+          }
+        },
+        axisLabel: {
+          color: '#fff9',
+          fontSize: 10
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff1',
+            type: 'dotted'
+          }
+        }
+      },
+      {
+        name: '  电压/V  ',
+        nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
+        type: 'value',
+        splitNumber: 4,
+        axisTick: { show: false },
+        onZero: true,
+        position: 'left',
+        offset: 0,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#5982B2',
+            width: 1
+          }
+        },
+        axisLabel: {
+          color: '#fff9',
+          fontSize: 10
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff1',
+            type: 'dotted'
+          }
+        }
+      },
+      {
+        name: '        温度',
+        nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 },
+        axisTick: { show: false },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#fff9',
+            width: 1
+          }
+        },
+        type: 'value',
+        splitNumber: 4,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#fff1',
+            type: 'dotted'
+          }
+        },
+        axisLabel: {
+          color: '#fff9',
+          fontSize: 10
+        }
+      }
+    ]
+
+    this.series = [
+      {
+        name: 'ABC三相电压/v',
+        type: 'line',
+        yAxisIndex: 0,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
+        symbol: 'none'
+      },
+      {
+        name: 'ABC三相电流/a',
+        type: 'line',
+        yAxisIndex: 1,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
+        symbol: 'none'
+      },
+      {
+        name: '电缆温度',
+        type: 'line',
+        yAxisIndex: 2,
+        // smooth: true,
+        emphasis: {
+          focus: 'series'
+        },
+        data: Array(12)
+          .fill(1)
+          .map(_ => Random.integer(30, 100)),
+        symbol: 'none'
+      }
+    ]
+  }
+
+  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: 'DianLineChart',
@@ -19,209 +231,9 @@ export default {
     }
   },
   data() {
-    const colors = ['#E02094', '#F0D63C', '#1A99FF']
-
-    // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
-    let data = [
-      // 温度走势
-      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
-        }
-        return v
-      }),
-      // 电流走势
-      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
-        }
-        return v
-      }),
-      // 电压走势
-      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
-        let v = Math.floor(Math.random() * 100)
-        while (v < 30) {
-          v = Math.floor(Math.random() * 100)
-        }
-        return v
-      })
-    ]
-    let wendu = data[0]
-    let dianliu = data[1]
-    let dianya = data[2]
-
     return {
       chart: null,
-      option: {
-        color: colors,
-        legend: {
-          top: 16,
-          right: 64,
-          itemWidth: 8,
-          itemHeight: 8,
-          textStyle: {
-            color: '#fff9',
-            fontSize: 12
-          }
-          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
-        },
-        grid: {
-          top: 48,
-          left: 64,
-          bottom: 36
-        },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'line',
-            axis: 'x',
-            lineStyle: {
-              color: '#41888F90',
-              shadowColor: '#41888F',
-              shadowBlur: 10,
-              width: 2
-            }
-          },
-          extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-            axisTick: { show: false },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 14
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#fff3'
-              }
-            }
-          }
-        ],
-        yAxis: [
-          {
-            name: '电流/A    ',
-            nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
-            type: 'value',
-            splitNumber: 4,
-            onZero: true,
-            position: 'left',
-            offset: 32,
-            axisTick: { show: false },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#5982B2',
-                width: 1
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 12
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff1',
-                type: 'dotted'
-              }
-            }
-          },
-          {
-            name: '  电压/V  ',
-            nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
-            type: 'value',
-            splitNumber: 4,
-            axisTick: { show: false },
-            onZero: true,
-            position: 'left',
-            offset: 0,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#5982B2',
-                width: 1
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 12
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff1',
-                type: 'dotted'
-              }
-            }
-          },
-          {
-            name: '        温度',
-            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 },
-            axisTick: { show: false },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#fff9',
-                width: 1
-              }
-            },
-            type: 'value',
-            splitNumber: 4,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#fff1',
-                type: 'dotted'
-              }
-            },
-            axisLabel: {
-              color: '#fff9',
-              fontSize: 12
-            }
-          }
-        ],
-        series: [
-          {
-            name: 'ABC三相电压/v',
-            type: 'line',
-            yAxisIndex: 0,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: dianliu,
-            symbol: 'none'
-          },
-          {
-            name: 'ABC三相电流/a',
-            type: 'line',
-            yAxisIndex: 1,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: dianya,
-            symbol: 'none'
-          },
-          {
-            name: '电缆温度',
-            type: 'line',
-            yAxisIndex: 2,
-            // smooth: true,
-            emphasis: {
-              focus: 'series'
-            },
-            data: wendu,
-            symbol: 'none'
-          }
-        ]
-      }
+      option: null
     }
   },
   computed: {
@@ -239,7 +251,7 @@ export default {
   mounted() {
     this.$nextTick(() => {
       if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
-      this.chart.setOption(this.option)
+      this.setChartOption()
     })
   },
   beforeDestroy() {
@@ -247,7 +259,14 @@ export default {
     this.chart = null
   },
   methods: {
-    initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {}
+    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>
diff --git a/src/views/3DOverview/components/RightContentQualityAnalysis.vue b/src/views/3DOverview/components/RightContentQualityAnalysis.vue
index 145e7d5..db9bc6b 100644
--- a/src/views/3DOverview/components/RightContentQualityAnalysis.vue
+++ b/src/views/3DOverview/components/RightContentQualityAnalysis.vue
@@ -26,16 +26,16 @@ export default {
   data() {
     return {
       datalist: [
-        { name: '热端', value: 2023233, color: '#0b88ff' },
-        { name: '丝印', value: 2023233, color: '#0bffa6' },
-        { name: '原片', value: 20, color: '#0bffa6' },
-        { name: '钢化', value: 20, color: '#e3ff0b' },
-        { name: '上片磨边', value: 20, color: '#e3ff0b' },
-        { name: '下片铺纸', value: 202324, color: '#950bff' },
-        { name: '镀膜', value: 20, color: '#950bff' },
-        { name: '物流仓储', value: 202324, color: '#ff7d0b' },
-        { name: '清洗', value: 20, color: '#0bffa6' },
-        { name: '包装', value: 2, color: '#ff0bc2' }
+        { name: '热端', value: 66, color: '#0b88ff' },
+        { name: '丝印', value: 93, color: '#0bffa6' },
+        { name: '原片', value: 121, color: '#0bffa6' },
+        { name: '钢化', value: 2, color: '#e3ff0b' },
+        { name: '上片磨边', value: 211, color: '#e3ff0b' },
+        { name: '下片铺纸', value: 27, color: '#950bff' },
+        { name: '镀膜', value: 44, color: '#950bff' },
+        { name: '物流仓储', value: 3, color: '#ff7d0b' },
+        { name: '清洗', value: 2, color: '#0bffa6' },
+        { name: '包装', value: 22, color: '#ff0bc2' }
       ]
     }
   },