修改部分描述，与部分命名错误细节

Merge pull request !6 from 卡卡罗特/master

README.md

@@ -1,12 +1,15 @@
 ## 一、项目描述
 
-- [**React 版本请点击这里查看，全新界面超级好看！！！(o ﾟ v ﾟ)ノ**](https://gitee.com/MTrun/react-big-screen)
 - 一个基于 Vue、Datav、Echart 框架的 " **数据大屏项目** "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
+
+- [**Vue3 版本请点击这里查看，使用 Hooks+TypeScript 实现，全新内容等你探索!**](https://gitee.com/MTrun/vue-big-screen-plugin)
+- [**React 版本请点击这里查看，全新界面超级好看！！！**](https://gitee.com/MTrun/react-big-screen)
 - 项目需要全屏展示（按 F11）。
 - 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 **按需引入**。
 - 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
 - 项目环境：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。
-- 请拉取 master 分支的代码，其余是开发分支。
+- 请拉取 master 分支的代码，其余分支是开发分支。
+- Vue3 版本代码在新项目 vue-big-screen-plugin 开发当中，敬请期待~
 
 友情链接：
 
@@ -36,7 +39,7 @@
 
 ### 启动项目
 
-需要提前安装好 `nodejs` 与 `npm`,下载项目后在项目主目录下运行 `npm/cnpm install` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。
+需要提前安装好 `nodejs` 与 `yarn`,下载项目后在项目主目录下运行 `yarn` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。
 
 ### 封装组件渲染图表
 
@@ -158,7 +161,7 @@ data() {
 
 ### 屏幕适配
 
-本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
+本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点。
 
 ```js
 // flexible文件位置: `common/flexible.js`,修改部分如下

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "big-screen-vue-datav",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -14,15 +14,9 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.8.6",
+      "version": "7.12.7",
-      "resolved": "https://registry.npm.taobao.org/@babel/compat-data/download/@babel/compat-data-7.8.6.tgz",
+      "resolved": "http://npm.rongdasoft.com:7001/@babel/compat-data/download/@babel/compat-data-7.12.7.tgz",
-      "integrity": "sha1-fuqg36F+UMfZwIMlFe7gm1bwTjU=",
+      "integrity": "sha1-kym0eCp9a71+71fhGt35HuPvHkE="
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.8.5",
-        "invariant": "^2.2.4",
-        "semver": "^5.5.0"
-      }
     },
     "@babel/core": {
       "version": "7.8.7",

src/main.js

@@ -24,7 +24,11 @@ import './assets/scss/style.scss';
 
 
 //引入echart
+//4.x 引用方式
 import echarts from 'echarts'
+//5.x 引用方式为按需引用
+//希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
+//import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 
 Vue.config.productionTip = false;

src/views/centerLeft1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="centreLeft1">
+  <div id="centerLeft1">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="d-flex jc-center">
-        <CentreLeft1Chart />
+        <CenterLeft1Chart />
       </div>
       <!-- 4个主要的数据 -->
       <div class="bottom-data">
@@ -31,38 +31,10 @@
 </template>
 
 <script>
-import CentreLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
+import CenterLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
 export default {
   data() {
     return {
-      config: {
-        lineWidth: 30,
-        activeRadius: "80%",
-        radius: "75%",
-        activeTimeGap: 2000,
-        data: [
-          {
-            name: "周口",
-            value: 55
-          },
-          {
-            name: "南阳",
-            value: 120
-          },
-          {
-            name: "西峡",
-            value: 78
-          },
-          {
-            name: "驻马店",
-            value: 66
-          },
-          {
-            name: "新乡",
-            value: 80
-          }
-        ]
-      },
       numberData: [
         {
           number: {
@@ -100,7 +72,7 @@ export default {
     };
   },
   components: {
-    CentreLeft1Chart
+    CenterLeft1Chart
   },
   mounted() {
     this.changeTiming();
@@ -122,7 +94,7 @@ export default {
 </script>
 
 <style lang="scss">
-#centreLeft1 {
+#centerLeft1 {
   padding: 0.2rem;
   height: 5.125rem;
   min-width: 3.75rem;

src/views/centerLeft2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="centreLeft1">
+  <div id="centerLeft1">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
@@ -11,20 +11,20 @@
         </div>
       </div>
       <div class="d-flex jc-center">
-        <CentreLeft2Chart />
+        <CenterLeft2Chart />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import CentreLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
+import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
 export default {
   data() {
     return {};
   },
   components: {
-    CentreLeft2Chart
+    CenterLeft2Chart
   },
   mounted() {},
   methods: {}
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss">
-#centreLeft1 {
+#centerLeft1 {
   padding: 0.2rem;
   height: 5.125rem;
   min-width: 3.75rem;

src/views/centerRight1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="centreRight1">
+  <div id="centerRight1">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style lang="scss">
-#centreRight1 {
+#centerRight1 {
   padding: 0.2rem;
   height: 5.125rem;
   min-width: 3.75rem;

src/views/centerRight2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="centreRight2">
+  <div id="centerRight2">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
@@ -10,14 +10,14 @@
       <div class="d-flex jc-center body-box" style=" margin-top: 0;">
         <dv-capsule-chart :config="config" style="width: 100%;height:2rem" />
         <!-- ---------------------------------------- -->
-        <centreRight2Chart1 />
+        <centerRight2Chart1 />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import centreRight2Chart1 from "@/components/echart/centerRight/centerRightChart";
+import centerRight2Chart1 from "@/components/echart/centerRight/centerRightChart";
 
 export default {
   data() {
@@ -48,14 +48,14 @@ export default {
       }
     };
   },
-  components: { centreRight2Chart1 },
+  components: { centerRight2Chart1 },
   mounted() {},
   methods: {}
 };
 </script>
 
 <style lang="scss">
-#centreRight2 {
+#centerRight2 {
   padding: 0.0625rem;
   height: 5rem;
   min-width: 3.75rem;