实现组件复用功能，更新说明文档，修改界面的部分细节

README.md

@@ -30,7 +30,10 @@
 
 ## 三、使用介绍
 
-1. **如何请求数据**
+1. **如何启动项目**
+   需要提前安装好`nodejs`与`npm`,下载项目后在项目主目录下运行`npm/cnpm install`拉取依赖包，然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。
+
+2. **如何请求数据**
    现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。
 
 - axios 的 main.js 配置参考范例（因人而异）
@@ -42,7 +45,7 @@ import axios from "axios";
 Vue.prototype.$http = axios.create({
   //设置20秒超时时间
   timeout: 20000,
-  baseURL: "http://172.0.0.1:80080" //这里写后端地址
+  baseURL: "http://172.0.0.1:80080", //这里写后端地址
 });
 ```
 
@@ -67,7 +70,7 @@ export default {
  }
 ```
 
-2. **如何动态渲染图表**
+3. **如何动态渲染图表**
    在`components/echart`下的文件，比如`drawPie()`是渲染函数，`echartData`是需要动态渲染的数据，当外界通过`props`传入新数据，我们可以使用`watch()`方法去监听，一但数据变化就调用`this.drawPie()`并触发内部的`.setOption`函数，重新渲染一次图表。
 
 ```js
@@ -88,7 +91,65 @@ methods: {
  }
 ```
 
