From b964ff666ec4b0f31def2d1408d63bbea51b28a0 Mon Sep 17 00:00:00 2001
From: MTrunning <1262327911@qq.com>
Date: Wed, 18 Mar 2020 17:01:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=B1=82=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  39 ++
 package.json                                  |   3 +
 src/assets/scss/style.scss                    |  18 +-
 src/components/echart/center.vue              | 341 ++++++++++++++++++
 src/components/echart/centreLeft1Chart.vue    |  87 +++++
 src/components/echart/centreLeft2Chart.vue    | 208 +++++++++++
 .../centreRight2/centreRight2Chart1.vue       | 174 +++++++++
 .../echart/centreRightListChart.vue           |   0
 src/main.js                                   |   2 +-
 src/views/center.vue                          | 167 +++++++++
 src/views/centreLeft1.vue                     |  60 +--
 src/views/centreLeft2.vue                     |  57 +++
 src/views/centreRight1.vue                    |  73 ++++
 src/views/centreRight2.vue                    |  77 ++++
 src/views/index.vue                           |  48 ++-
 15 files changed, 1313 insertions(+), 41 deletions(-)
 create mode 100644 src/components/echart/center.vue
 create mode 100644 src/components/echart/centreLeft1Chart.vue
 create mode 100644 src/components/echart/centreLeft2Chart.vue
 create mode 100644 src/components/echart/centreRight2/centreRight2Chart1.vue
 create mode 100644 src/components/echart/centreRightListChart.vue
 create mode 100644 src/views/center.vue
 create mode 100644 src/views/centreLeft2.vue
 create mode 100644 src/views/centreRight1.vue
 create mode 100644 src/views/centreRight2.vue

diff --git a/package-lock.json b/package-lock.json
index 2df29c1..c7559f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1119,6 +1119,14 @@
       "integrity": "sha1-HBJhu+qhCoBVu8XYq4S3sq/IRqA=",
       "dev": true
     },
+    "@types/echarts": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-4.4.3.tgz",
+      "integrity": "sha512-HmDmg9hDJQC5KOpNOeVgcaBM+emDiduNyCCHVInDrVVfLDVPuK4fSSISy39kn1HqPa1hYDQ96FIGEhjRNGHhPA==",
+      "requires": {
+        "@types/zrender": "*"
+      }
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/@types/events/download/@types/events-3.0.0.tgz",
@@ -1160,6 +1168,11 @@
       "integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
       "dev": true
     },
+    "@types/zrender": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz",
+      "integrity": "sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w=="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
@@ -4073,6 +4086,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.6.0.tgz",
+      "integrity": "sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==",
+      "requires": {
+        "zrender": "4.2.0"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -7617,6 +7638,11 @@
       "dev": true,
       "optional": true
     },
+    "nanoid": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npm.taobao.org/nanomatch/download/nanomatch-1.2.13.tgz",
@@ -11125,6 +11151,14 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1583528900332&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz",
       "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
+    "vue-awesome": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-4.0.2.tgz",
+      "integrity": "sha512-TE9hVwyVrGnBetO/MJwZ/7qLO6Vgr/WrDtIA7vwNryoLdA2jfRcKRw29KacpU5xj3wzZhHfYJ2xJLxfirhmH5Q==",
+      "requires": {
+        "nanoid": "^2.1.6"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz?cache=0&sync_timestamp=1573306368916&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.0.0.tgz",
@@ -11869,6 +11903,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.2.0.tgz",
+      "integrity": "sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA=="
     }
   }
 }
diff --git a/package.json b/package.json
index 8460db4..1305ff8 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,11 @@
   },
   "dependencies": {
     "@jiaminghi/data-view": "^2.7.3",
+    "@types/echarts": "^4.4.3",
     "core-js": "^3.6.4",
+    "echarts": "^4.6.0",
     "vue": "^2.6.11",
+    "vue-awesome": "^4.0.2",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"
   },
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 883b919..b8f4a22 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -63,7 +63,7 @@ a {
 }
 
 .bg-color-black {
-  background-color: #0f1325;
+  background-color: rgba(19, 25, 47, .5);
 }
 
 .bg-color-blue {
@@ -79,6 +79,22 @@ a {
   }
 }
 
