From 89de9fa802b3e62888607509df51d5a8635bc2b3 Mon Sep 17 00:00:00 2001
From: MTrunning <1262327911@qq.com>
Date: Sun, 28 Jun 2020 18:15:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0mixins=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E5=9B=BE=E6=A0=87=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 58 +++++++++----------
 .../echart/bottom/bottomLeftChart.vue         | 19 +++---
 .../echart/bottom/bottomRightChart.vue        | 21 ++++---
 .../echart/center/centerChartRate.vue         | 17 +++---
 .../echart/centerLeft2/centreLeft1Chart.vue   | 23 +++-----
 .../echart/centerLeft2/centreLeft2Chart.vue   | 23 +++-----
 .../centreRight2/centreRight2Chart1.vue       | 33 +++++------
 src/main.js                                   | 29 ++++++----
 src/utils/index.js                            | 34 +++++++++++
 src/utils/resizeMixins.js                     | 26 +++++++++
 src/views/index.vue                           |  2 +-
 11 files changed, 163 insertions(+), 122 deletions(-)
 create mode 100644 src/utils/index.js
 create mode 100644 src/utils/resizeMixins.js

diff --git a/README.md b/README.md
index 0889d8b..1281bf1 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@
 - 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用**按需引入**。
 - 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
 - 项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
+- 请拉取 master 分支的代码，其余是开发分支。
 
 友情链接：
 
