cxw-010203

src/components/v-echars/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 19:12:07
- * @LastEditTime: 2021-10-28 10:42:54
+ * @LastEditTime: 2021-10-29 11:21:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edi
  * @FilePath: /data-show/src/components/v-echars/index.vue
 -->
 <template>
-    <div class="echars-cont" ref="myChart">
+    <div class="echars-cont" ref="myChart" v-resize="changeWin">
     </div>
 </template>
 
@@ -110,6 +110,12 @@ export default {
                 });
             });
         },
+        // 窗口变化
+        changeWin() {
+            if(this.myChart) {
+                this.myChart.resize()
+            }
+        }
     },
 };
 </script>

src/mixins/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:56:13
- * @LastEditTime: 2021-10-28 19:41:06
+ * @LastEditTime: 2021-10-29 11:16:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/mixins/index.js
@@ -12,13 +12,32 @@ export default {
     install(Vue) {
         Vue.mixin({
             directives: {
-                'loading': Loading
+                'loading': Loading,
+                resize: { // 指令的名称
+                    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+                        // console.log(el, "绑定", binding);
+                        let width = '', height = '';
+                        function isReize() {
+                            const style = document.defaultView.getComputedStyle(el);
+                            if (width !== style.width || height !== style.height) {
+                                binding.value({ width: style.width, height: style.height });  // 关键(这传入的是函数,所以执行此函数)
+                            }
+                            width = style.width;
+                            height = style.height;
+                        }
+                        el.__vueSetInterval__ = setInterval(isReize, 300);
+                    },
+                    unbind(el) {
+                        // console.log(el, "解绑");
+                        clearInterval(el.__vueSetInterval__);
+                    }
+                }
             },
             computed: {
-                ...mapGetters(['getZoom', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime','getCtime2', 'getHeaderType', 'getBrand', 'getModel'])
+                ...mapGetters(['getZoom', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel'])
             },
             methods: {
-                ...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime','setCtime2', 'setHeaderType', 'setBrand', 'setModel']),
+                ...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel']),
                 // 获取当前日期时间
                 getDatetime() {
                     let now = new Date();
@@ -88,7 +107,7 @@ export default {
                         } else {
                             totalCount += 2;
                         }
-                        if(totalCount <= n) {
+                        if (totalCount <= n) {
                             txt += str[i];
                         } else {
                             txt += '...';