+.colorGrass {
+  color: #33CEA0;
+
+  &:hover {
+    color: #33CEA0 !important;
+  }
+}
+
+.colorRed {
+  color: #ff5722;
+
+  &:hover {
+    color: #ff5722 !important;
+  }
+}
+
 .colorText {
   color: #D3D6DD !important;
 
diff --git a/src/components/echart/center.vue b/src/components/echart/center.vue
new file mode 100644
index 0000000..824b087
--- /dev/null
+++ b/src/components/echart/center.vue
@@ -0,0 +1,341 @@
+<template>
+  <div>
+    <div id="centreLeft1Chart"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie(sidebar) {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("centreLeft1Chart")
+      );
+      //  ----------------------------------------------------------------
+      var value = 83;
+      let option = {
+        backgroundColor: "000",
+        title: {
+          text: `${value}分`,
+          subtext: "综合健康评分",
+          left: "center",
+          top: "center", //top待调整
+          textStyle: {
+            color: "#fff",
+            fontSize: 80,
+            fontFamily: "DINAlternate-Bold"
+          },
+          subtextStyle: {
+            color: "#ff",
+            fontSize: 35,
+            fontFamily: "PingFangSC-Regular",
+            top: "center"
+          },
+          itemGap: -4 //主副标题间距
+        },
+        xAxis: {
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+          // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+        },
+        yAxis: {
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        series: [
+          // 内圆
+          {
+            type: "pie",
+            radius: ["0", "50%"],
+            center: ["50%", "50%"],
+            z: 0,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#1147A1"
+                  },
+                  {
+                    offset: 0.5,
+                    color: "#423DB3"
+                  },
+                  {
+                    offset: 1,
+                    color: "#1147A1"
+                  }
+                ]),
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                }
+              }
+            },
+            label: {
+              normal: {
+                position: "center"
+              }
+            },
+            data: [100]
+          },
+          // 进度圈
+          {
+            type: "pie",
+            clockWise: true,
+            radius: ["60%", "55%"],
+            data: [
+              {
+                value: value,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 10,
+                    borderColor: {
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#7940FE" || "#00cefc" // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#2A69EC" || "#367bec" // 100% 处的颜色
+                        }
+                      ]
+                    },
+                    color: {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#7940FE" || "#00cefc" // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#2A69EC" || "#367bec" // 100% 处的颜色
+                        }
+                      ]
+                    },
+                    label: {
+                      show: false
+                    },
+                    labelLine: {
+                      show: false
+                    }
+                  }
+                }
+              },
+              {
+                name: "gap",
+                value: 100 - value,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: false
+                    },
+                    labelLine: {
+                      show: false
+                    },
+                    color: "rgba(0, 0, 0, 0)",
+                    borderColor: "rgba(0, 0, 0, 0)",
+                    borderWidth: 0
+                  }
+                }
+              }
+            ]
+          },
+          //刻度尺
+          {
+            // name: "白色圈刻度",
+            type: "gauge",
+            radius: "67%",
+            startAngle: 225, //刻度起始
+            endAngle: -134.8, //刻度结束
+            z: 4,
+            axisTick: {
+              show: true,
+              lineStyle: {
+                width: 2,
+                color: "rgba(1,244,255, 0.9)"
+              }
+            },
+            splitLine: {
+              length: 16, //刻度节点线长度
+              lineStyle: {
+                width: 2,
+                color: "rgba(1,244,255, 0.9)"
+              } //刻度节点线
+            },
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                opacity: 0
+              }
+            },
+            detail: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+                name: ""
+              }
+            ]
+          },
+          // 刻度圈
+          {
+            type: "pie",
+            radius: ["0%", "73%"],
+            center: ["50%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: false,
+                position: "center"
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  fontWeight: "bold"
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0.05,
+                      color: "rgba(32,36,107, 0.2)"
+                    },
+                    {
+                      offset: 0.5,
+                      color: "rgba(32,36,107,0.3)"
+                    },
+                    {
+                      offset: 0.95,
+                      color: "rgba(32,36,107, 0.2)"
+                    }
+                  ]
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              {
+                value: 3235
+              }
+            ]
+          },
+          //最外层圈
+          {
+            type: "pie",
+            radius: ["0%", "85%"],
+            center: ["50%", "50%"],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false,
+                position: "center"
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  fontWeight: "bold"
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0.05,
+                      color: "rgba(21,24,65, 0.2)"
+                    },
+                    {
+                      offset: 0.5,
+                      color: "rgba(21,24,65, 0.3)"
+                    },
+                    {
+                      offset: 0.95,
+                      color: "rgba(21,24,65, 0.2)"
+                    }
+                  ]
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              {
+                value: 3235
+              }
+            ]
+          }
+        ]
+      };
+      myChartPieLeft.setOption(option);
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+      //侧边栏变化
+      if (sidebar) {
+        myChartPieLeft.resize();
+      }
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/echart/centreLeft1Chart.vue b/src/components/echart/centreLeft1Chart.vue
new file mode 100644
index 0000000..4a5082f
--- /dev/null
+++ b/src/components/echart/centreLeft1Chart.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div id="centreLeft1Chart" style="width:260px; height: 220px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie(sidebar) {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("centreLeft1Chart")
+      );
+      //  ----------------------------------------------------------------
+
+      myChartPieLeft.setOption({
+        color: [
+          "#37a2da",
+          "#32c5e9",
+          "#9fe6b8",
+          "#ffdb5c",
+          "#ff9f7f",
+          "#fb7293",
+          "#e7bcf3",
+          "#8378ea"
+        ],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        toolbox: {
+          show: true
+        },
+        calculable: true,
+        legend: {
+          orient: "horizontal",
+          icon: "circle",
+          bottom: 0,
+          x: "center",
+          data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        series: [
+          {
+            name: "增值电信业务统计表",
+            type: "pie",
+            radius: [10, 60],
+            roseType: "area",
+            center: ["50%", "40%"],
+            data: [
+              { value: 10, name: "rose1" },
+              { value: 5, name: "rose2" },
+              { value: 15, name: "rose3" },
+              { value: 25, name: "rose4" },
+              { value: 20, name: "rose5" },
+              { value: 35, name: "rose6" }
+            ]
+          }
+        ]
+      });
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+      //侧边栏变化
+      if (sidebar) {
+        myChartPieLeft.resize();
+      }
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/echart/centreLeft2Chart.vue b/src/components/echart/centreLeft2Chart.vue
new file mode 100644
index 0000000..b2f6f64
--- /dev/null
+++ b/src/components/echart/centreLeft2Chart.vue
@@ -0,0 +1,208 @@
+<template>
+  <div>
+    <div id="centreLeft2Chart" style="width:330px; height: 370px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie(sidebar) {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("centreLeft2Chart")
+      );
+      //  ----------------------------------------------------------------
+
+      let option = {
+        angleAxis: {
+          interval: 1,
+          type: "category",
+          data: [
+            "there1",
+            "there2",
+            "there3",
+            "there4",
+            "there5",
+            "there6",
+            "there7",
+            "there8",
+            "there9",
+            "there10 "
+          ],
+          z: 10,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#00c7ff",
+              width: 1,
+              type: "solid"
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            show: true,
+            color: "#00c7ff",
+            margin: 8,
+            fontSize: 12
+          }
+        },
+        radiusAxis: {
+          min: 0,
+          max: 100,
+          interval: 20,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#00c7ff",
+              width: 1,
+              type: "solid"
+            }
+          },
+          axisLabel: {
+            formatter: "{value} %",
+            show: false,
+            padding: [0, 0, 20, 0],
+            color: "#00c7ff",
+            fontSize: 16
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#00c7ff",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        legend: {
+          show: true,
+          orient: "vartical",
+          top: "center",
+          bottom: "0%",
+          itemWidth: 16,
+          itemHeight: 8,
+          itemGap: 16,
+          textStyle: {
+            color: "#A3E2F4",
+            fontSize: 12,
+            fontWeight: 0
+          },
+          data: ["A"]
+        },
+        polar: {},
+        series: [
+          {
+            name: "A",
+            type: "bar",
+            radius: ["20%", "100%"],
+            data: [
+              {
+                value: 87,
+                itemStyle: {
+                  normal: {
+                    color: "#f54d4d"
+                  }
+                }
+              },
+              {
+                value: 80,
+                itemStyle: {
+                  normal: {
+                    color: "#f87544"
+                  }
+                }
+              },
+              {
+                value: 75,
+                itemStyle: {
+                  normal: {
+                    color: "#ffae00"
+                  }
+                }
+              },
+              {
+                value: 69,
+                itemStyle: {
+                  normal: {
+                    color: "#dcff00"
+                  }
+                }
+              },
+              {
+                value: 63,
+                itemStyle: {
+                  normal: {
+                    color: "#25d053"
+                  }
+                }
+              },
+              {
+                value: 54,
+                itemStyle: {
+                  normal: {
+                    color: "#01fff5"
+                  }
+                }
+              },
+              {
+                value: 47,
+                itemStyle: {
+                  normal: {
+                    color: "#007cff"
+                  }
+                }
+              },
+              {
+                value: 40,
+                itemStyle: {
+                  normal: {
+                    color: "#4245ff"
+                  }
+                }
+              },
+              {
+                value: 35,
+                itemStyle: {
+                  normal: {
+                    color: "#c32eff"
+                  }
+                }
+              },
+              {
+                value: 33,
+                itemStyle: {
+                  normal: {
+                    color: "#ff62e8"
+                  }
+                }
+              }
+            ],
+            coordinateSystem: "polar"
+          }
+        ]
+      };
+      myChartPieLeft.setOption(option);
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+      //侧边栏变化
+      if (sidebar) {
+        myChartPieLeft.resize();
+      }
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/echart/centreRight2/centreRight2Chart1.vue b/src/components/echart/centreRight2/centreRight2Chart1.vue
new file mode 100644
index 0000000..73c3fcf
--- /dev/null
+++ b/src/components/echart/centreRight2/centreRight2Chart1.vue
@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <div id="centreRight2Chart1" style="width:260px; height: 215px;">123</div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie(sidebar) {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("centreRight2Chart1")
+      );
+      //  ----------------------------------------------------------------
+      // Schema:
+      // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
+      var 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],
+        [42, 27, 43, 1, 53, 22, 25],
+        [154, 117, 157, 3.05, 92, 58, 26],
+        [234, 185, 230, 4.09, 123, 69, 27],
+        [160, 120, 186, 2.77, 91, 50, 28]
+      ];
+
+      var 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],
+        [146, 84, 139, 1.094, 40, 17, 25],
+        [113, 108, 137, 1.481, 48, 15, 26],
+        [81, 48, 62, 1.619, 26, 3, 27],
+        [56, 48, 68, 1.336, 37, 9, 28]
+      ];
+
+      var 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],
+        [109, 81, 121, 1.28, 68, 51, 4],
+        [106, 77, 114, 1.07, 55, 51, 5],
+        [109, 81, 121, 1.28, 68, 51, 6],
+        [106, 77, 114, 1.07, 55, 51, 7]
+      ];
+
+      var lineStyle = {
+        normal: {
+          width: 1,
+          opacity: 0.5
+        }
+      };
+
+      let option = {
+        radar: {
+          indicator: [
+            { name: "AQI", max: 300 },
+            { name: "PM2.5", max: 250 },
+            { name: "PM10", max: 300 },
+            { name: "CO", max: 5 },
+            { name: "NO2", max: 200 },
+            { name: "SO2", max: 100 }
+          ],
+          shape: "circle",
+          splitNumber: 5,
+          name: {
+            textStyle: {
+              color: "rgb(238, 197, 102)"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: [
+                "rgba(238, 197, 102, 0.1)",
+                "rgba(238, 197, 102, 0.2)",
+                "rgba(238, 197, 102, 0.4)",
+                "rgba(238, 197, 102, 0.6)",
+                "rgba(238, 197, 102, 0.8)",
+                "rgba(238, 197, 102, 1)"
+              ].reverse()
+            }
+          },
+          splitArea: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(238, 197, 102, 0.5)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "北京",
+            type: "radar",
+            lineStyle: lineStyle,
+            data: dataBJ,
+            symbol: "none",
+            itemStyle: {
+              normal: {
+                color: "#F9713C"
+              }
+            },
+            areaStyle: {
+              normal: {
+                opacity: 0.1
+              }
+            }
+          },
+          {
+            name: "上海",
+            type: "radar",
+            lineStyle: lineStyle,
+            data: dataSH,
+            symbol: "none",
+            itemStyle: {
+              normal: {
+                color: "#B3E4A1"
+              }
+            },
+            areaStyle: {
+              normal: {
+                opacity: 0.05
+              }
+            }
+          },
+          {
+            name: "广州",
+            type: "radar",
+            lineStyle: lineStyle,
+            data: dataGZ,
+            symbol: "none",
+            itemStyle: {
+              normal: {
+                color: "rgb(238, 197, 102)"
+              }
+            },
+            areaStyle: {
+              normal: {
+                opacity: 0.05
+              }
+            }
+          }
+        ]
+      };
+      myChartPieLeft.setOption(option);
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+      //侧边栏变化
+      if (sidebar) {
+        myChartPieLeft.resize();
+      }
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#centreRight2Chart1{
+  margin: 0 auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/echart/centreRightListChart.vue b/src/components/echart/centreRightListChart.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.js b/src/main.js
index f61d82b..6f94132 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,7 +8,7 @@ Vue.use(dataV)
 // 引入vue-awesome
 import Icon from 'vue-awesome/components/Icon'
 import 'vue-awesome/icons/index.js'
