diff --git a/vol-vue3/src/components/echarts/Bar.vue b/vol-vue3/src/components/echarts/Bar.vue
index cc03cfe..d2bd4c3 100644
--- a/vol-vue3/src/components/echarts/Bar.vue
+++ b/vol-vue3/src/components/echarts/Bar.vue
@@ -3,8 +3,8 @@
     <div class="bar" ref="vbar"></div>
 </template>
 <script>
-var echarts = require("echarts");
-let $chartBar;
+import * as echarts from 'echarts';
+import { markRaw } from 'vue'
 export default {
     name: "Bar",
     props: {
@@ -18,6 +18,10 @@ export default {
     },
     data() {
         return {
+            // chartBar: null,
+            chartBar: {
+                chart: null
+            },
             defaultOption: {
                 tooltip: {
                     trigger: 'axis',
@@ -149,18 +153,32 @@ export default {
     },
     methods: {
         initBar(option) {
-            // console.log(option);
-            if ($chartBar) {
-                $chartBar.dispose();
+            console.log(option);
+            // 直接赋值给 reactive 响应式 Proxy对象，会导致tooltip不显示
+            // this.chartBar = echarts.init(this.$refs.vbar);
+            // 改为Proxy对象属性去接收赋值
+            if (!this.chartBar.chart) {
+                let chart = markRaw(echarts.init(this.$refs.vbar));
+                chart.setOption(option, true);
+                this.chartBar.chart = chart;
+            } else {
+                this.$nextTick(() => {
+                    this.chartBar.chart.setOption(option, true);
+                });
             }
-            this.$nextTick(() => {
-                $chartBar = echarts.init(this.$refs.vbar);
-                $chartBar.setOption(option);
-            });
+            // echarts重绘模式
+            // if(this.chartBar.chart){
+            //     this.chartBar.chart.dispose();
+            // }
+            // this.$nextTick(() => {
+            //     let chart = echarts.init(this.$refs.vbar);
+            //     chart.setOption(option, true);
+            //     this.chartBar.chart = chart;
+            // });
         }
     },
     destroyed() {
-        $chartBar = null;
+        this.chartBar.chart = null;
     },
 };
 </script>
diff --git a/vol-vue3/src/components/echarts/Gauge.vue b/vol-vue3/src/components/echarts/Gauge.vue
index e4f3471..a5672b0 100644
--- a/vol-vue3/src/components/echarts/Gauge.vue
+++ b/vol-vue3/src/components/echarts/Gauge.vue
@@ -4,7 +4,6 @@
 </template>
 <script>
 var echarts = require("echarts");
-let $chartGauge;
 export default {
     name: "Gauge",
     props: {
@@ -18,6 +17,7 @@ export default {
     },
     data() {
         return {
+            chartGauge: null,
             defaultOption: {
                 series: [{
                     radius: '130%',
@@ -97,8 +97,8 @@ export default {
                     },
                     data: [
                         {
-                            value: 0.70,
-                            name: '利用率'
+                            name: '西门子828D-1',
+                            value: 0.99,
                         }
                     ]
                 }]
@@ -114,19 +114,35 @@ export default {
     },
     methods: {
         initGauge(option) {
-            // console.log(option);
-            if ($chartGauge) {
-                $chartGauge.dispose();
+            if (!this.chartGauge) {
+                this.chartGauge = echarts.init(this.$refs.vgauge);
             }
             this.$nextTick(() => {
-                $chartGauge = echarts.init(this.$refs.vgauge);
-                $chartGauge.setOption(option);
+                // this.chartGauge.clear();  // 清除上一步历史,会使得变化很突兀
+                this.chartGauge.setOption(option, true);
             });
         }
     },
+    // watch:{
+    //     'option.series.0.data': {
+    //         handler: function(newVal, oldVal) {
+    //             console.log(newVal, oldVal);
+    //             this.defaultOption.series[0].data = newVal;
+    //             // console.log(this.defaultOption);
+    //             this.initGauge(this.defaultOption);
+    //         },
+    //         deep: true
+    //     },
+    //     option: {  // 复杂类型直接监听的是地址变化
+    //         handler: function(newVal, oldVal) {
+    //             console.log(newVal, oldVal);
+    //         },
+    //         deep: true
+    //     }
+    // },
     destroyed() {
-        $chartGauge = null;
-    },
+        this.chartGauge = null;
+    }
 };
 </script>
 <style lang="less" scoped>
diff --git a/vol-vue3/src/components/echarts/Line.vue b/vol-vue3/src/components/echarts/Line.vue
index abd6574..c06f989 100644
--- a/vol-vue3/src/components/echarts/Line.vue
+++ b/vol-vue3/src/components/echarts/Line.vue
@@ -4,7 +4,7 @@
 </template>
 <script>
 var echarts = require("echarts");
-let $chartLine;
+import { markRaw } from 'vue'
 export default {
     name: "Line",
     props: {
@@ -18,6 +18,9 @@ export default {
     },
     data() {
         return {
+            chartLine: {
+                chart: null
+            },
             defaultOption: {
                 title: {
                     text: '产量折线图',
@@ -46,8 +49,8 @@ export default {
                 },
                 toolbox: {
                     feature: {
-                         // 自定义切换按钮,只能以 my 开头
-                         mySwitch: {
+                        // 自定义切换按钮,只能以 my 开头
+                        mySwitch: {
                             show: true,
                             title: '更多',
                             icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
@@ -139,7 +142,7 @@ export default {
     },
     created() {
         console.log("line loaded...");
-        this.defaultOption = this.option || this.defaultOption; 
+        this.defaultOption = this.option || this.defaultOption;
     },
     mounted() {
         this.initLine(this.defaultOption);
@@ -147,17 +150,20 @@ export default {
     methods: {
         initLine(option) {
             // console.log(option);
-            if (!$chartLine) {
-                $chartLine = echarts.init(this.$refs.vline);
+            if (!this.chartLine.chart) {
+                let chart = markRaw(echarts.init(this.$refs.vline));
+                chart.setOption(option, true);
+                this.chartLine.chart = chart;
+            } else {
+                this.$nextTick(() => {
+                    this.chartLine.chart.setOption(option, true);
+                });
             }
-            this.$nextTick(() => {
-                $chartLine.clear();
-                $chartLine.setOption(option);
-            });
         }
     },
     destroyed() {
-        $chartLine = null;
+        this.chartLine.chart = null;
+        // console.log("========line destroyed========");
     },
 };
 </script>
diff --git a/vol-vue3/src/router/index.js b/vol-vue3/src/router/index.js
index b7aa384..360b913 100644
--- a/vol-vue3/src/router/index.js
+++ b/vol-vue3/src/router/index.js
@@ -108,6 +108,15 @@ const routes = [
       keepAlive: false,
       anonymous: true   // 路由无需登录访问
     }
+  },
+  {
+    path: '/datatest',
+    name: 'datatest',
+    component: () => import('@/views/data/bigscreen/test.vue'),
+    meta: {
+      keepAlive: false,
+      anonymous: true   // 路由无需登录访问
+    }
   }
 ]
 
diff --git a/vol-vue3/src/views/data/bigscreen/chart-options.js b/vol-vue3/src/views/data/bigscreen/chart-options.js
index e6e215e..dfed0f5 100644
--- a/vol-vue3/src/views/data/bigscreen/chart-options.js
+++ b/vol-vue3/src/views/data/bigscreen/chart-options.js
@@ -229,6 +229,12 @@ let WorkData = {
         }
       }
     },
+    grid: {
+      left: '2%',
+      right: '5%',
+      bottom: '2%',
+      containLabel: true
+    },
     legend: {
       data: ['工单1', '工单2', '工单3'],
       itemGap: 20,  // 标签间距
@@ -336,6 +342,12 @@ let WorkData = {
         }
       }
     },
+    grid: {
+      left: '2%',
+      right: '5%',
+      bottom: '2%',
+      containLabel: true
+    },
     legend: {
       data: ['工单1', '工单2', '工单3'],
       itemGap: 20,  // 标签间距
@@ -433,8 +445,11 @@ let WeekProcess = {
       type: 'cross',
       crossStyle: {
         color: '#999'
-      }
-    }
+      },
+    },
+    // formatter: function (params) { 
+    //   console.log(params);
+    // }
   },
   toolbox: {
     feature: {
diff --git a/vol-vue3/src/views/data/bigscreen/index.vue b/vol-vue3/src/views/data/bigscreen/index.vue
index b291b65..29fb481 100644
--- a/vol-vue3/src/views/data/bigscreen/index.vue
+++ b/vol-vue3/src/views/data/bigscreen/index.vue
@@ -26,7 +26,8 @@
               <div class="content">
                 <div class="oee">
                   <div class="chart" v-for="(machine, index) in machineList" :key="index">
-                    <Gauge :option="machineOption(machine)" ref="vgauge"></Gauge>
+                    <!-- {{machine.name + "--" + machine.oee}} -->
+                    <Gauge :option="machineOption(machine,index)" ref="vgauge"></Gauge>
                   </div>
                 </div>
                 <div class="machine">
@@ -230,18 +231,19 @@ export default {
       gdfrom: {
         target: "turnout",
         configId: 1
-      }
+      },
+      timer: null
     }
   },
   mounted() {
-    // console.log(this.$refs.vbar);
-    // console.log(this.$set);
-    // console.log(this.$nextTick);
+    console.log(this.$refs.vline); // ！！ undefine 问题解决不了
+    console.log("数据加载中...");
     this.onLoading();
     this.datetime = this.base.getDate(true);
     setInterval(() => {
       this.datetime = this.base.getDate(true);
     });
+    window.addEventListener('beforeunload', this.clearTimer);  // 监听页面刷新或关闭
   },
   methods: {
     onLoading() {
@@ -250,20 +252,22 @@ export default {
       this.getWeekWorkData();
       setTimeout(() => {
         this.loading = false;
-      },3000);
+      }, 3000);
       // 10分钟定时发送请求数据
-      // setInterval(() => {
-      //   this.getMachineData();
-      //   this.getWeekProcessData();
-      //   this.getWeekWorkData();
-      // }, 10000);
+      this.timer = setInterval(() => {
+        this.getMachineData(true);
+        this.getWeekProcessData(true);
+        this.getWeekWorkData(true);
+      }, 10000);
     },
     changeDevice(value) {
       this.gdfrom.configId = value;
-      this.getWeekWorkData();
+      this.getWeekWorkData(true);
     },
     // 切换工单指标数据
     changeQuota(value) {
+      // console.log(this.$refs);
+      // console.log(this.$refs.vline);
       let option = this.workdata[value];
       this.$refs.vline.initLine(option);
     },
@@ -277,7 +281,7 @@ export default {
       machineOption.series[0].data[0] = oeeObj;
       return machineOption;
     },
-    getMachineData() {   // 获取机床数据
+    getMachineData(rerender) {   // 获取机床数据
       this.http.post("/api/Data_Screen/GetMachineData", {}, true)
         .then(result => {
           let machineList = [];
@@ -292,9 +296,16 @@ export default {
             });
           }
           this.machineList = machineList;
+          // console.log(this.machineList);
+          if(rerender) {
+            for(let index in this.machineList) {
+              let machineOption = this.machineOption(this.machineList[index]);
+              this.$refs.vgauge[index].initGauge(machineOption);
+            }
+          }
         });
     },
-    getWeekProcessData() {   // 获取近一周生产加工数据
+    getWeekProcessData(rerender) {   // 获取近一周生产加工数据
       this.http.post("/api/Data_Screen/GetTurnOutByWeekDays", {}, true)
         .then(result => {
           // console.log(result);
@@ -318,10 +329,13 @@ export default {
           }
           this.weekprocess.yAxis = yAxis;
           this.weekprocess.series = series;
-          console.log(this.weekprocess);
+          // console.log(this.weekprocess);
+          if (rerender) {   // 是否重新渲染
+            this.$refs.vbar.initBar(this.weekprocess);
+          }
         });
     },
-    getWeekWorkData() {   // 获取近一周工单数据
+    getWeekWorkData(rerender) {   // 获取近一周工单数据
       // 对象转formData  
       let params = this.gdfrom;
       const formData = new FormData();
@@ -343,8 +357,10 @@ export default {
             targetData.series[index].data = dataList[index];
           }
         }
-        console.log(this.workdata);
-        // this.changeQuota(this.gdfrom.target);
+        // console.log(this.workdata);
+        if (rerender) {
+          this.changeQuota(this.gdfrom.target);
+        }
       });
     },
     getDeviceConfig() {  // 获取设备配置列表
@@ -375,6 +391,10 @@ export default {
         console.log(res);
       });
     },
+    clearTimer() {  //清除定时器
+      clearInterval(this.timer);
+      this.timer = null;
+    }
   },
   computed: {
     machineNameMap() {
@@ -387,6 +407,12 @@ export default {
     //   // Proxy对象需要处理为干净的数据对象
     //   return JSON.parse(JSON.stringify(this.pagination));
     // }
+  },
+  beforeDestroy() {
+    this.timer && this.clearTimer();
+  },
+  destroyed() {
+    window.removeEventListener('beforeunload', this.clearTimer)  // 卸载监听事件
   }
 }
 </script>
diff --git a/vol-vue3/src/views/data/bigscreen/test.vue b/vol-vue3/src/views/data/bigscreen/test.vue
new file mode 100644
index 0000000..74434b8
--- /dev/null
+++ b/vol-vue3/src/views/data/bigscreen/test.vue
@@ -0,0 +1,62 @@
+
+<template>
+    <div class="test">
+        <Gauge :option="machineinfo" ref="vgauge"></Gauge>
+    </div>
+</template>
+<script>
+import Gauge from "@/components/echarts/Gauge.vue";
+import { MachineInfo, WorkData, WeekProcess } from "./chart-options";
+export default {
+    components: {
+        Gauge,
+        // Bar,
+        // Line,
+    },
+    data() {
+        return {
+            machineinfo: MachineInfo
+        }
+    },
+    mounted() {
+        console.log(this.$refs.vgauge);
+        console.log("数据测试...");
+        this.onLoading();
+        window.addEventListener('beforeunload', this.clearTimer);  // 监听页面刷新或关闭
+    },
+    methods: {
+        getMachineInfo(){
+            this.machineinfo = this.base.deepClone(MachineInfo);
+        },
+        onLoading() {
+            this.timer = setInterval(() => {
+                // this.machineinfo.series[0].data[0].value += 0.01; 
+                this.getMachineInfo();
+                console.log(123456);
+            }, 10000);
+        },
+        clearTimer() {  //清除定时器
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    },
+    beforeDestroy() {
+        this.timer && this.clearTimer();
+    },
+    destroyed() {
+        window.removeEventListener('beforeunload', this.clearTimer)  // 卸载监听事件
+    }
+}
+</script>
+<style lang="less" scoped>
+// vue3 改写dv-loading样式
+.test {
+    width: 500px;
+    height: 500px;
+}
+</style>
+  
+  
+  
+  
+  
\ No newline at end of file