@@ -14,39 +15,42 @@
 4.  [项目 gitee 地址（国内速度快）](https://gitee.com/MTrun/big-screen-vue-datav)
 
 项目展示
-![项目展示](https://images.gitee.com/uploads/images/2020/0411/221307_0f8af2e7_4964818.gif "20200411_221020.gif")
+![项目展示](https://images.gitee.com/uploads/images/2020/0411/221307_0f8af2e7_4964818.gif '20200411_221020.gif')
 
 ## 二、主要文件介绍
 
 | 文件                | 作用/功能                                           |
 | ------------------- | --------------------------------------------------- |
 | mian.js             | 主目录文件，全局引入了引入 vue-awesome              |
+| utils               | 工具函数与 mixins 函数等                            |
 | views/ index.vue    | 项目主结构                                          |
 | views/其余文件      | 界面各个区域组件（按照位置来命名）ajax 接口请求位置 |
 | assets              | 静态资源目录，放置 logo 与背景图片                  |
 | assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节                 |
 | assets / index.scss | Index 界面的 CSS 文件                               |
 | components/echart   | 所有 echart 图表（按照位置来命名）                  |
-| common/flexible.js  | flexible插件代码（适配屏幕尺寸，定制化修改）         |
+| common/flexible.js  | flexible 插件代码（适配屏幕尺寸，定制化修改）       |
 
 ## 三、使用介绍
 
 1. **如何启动项目**
+
    需要提前安装好`nodejs`与`npm`,下载项目后在项目主目录下运行`npm/cnpm install`拉取依赖包，然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。
 
 2. **如何请求数据**
+
    现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。
 
 - axios 的 main.js 配置参考范例（因人而异）
 
 ```js
-import axios from "axios";
+import axios from 'axios';
 
 //把方法放到vue的原型上，这样就可以全局使用了
 Vue.prototype.$http = axios.create({
   //设置20秒超时时间
   timeout: 20000,
-  baseURL: "http://172.0.0.1:80080", //这里写后端地址
+  baseURL: 'http://172.0.0.1:80080', //这里写后端地址
 });
 ```
 
@@ -72,6 +76,7 @@ export default {
 ```
 
 3. **如何动态渲染图表**
+
    在`components/echart`下的文件，比如`drawPie()`是渲染函数，`echartData`是需要动态渲染的数据，当外界通过`props`传入新数据，我们可以使用`watch()`方法去监听，一但数据变化就调用`this.drawPie()`并触发内部的`.setOption`函数，重新渲染一次图表。
 
 ```js
@@ -93,6 +98,7 @@ methods: {
 ```
 
 4. **如何复用图表组件**
+
    因为 Echart 图表是根据`id/class`去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的`任务通过率与任务达标率`组件就是采用复用的方式。
 
 如：在调用处`views/center.vue`里去定义好数据并传入组件（项目里的所有`id`都不能重复!!!）
@@ -128,43 +134,29 @@ data() {
 }
 ```
 
-在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
-
-```js
-props: {
-    id: {
-      type: String,
-      required: true,
-      default: "chartRate"
-    },
-    ...
-    colorObj: {
-      type: Object,
-      default: function() {
-        return {
-          //具体去代码里看
-          }
-        };
-      }
-    }
-  },
-```
+然后在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
 
 5. **如何更换边框**
-   边框是使用了 DataV 自带的组件，如：
+
+   边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
+   如：
 
 ```html
 <dv-border-box-1></dv-border-box-1>
+<dv-border-box-2></dv-border-box-2>
+<dv-border-box-3></dv-border-box-3>
 ```
 
-只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
-
-
 6. **如何更换图表**
+
    直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
 
+7. **Mixins 注入的问题**
+
+   使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将`echarts.init()`函数赋值给`this.chart`，然后 mixins 才会自动帮你注入响应式功能。
+
+8. **屏幕适配问题**
 
-7. **屏幕适配问题**
    本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
 
 ```js
@@ -179,7 +171,7 @@ function refreshRem() {
   }
   // 原项目是1920px我设置成24等份，这样1rem就是80px
   var rem = width / 24;
-  docEl.style.fontSize = rem + "px";
+  docEl.style.fontSize = rem + 'px';
   flexible.rem = win.rem = rem;
 }
 ```
@@ -188,7 +180,9 @@ function refreshRem() {
 
 1. 增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
 2. 修复了头部右侧的图案条不对称的问题。
-3. 修复屏幕适配问题，更换了所有的尺寸单位，统一使用rem。
+3. 修复屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。
+4. 使用 Mixins 注入图表响应式代码。
+5. vue-awesome 改成按需引入的方式
 
 ## 五、其余
 
diff --git a/src/components/echart/bottom/bottomLeftChart.vue b/src/components/echart/bottom/bottomLeftChart.vue
index 2b34df4..1582d7c 100644
--- a/src/components/echart/bottom/bottomLeftChart.vue
+++ b/src/components/echart/bottom/bottomLeftChart.vue
@@ -5,20 +5,22 @@
 </template>
 
 <script>
+import echartMixins from "@/utils/resizeMixins";
 const echarts = require("echarts");
 export default {
   data() {
-    return {};
+    return {
+      chart: null
+    };
   },
+  mixins: [echartMixins],
   mounted() {
-    this.drawPie();
+    this.draw();
   },
   methods: {
-    drawPie() {
+    draw() {
       // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(
-        document.getElementById("bottomLeftChart")
-      );
+      this.chart = echarts.init(document.getElementById("bottomLeftChart"));
       //  ----------------------------------------------------------------
       let category = [
         "市区",
@@ -255,10 +257,7 @@ export default {
           }
         ]
       };
-      myChartPieLeft.setOption(option);
-      // -----------------------------------------------------------------
-      // 响应式变化
-      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+      this.chart.setOption(option);
     }
   },
   destroyed() {
diff --git a/src/components/echart/bottom/bottomRightChart.vue b/src/components/echart/bottom/bottomRightChart.vue
index 777404f..e15e564 100644
--- a/src/components/echart/bottom/bottomRightChart.vue
+++ b/src/components/echart/bottom/bottomRightChart.vue
@@ -5,26 +5,28 @@
 </template>
 
 <script>
+import echartMixins from "@/utils/resizeMixins";
 const echarts = require("echarts");
 export default {
   data() {
-    return {};
+    return {
+      chart: null
+    };
   },
   mounted() {
-    this.drawPie();
+    this.draw();
     this.charTimg();
   },
+  mixins: [echartMixins],
   methods: {
     charTimg() {
       setInterval(() => {
-        this.drawPie();
+        this.draw();
       }, 6000);
     },
-    drawPie() {
+    draw() {
       // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(
-        document.getElementById("bottomRightChart")
-      );
+      this.chart = echarts.init(document.getElementById("bottomRightChart"));
       //  ----------------------------------------------------------------
       // 数据
       let dateBase = new Date();
@@ -392,10 +394,7 @@ export default {
         ]
       };
 
-      myChartPieLeft.setOption(option);
-      // -----------------------------------------------------------------
-      // 响应式变化
-      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+      this.chart.setOption(option);
     }
   },
   destroyed() {
diff --git a/src/components/echart/center/centerChartRate.vue b/src/components/echart/center/centerChartRate.vue
index 5c1984b..d45b422 100644
--- a/src/components/echart/center/centerChartRate.vue
+++ b/src/components/echart/center/centerChartRate.vue
@@ -5,13 +5,17 @@
 </template>
 
 <script>
+import echartMixins from "@/utils/resizeMixins";
 const echarts = require("echarts");
 export default {
   data() {
-    return {};
+    return {
+      chart: null
+    };
   },
+  mixins: [echartMixins],
   mounted() {
-    this.drawPie();
+    this.draw();
   },
   props: {
     id: {
@@ -41,9 +45,9 @@ export default {
     }
   },
   methods: {
-    drawPie() {
+    draw() {
       // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(document.getElementById(this.id));
+      this.chart = echarts.init(document.getElementById(this.id));
       //  ----------------------------------------------------------------
       let tips = this.tips;
       let option = {
@@ -88,10 +92,7 @@ export default {
           }
         ]
       };
-      myChartPieLeft.setOption(option);
-      // -----------------------------------------------------------------
-      // 响应式变化
-      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+      this.chart.setOption(option);
     }
   },
   destroyed() {
diff --git a/src/components/echart/centerLeft2/centreLeft1Chart.vue b/src/components/echart/centerLeft2/centreLeft1Chart.vue
index ea35fa3..c3f4be5 100644
--- a/src/components/echart/centerLeft2/centreLeft1Chart.vue
+++ b/src/components/echart/centerLeft2/centreLeft1Chart.vue
@@ -5,23 +5,25 @@
 </template>
 
 <script>
+import echartMixins from "@/utils/resizeMixins";
 const echarts = require("echarts");
 export default {
   data() {
-    return {};
+    return {
+      chart: null
+    };
   },
+  mixins: [echartMixins],
   mounted() {
-    this.drawPie();
+    this.draw();
   },
   methods: {
-    drawPie(sidebar) {
+    draw() {
       // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(
-        document.getElementById("centreLeft1Chart")
-      );
+      this.chart = echarts.init(document.getElementById("centreLeft1Chart"));
       //  ----------------------------------------------------------------
 
-      myChartPieLeft.setOption({
+      this.chart.setOption({
         color: [
           "#37a2da",
           "#32c5e9",
@@ -68,13 +70,6 @@ export default {
           }
         ]
       });
-      // -----------------------------------------------------------------
-      // 响应式变化
-      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
-      //侧边栏变化
-      if (sidebar) {
-        myChartPieLeft.resize();
-      }
     }
   },
   destroyed() {
diff --git a/src/components/echart/centerLeft2/centreLeft2Chart.vue b/src/components/echart/centerLeft2/centreLeft2Chart.vue
index 5a0a520..41a0d6b 100644
--- a/src/components/echart/centerLeft2/centreLeft2Chart.vue
+++ b/src/components/echart/centerLeft2/centreLeft2Chart.vue
@@ -5,20 +5,22 @@
 </template>
 
 <script>
+import echartMixins from "@/utils/resizeMixins";
 const echarts = require("echarts");
 export default {
   data() {
-    return {};
+    return {
+      chart: null
+    };
   },
+  mixins: [echartMixins],
   mounted() {
-    this.drawPie();
+    this.draw();
   },
   methods: {
-    drawPie(sidebar) {
+    draw() {
       // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(
-        document.getElementById("centreLeft2Chart")
-      );
+      this.chart = echarts.init(document.getElementById("centreLeft2Chart"));
       //  ----------------------------------------------------------------
 
       let option = {
@@ -188,14 +190,7 @@ export default {
           }
         ]
       };
-      myChartPieLeft.setOption(option);
-      // -----------------------------------------------------------------
-      // 响应式变化
-      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
-      //侧边栏变化
-      if (sidebar) {
-        myChartPieLeft.resize();
-      }
+      this.chart.setOption(option);
     }
   },
   destroyed() {
diff --git a/src/components/echart/centreRight2/centreRight2Chart1.vue b/src/components/echart/centreRight2/centreRight2Chart1.vue
index a0ab959..3f50e38 100644
--- a/src/components/echart/centreRight2/centreRight2Chart1.vue
+++ b/src/components/echart/centreRight2/centreRight2Chart1.vue
@@ -5,24 +5,24 @@
 </template>
 
 <script>
+import echartMixins from "@/utils/resizeMixins";
 const echarts = require("echarts");
 export default {
   data() {
-    return {};
+    return {
+      chart: null
+    };
   },
+  mixins: [echartMixins],
   mounted() {
-    this.drawPie();
+    this.draw();
   },
   methods: {
-    drawPie(sidebar) {
+    draw() {
       // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(
-        document.getElementById("centreRight2Chart1")
-      );
+      this.chart = echarts.init(document.getElementById("centreRight2Chart1"));
       //  ----------------------------------------------------------------
-      // Schema:
-      // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
-      var dataBJ = [
+      let dataBJ = [
         [94, 69, 114, 2.08, 73, 39, 22],
         [99, 73, 110, 2.43, 76, 48, 23],
         [31, 12, 30, 0.5, 32, 16, 24],
@@ -32,7 +32,7 @@ export default {
         [160, 120, 186, 2.77, 91, 50, 28]
       ];
 
-      var dataGZ = [
+      let dataGZ = [
         [84, 94, 140, 2.238, 68, 18, 22],
         [93, 77, 104, 1.165, 53, 7, 23],
         [99, 130, 227, 3.97, 55, 15, 24],
@@ -42,7 +42,7 @@ export default {
         [56, 48, 68, 1.336, 37, 9, 28]
       ];
 
-      var dataSH = [
+      let dataSH = [
         [91, 45, 125, 0.82, 34, 23, 1],
         [65, 27, 78, 0.86, 45, 29, 2],
         [83, 60, 84, 1.09, 73, 27, 3],
@@ -52,7 +52,7 @@ export default {
         [106, 77, 114, 1.07, 55, 51, 7]
       ];
 
-      var lineStyle = {
+      let lineStyle = {
         normal: {
           width: 1,
           opacity: 0.5
@@ -151,14 +151,7 @@ export default {
           }
         ]
       };
-      myChartPieLeft.setOption(option);
-      // -----------------------------------------------------------------
-      // 响应式变化
-      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
-      //侧边栏变化
-      if (sidebar) {
-        myChartPieLeft.resize();
-      }
+      this.chart.setOption(option);
     }
   },
   destroyed() {
diff --git a/src/main.js b/src/main.js
index 15712ba..0f009c7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,21 +1,26 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
-import dataV from "@jiaminghi/data-view";
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import dataV from '@jiaminghi/data-view';
 Vue.use(dataV);
 
-// 引入vue-awesome
-import Icon from "vue-awesome/components/Icon";
-import "vue-awesome/icons/index.js";
+// 按需引入vue-awesome图标
+import Icon from 'vue-awesome/components/Icon';
+import 'vue-awesome/icons/chart-bar.js';
+import 'vue-awesome/icons/chart-area.js';
+import 'vue-awesome/icons/chart-pie.js';
+import 'vue-awesome/icons/chart-line.js';
+import 'vue-awesome/icons/align-left.js';
+
 // 全局注册图标
-Vue.component("icon", Icon);
+Vue.component('icon', Icon);
 
 // 适配flex
-import "@/common/flexible.js";
+import '@/common/flexible.js';
 
 // 引入全局css
-import "./assets/scss/style.scss";
+import './assets/scss/style.scss';
 
 Vue.config.productionTip = false;
 
@@ -23,4 +28,4 @@ new Vue({
   router,
   store,
   render: (h) => h(App),
-}).$mount("#app");
+}).$mount('#app');
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..1fb622d
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,34 @@
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result;
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp;
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
+      }
+    }
+  };
+
+  return function(...args) {
+    context = this;
+    timestamp = +new Date();
+    const callNow = immediate && !timeout;
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+}
diff --git a/src/utils/resizeMixins.js b/src/utils/resizeMixins.js
new file mode 100644
index 0000000..8caae20
--- /dev/null
+++ b/src/utils/resizeMixins.js
@@ -0,0 +1,26 @@
+// 混入代码 resize-mixins.js
+import { debounce } from '@/utils/index';
+const resizeChartMethod = '$__resizeChartMethod';
+
+export default {
+  data() {
+    // 在组件内部将图表init的引用映射到chart属性上
+    return {
+      chart: null,
+    };
+  },
+  created() {
+    window.addEventListener('resize', this[resizeChartMethod], false);
+  },
+  beforeDestroy() {
+    window.removeEventListener('reisze', this[resizeChartMethod]);
+  },
+  methods: {
+    // 通过lodash的防抖函数来控制resize的频率
+    [resizeChartMethod]: debounce(function() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 100),
+  },
+};
diff --git a/src/views/index.vue b/src/views/index.vue
index 21152f5..ea4113c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -126,7 +126,7 @@ export default {
     cancelLoading() {
       setTimeout(() => {
         this.loading = false;
-      }, 2000);
+      }, 500);
     }
   }
 };