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

Merge pull request !6 from 卡卡罗特/master
2021-09-17 06:54:56 +00:00
parent 4b58e04f9e 93161e661c
commit 46e82cfc72
8 changed files with 8605 additions and 60 deletions
@@ -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`,修改部分如下
@@ -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",
-      "resolved": "https://registry.npm.taobao.org/@babel/compat-data/download/@babel/compat-data-7.8.6.tgz",
-      "integrity": "sha1-fuqg36F+UMfZwIMlFe7gm1bwTjU=",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.8.5",
-        "invariant": "^2.2.4",
-        "semver": "^5.5.0"
-      }
+      "version": "7.12.7",
+      "resolved": "http://npm.rongdasoft.com:7001/@babel/compat-data/download/@babel/compat-data-7.12.7.tgz",
+      "integrity": "sha1-kym0eCp9a71+71fhGt35HuPvHkE="
    },
    "@babel/core": {
      "version": "7.8.7",
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;