-3. **如何更换边框**
+4. **如何复用图表组件**
+   因为 Echart 图表是根据`id/class`去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的`任务通过率与任务达标率`组件就是采用复用的方式。
+
+如：在调用处`views/center.vue`里去定义好数据并传入组件（项目里的所有`id`都不能重复!!!）
+
+```js
+//组件调用
+<span>今日任务通过率</span>
+<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
+
+<span>今日任务达标率</span>
+<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
+
+...
+import centerChart from "@/components/echart/center/centerChartRate";
+
+data() {
+  return {
+    rate: [
+      {
+        id: "centerRate1",
+        tips: 60,
+        ...
+      },
+      {
+        id: "centerRate2",
+        tips: 40,
+        colorData: {
+          ...
+        }
+      }
+    ]
+  }
+}
+```
+
+在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
+
+```js
+props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    ...
+    colorObj: {
+      type: Object,
+      default: function() {
+        return {
+          //具体去代码里看
+          }
+        };
+      }
+    }
+  },
+```
+
+5. **如何更换边框**
    边框是使用了 DataV 自带的组件，如：
 
 ```html
@@ -97,9 +158,17 @@ methods: {
 
 只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
 
-4. **如何更换图表**
+6. **如何更换图表**
-   直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
+   直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
+
+7. **屏幕比例不对怎么办**
+   其实 dataV 插件已经对屏幕的比例做了一定程度的适配，但肯定有比例不合适的屏幕，所以可能需要自己去写 js 代码，让项目按照比例缩放，这也是通用的适配方法。
 
 ## 四、更新情况
 
-如果大家有意见请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
+1. 增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
+2. 修复了头部右侧的图案条不对称的问题
+
+## 五、其余
+
+这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！

src/components/echart/center/centerChart2.vue

@@ -1,79 +0,0 @@
-<template>
-  <div>
-    <div id="centerChart2" style="width:120px;height:100px;"></div>
-  </div>
-</template>
-
-<script>
-const echarts = require("echarts");
-export default {
-  data() {
-    return {};
-  },
-  mounted() {
-    this.drawPie();
-  },
-  methods: {
-    drawPie() {
-      // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(
-        document.getElementById("centerChart2")
-      );
-      //  ----------------------------------------------------------------
-      let tips = 40;
-      let option = {
-        title: [
-          {
-            text: tips * 1 + "%",
-            x: "center",
-            y: "center",
-            textStyle: {
-              color: "#67e0e3",
-              fontSize: 16
-            }
-          }
-        ],
-        series: [
-          {
-            type: "pie",
-            radius: ["75%", "80%"],
-            center: ["50%", "50%"],
-            hoverAnimation: false,
-            color: ["#f3ffb070", "transparent"],
-            label: {
-              normal: {
-                show: false
-              }
-            },
-            data: [
-              {
-                value: tips,
-                itemStyle: {
-                  normal: {
-                    color: "#ff9800",
-                    shadowBlur: 10,
-                    shadowColor: "#97e2f5"
-                  }
-                }
-              },
-              {
-                value: 100 - tips
-              }
-            ]
-          }
-        ]
-      };
-      myChartPieLeft.setOption(option);
-      // -----------------------------------------------------------------
-      // 响应式变化
-      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
-    }
-  },
-  destroyed() {
-    window.onresize = null;
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/echart/center/centerChartRate.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="centerChart1" style="width:120px;height:100px;"></div>
+    <div :id="id" style="width:120px;height:100px;"></div>
   </div>
 </template>
 
@@ -13,14 +13,39 @@ export default {
   mounted() {
     this.drawPie();
   },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function() {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
   methods: {
     drawPie() {
       // 基于准备好的dom，初始化echarts实例
-      let myChartPieLeft = echarts.init(
+      let myChartPieLeft = echarts.init(document.getElementById(this.id));
-        document.getElementById("centerChart1")
-      );
       //  ----------------------------------------------------------------
-      let tips = 60;
+      let tips = this.tips;
       let option = {
         title: [
           {
@@ -28,7 +53,7 @@ export default {
             x: "center",
             y: "center",
             textStyle: {
-              color: "#3fc0fb",
+              color: this.colorObj.textStyle,
               fontSize: 16
             }
           }
@@ -39,7 +64,7 @@ export default {
             radius: ["75%", "80%"],
             center: ["50%", "50%"],
             hoverAnimation: false,
-            color: ["#00bcd44a", "transparent"],
+            color: this.colorObj.series.color,
             label: {
               normal: {
                 show: false
@@ -50,9 +75,9 @@ export default {
                 value: tips,
                 itemStyle: {
                   normal: {
-                    color: "#03a9f4",
+                    color: this.colorObj.series.dataColor.normal,
                     shadowBlur: 10,
-                    shadowColor: "#97e2f5"
+                    shadowColor: this.colorObj.series.dataColor.shadowColor
                   }
                 }
               },

src/views/center.vue

@@ -19,11 +19,11 @@
       <div class="percent">
         <div class="item bg-color-black">
           <span>今日任务通过率</span>
-          <centerChart1 />
+          <centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
         </div>
         <div class="item bg-color-black">
           <span>今日任务达标率</span>
-          <centerChart2 />
+          <centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
         </div>
         <div class="water">
           <dv-water-level-pond :config="water" style="height: 120px" />
@@ -34,8 +34,7 @@
 </template>
 
 <script>
-import centerChart1 from "@/components/echart/center/centerChart1";
+import centerChart from "@/components/echart/center/centerChartRate";
-import centerChart2 from "@/components/echart/center/centerChart2";
 
 export default {
   data() {
@@ -131,15 +130,47 @@ export default {
       },
       water: {
         data: [24, 45],
-        shape: 'roundRect',
+        shape: "roundRect",
-        formatter:'{value}%',
+        formatter: "{value}%",
         waveNum: 3
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+        {
+          id: "centerRate1",
+          tips: 60,
+          colorData: {
+            textStyle: "#3fc0fb",
+            series: {
+              color: ["#00bcd44a", "transparent"],
+              dataColor: {
+                normal: "#03a9f4",
+                shadowColor: "#97e2f5"
               }
+            }
+          }
+        },
+        {
+          id: "centerRate2",
+          tips: 40,
+          colorData: {
+            textStyle: "#67e0e3",
+            series: {
+              color: ["#faf3a378", "transparent"],
+              dataColor: {
+                normal: "#ff9800",
+                shadowColor: "#fcebad"
+              }
+            }
+          }
+        }
+      ]
     };
   },
   components: {
-    centerChart1,
+    centerChart
-    centerChart2
+    // centerChart1,
+    // centerChart2
   }
 };
 </script>

src/views/centreLeft2.vue

@@ -6,7 +6,7 @@
           <icon name="chart-pie"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">全国数据流通情况</span>
+          <span class="fs-xl text mx-2">数据情况雷达图</span>
           <dv-decoration-1 style="width:100px;height:20px; position:relative;top:-3px;" />
         </div>
       </div>

src/views/index.vue

@@ -22,7 +22,7 @@
               style="width:200px;height:50px;"
             />
           </div>
-          <dv-decoration-10 style="width:33.3%;height:5px;" />
+          <dv-decoration-10 style="width:33.3%;height:5px; transform: rotateY(180deg);" />
         </div>
 
         <!-- 第二行 -->
@@ -41,7 +41,7 @@
           </div>
           <div style="width: 40%" class="d-flex">
             <div class="react-left bg-color-blue mr-3">
-              <span class="text fw-b">数据分析3</span>
+              <span class="text fw-b">vue-big-screen</span>
             </div>
             <div
               class="react-left mr-4"