-// 全局注册
+// 全局注册图标
 Vue.component('icon', Icon)
 
 import './assets/scss/style.scss'
diff --git a/src/views/center.vue b/src/views/center.vue
new file mode 100644
index 0000000..e410275
--- /dev/null
+++ b/src/views/center.vue
@@ -0,0 +1,167 @@
+<template>
+  <div id="center">
+    <div class="up">
+      <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
+        <p class="ml-3 fs-xl">{{item.title}}</p>
+        <div>
+          <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
+        </div>
+      </div>
+    </div>
+    <div class="down">
+      <div class="ranking">
+        <dv-scroll-ranking-board :config="ranking"/>
+      </div>
+      <div class="percent">
+        <div class="item"> </div>
+        <div class="water">
+          <dv-water-level-pond :config="water" style="height: 125px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      titleItem: [
+        {
+          title: "今年累计构建次数",
+          number: {
+            number: [120],
+            toFixed: 1,
+            content: "{nt}"
+          }
+        },
+        {
+          title: "本月累计构建次数",
+          number: {
+            number: [18],
+            toFixed: 1,
+            content: "{nt}"
+          }
+        },
+        {
+          title: "今日累计构建次数",
+          number: {
+            number: [2],
+            toFixed: 1,
+            content: "{nt}"
+          }
+        },
+        {
+          title: "今年失败构建次数",
+          number: {
+            number: [14],
+            toFixed: 1,
+            content: "{nt}"
+          }
+        },
+        {
+          title: "今年成功构建次数",
+          number: {
+            number: [106],
+            toFixed: 1,
+            content: "{nt}"
+          }
+        },
+        {
+          title: "今年达标组件个数",
+          number: {
+            number: [100],
+            toFixed: 1,
+            content: "{nt}"
+          }
+        }
+      ],
+      ranking: {
+        data: [
+          {
+            name: "周口",
+            value: 55
+          },
+          {
+            name: "南阳",
+            value: 120
+          },
+          {
+            name: "西峡",
+            value: 78
+          },
+          {
+            name: "驻马店",
+            value: 66
+          },
+          {
+            name: "新乡",
+            value: 80
+          },
+          {
+            name: "新乡",
+            value: 80
+          },
+          {
+            name: "新乡",
+            value: 80
+          },
+          {
+            name: "新乡",
+            value: 80
+          }
+        ],
+        waitTime: 4000,
+        carousel: "page",
+        unit: "份"
+      },
+      water: {
+        data: [24, 45]
+      }
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 5px;
+      padding-top: 1rem;
+      margin-top: 0.5rem;
+      width: 32%;
+      height: 70px;
+    }
+  }
+  .down {
+    padding: 0.5rem;
+    padding-bottom: 0px;
+    width: 100%;
+    display: flex;
+    height: 250px;
+    justify-content: space-between;
+    .ranking {
+      width: 58%;
+    }
+    .percent {
+      width: 40%;
+      display: flex;
+      flex-direction: column;
+      .item {
+        width: 100%;
+        height: 125px;
+      }
+      .water {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/centreLeft1.vue b/src/views/centreLeft1.vue
index ab0fd4f..c90e566 100644
--- a/src/views/centreLeft1.vue
+++ b/src/views/centreLeft1.vue
@@ -1,34 +1,37 @@
 <template>
-  <div id="centreLeft1" class="bg-color-black">
-    <div class="d-flex">
-      <span style="color:#5cd9e8">
-        <icon name="chart-bar"></icon>
-      </span>
-      <div class="d-flex">
-        <span class="fs-xl text mx-2">构建通过率</span>
-        <dv-decoration-3 style="width:100px;height:20px; position:relative;top:-3px;" />
-      </div>
-    </div>
-    <div class="d-flex jc-center">
-      <dv-active-ring-chart class="chart-box" :config="config" />
-    </div>
-    <!-- 4个主要的数据 -->
-    <div class="bottom-data">
-      <div class="item-box" v-for="(item,index) in numberData" :key="index">
+  <div id="centreLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-bar"></icon>
+        </span>
         <div class="d-flex">
-          <span class="coin">￥</span>
-          <dv-digital-flop :config="item.number" style="width:200px;height:50px;" />
+          <span class="fs-xl text mx-2">构建通过率</span>
+          <dv-decoration-3 style="width:100px;height:20px; position:relative;top:-3px;" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <centreLeft1Chart />
+      </div>
+      <!-- 4个主要的数据 -->
+      <div class="bottom-data">
+        <div class="item-box" v-for="(item,index) in numberData" :key="index">
+          <div class="d-flex">
+            <span class="coin">￥</span>
+            <dv-digital-flop :config="item.number" style="width:200px;height:50px;" />
+          </div>
+          <p class="text" style="text-align: center;">
+            {{item.text}}
+            <span class="colorYellow">(件)</span>
+          </p>
         </div>
-        <p class="text" style="text-align: center;">
-          {{item.text}}
-          <span class="colorYellow">(件)</span>
-        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import centreLeft1Chart from "@/components/echart/centreLeft1Chart";
 export default {
   data() {
     return {
@@ -96,6 +99,9 @@ export default {
       ]
     };
   },
+  components: {
+    centreLeft1Chart
+  },
   mounted() {
     this.changeTiming();
   },
@@ -106,8 +112,8 @@ export default {
       }, 3000);
     },
     changeNumber() {
-      this.numberData.forEach(item => {
-        item.number.number[0] += 1;
+      this.numberData.forEach((item, index) => {
+        item.number.number[0] += ++index;
         item.number = { ...item.number };
       });
     }
@@ -118,9 +124,13 @@ export default {
 <style lang="scss">
 #centreLeft1 {
   padding: 1rem;
-  height: 400px;
+  height: 410px;
   min-width: 300px;
   border-radius: 5px;
+  .bg-color-black {
+    height: 385px;
+    border-radius: 10px;
+  }
   .text {
     color: #c3cbde;
   }
diff --git a/src/views/centreLeft2.vue b/src/views/centreLeft2.vue
new file mode 100644
index 0000000..789d42e
--- /dev/null
+++ b/src/views/centreLeft2.vue
@@ -0,0 +1,57 @@
+<template>
+  <div id="centreLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-pie"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">全国数据流通情况</span>
+          <dv-decoration-1 style="width:100px;height:20px; position:relative;top:-3px;" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <centreLeft2Chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import centreLeft2Chart from "@/components/echart/centreLeft2Chart"; 
+export default {
+  data() {
+    return {
+    };
+  },
+  components: {
+    centreLeft2Chart
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+#centreLeft1 {
+  padding: 1rem;
+  height: 410px;
+  min-width: 300px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: 385px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .chart-box {
+    margin-top: 1rem;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/centreRight1.vue b/src/views/centreRight1.vue
new file mode 100644
index 0000000..56e55a6
--- /dev/null
+++ b/src/views/centreRight1.vue
@@ -0,0 +1,73 @@
+<template>
+  <div id="centreRight1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-line"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">成功构建排行榜</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board :config="config" style="width:270px;height:360px" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        header: ["组件", "分支", "覆盖率"],
+        data: [
+          ["组件1", "dev-1", "<span  class='colorGrass'>↑75%</span>"],
+          ["组件2", "dev-2", "<span  class='colorRed'>↓33%</span>"],
+          ["组件3", "dev-3", "<span  class='colorGrass'>↑100%</span>"],
+          ["组件4", "rea-1", "<span  class='colorGrass'>↑94%</span>"],
+          ["组件5", "rea-2", "<span  class='colorGrass'>↑95%</span>"],
+          ["组件6", "fix-2", "<span  class='colorGrass'>↑63%</span>"],
+          ["组件7", "fix-4", "<span  class='colorGrass'>↑84%</span>"],
+          ["组件8", "fix-7", "<span  class='colorRed'>↓46%</span>"],
+          ["组件9", "dev-2", "<span  class='colorRed'>↓13%</span>"],
+          ["组件10", "dev-9", "<span  class='colorGrass'>↑76%</span>"]
+        ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: "#0f1325", //表头
+        oddRowBGC: "#0f1325", //奇数行
+        evenRowBGC: "#171c33", //偶数行
+        index: true,
+        columnWidth: [50],
+        align: ["center"]
+      }
+    };
+  },
+  components: {},
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+#centreRight1 {
+  padding: 1rem;
+  height: 410px;
+  min-width: 300px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: 385px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  
+}
+</style>
\ No newline at end of file
diff --git a/src/views/centreRight2.vue b/src/views/centreRight2.vue
new file mode 100644
index 0000000..0268908
--- /dev/null
+++ b/src/views/centreRight2.vue
@@ -0,0 +1,77 @@
+<template>
+  <div id="centreRight2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+         <span style="color:#5cd9e8">
+          <icon name="align-left"></icon>
+        </span>
+        <span class="fs-xl text mx-2">产品销售渠道分析</span>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-capsule-chart :config="config" style="width: 100%;height:160px" />
+        <!-- ---------------------------------------- -->
+        <centreRight2Chart1></centreRight2Chart1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
+
+export default {
+  data() {
+    return {
+      config: {
+        data: [
+          {
+            name: "南阳",
+            value: 167
+          },
+          {
+            name: "周口",
+            value: 67
+          },
+          {
+            name: "漯河",
+            value: 123
+          },
+          {
+            name: "郑州",
+            value: 55
+          },
+          {
+            name: "西峡",
+            value: 98
+          }
+        ]
+      }
+    };
+  },
+  components: { centreRight2Chart1 },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+#centreRight2 {
+  padding: 5px;
+  height: 400px;
+  min-width: 300px;
+  border-radius: 5px;
+  .bg-color-black {
+    padding: 5px;
+    height: 405px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    flex-direction: column;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 91a1830..859e97c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -26,23 +26,26 @@
         </div>
 
         <!-- 第二行 -->
-        <div class="d-flex jc-between mt-2 px-2">
+        <div class="d-flex jc-between px-2">
           <div class="d-flex" style="width: 40%">
-            <div class="react-right bg-color-black ml-4" style="width: 500px; ">
+            <div
+              class="react-right ml-4"
+              style="width: 500px; text-align: left;background-color: #0f1325;"
+            >
               <span class="react-before"></span>
-              <span class="text">构建数据分析</span>
+              <span class="text fw-b">构建数据分析</span>
             </div>
-            <div class="react-right bg-color-black ml-3">
-              <span class="text colorBlue">构建数据分析</span>
+            <div class="react-right ml-3" style="background-color: #0f1325;">
+              <span class="text colorBlue fw-b">构建数据分析</span>
             </div>
           </div>
           <div style="width: 40%" class="d-flex">
-            <div class="react-left bg-color-black bg-color-blue mr-3">
+            <div class="react-left bg-color-blue mr-3">
               <span class="text fw-b">构建数据分析</span>
             </div>
-            <div class="react-left bg-color-black mr-4" style="width: 500px;">
+            <div class="react-left mr-4" style="width: 500px; background-color: #0f1325;">
               <span class="react-after"></span>
-              <span class="text colorBlue">2020年03月16日</span>
+              <span class="text">2020年03月16日 周一 12:00</span>
             </div>
           </div>
         </div>
@@ -55,11 +58,24 @@
                 <centreLeft1 />
               </dv-border-box-12>
             </div>
-            <div></div>
-            <div class="bg-color-blue"></div>
-            <div></div>
-            <div class="bg-color-blue"></div>
-            <div></div>
+            <div>
+              <dv-border-box-12>
+                <centreLeft2 />
+              </dv-border-box-12>
+            </div>
+            <!-- 中间 -->
+            <div>
+              <center/>
+            </div>
+            <!-- 中间 -->
+            <div>
+              <centreRight2 />
+            </div>
+            <div>
+              <dv-border-box-13>
+                <centreRight1 />
+              </dv-border-box-13>
+            </div>
           </div>
 
           <!-- 第四行数据 -->
@@ -75,13 +91,17 @@
 
 <script>
 import centreLeft1 from "./centreLeft1";
+import centreLeft2 from "./centreLeft2";
+import centreRight1 from "./centreRight1";
+import centreRight2 from "./centreRight2";
+import center from "./center";
 export default {
   data() {
     return {
       loading: false
     };
   },
-  components: { centreLeft1 },
+  components: { centreLeft1, centreLeft2, centreRight1, centreRight2, center },
   mounted() {
     this.cancelLoading();
   },