5 年之前 · fac43634a2
--- a/package-lock.json
+++ b/package-lock.json
@@ -3490,6 +3490,11 @@
 
															         }
														
 
															       }
														
 
															     },
														
 
															+    "claygl": {
														
 
															+      "version": "1.3.0",
														
 
															+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
														
 
															+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
														
 
															+    },
														
 
															     "clean-css": {
														
 
															       "version": "4.2.3",
														
 
															       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
														
@@ -4797,6 +4802,15 @@
 
															         "safer-buffer": "^2.1.0"
														
 
															       }
														
 
															     },
														
 
															+    "echarts-gl": {
														
 
															+      "version": "1.1.1",
														
 
															+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-1.1.1.tgz",
														
 
															+      "integrity": "sha512-cRSTU9H+Ay+qCUFowm+2XcxYqCfi/OLK805NISeJunKgJa5p+7p7tnHZoI0qKebjtHu8VbFSOBk9UvWZ01adng==",
														
 
															+      "requires": {
														
 
															+        "claygl": "^1.2.1",
														
 
															+        "zrender": "^4.0.4"
														
 
															+      }
														
 
															+    },
														
 
															     "ee-first": {
														
 
															       "version": "1.1.1",
														
 
															       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
														
@@ -11895,6 +11909,12 @@
 
															       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
														
 
															       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
														
 
															     },
														
 
															+    "vue-count-to": {
														
 
															+      "version": "1.0.13",
														
 
															+      "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",
														
 
															+      "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ==",
														
 
															+      "dev": true
														
 
															+    },
														
 
															     "vue-eslint-parser": {
														
 
															       "version": "7.0.0",
														
 
															       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
														
@@ -12748,6 +12768,11 @@
 
															           "dev": true
														
 
															         }
														
 
															       }
														
 
															+    },
														
 
															+    "zrender": {
														
 
															+      "version": "4.3.0",
														
 
															+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.0.tgz",
														
 
															+      "integrity": "sha512-Dii6j2bDsPkxQayuVf2DXJeruIB/mKVxxcGRZQ9GExiBd4c3w7+oBuvo1O/JGHeFeA1nCmSDVDs/S7yKZG1nrA=="
														
 
															     }
														
 
															   }
														
 
															 }
														
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
 
															   },
														
 
															   "dependencies": {
														
 
															     "core-js": "^3.6.4",
														
 
															+    "echarts-gl": "^1.1.1",
														
 
															     "vue": "^2.6.11",
														
 
															     "vue-router": "^3.1.6",
														
 
															     "vuex": "^3.2.0"
														
@@ -22,6 +23,7 @@
 
															     "eslint-plugin-vue": "^6.2.2",
														
 
															     "node-sass": "^4.13.1",
														
 
															     "sass-loader": "^8.0.2",
														
 
															+    "vue-count-to": "^1.0.13",
														
 
															     "vue-particles": "^1.0.9",
														
 
															     "vue-template-compiler": "^2.6.11"
														
 
															   },
														
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
 
															   <body>
														
 
															     <script src="//cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
														
 
															     <script src="//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
														
 
															+    <!-- <script src="//www.echartsjs.com/zh/dist/echarts-gl.min.js"></script> -->
														
 
															     <script src="//cdn.bootcdn.net/ajax/libs/axios/0.19.0/axios.min.js"></script>
														
 
															     <noscript>
														
 
															       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
														
--- a/src/assets/img/back_chart.png
+++ b/src/assets/img/back_chart.png
--- a/src/assets/img/bk_circle.png
+++ b/src/assets/img/bk_circle.png
--- a/src/assets/img/bk_circle1.png
+++ b/src/assets/img/bk_circle1.png
--- a/src/assets/img/bk_circle2.png
+++ b/src/assets/img/bk_circle2.png
--- a/src/assets/img/cir-1.png
+++ b/src/assets/img/cir-1.png
--- a/src/assets/img/cir-2.png
+++ b/src/assets/img/cir-2.png
--- a/src/assets/img/dynamic/info-1-0.png
+++ b/src/assets/img/dynamic/info-1-0.png
--- a/src/assets/img/dynamic/info-1-1.png
+++ b/src/assets/img/dynamic/info-1-1.png
--- a/src/assets/img/dynamic/info-1-2.png
+++ b/src/assets/img/dynamic/info-1-2.png
--- a/src/assets/img/dynamic/info-1-3.png
+++ b/src/assets/img/dynamic/info-1-3.png
--- a/src/assets/img/dynamic/info-1-4.png
+++ b/src/assets/img/dynamic/info-1-4.png
--- a/src/assets/img/dynamic/info-bg-01.png
+++ b/src/assets/img/dynamic/info-bg-01.png
--- a/src/assets/img/dynamic/info-bg-02.png
+++ b/src/assets/img/dynamic/info-bg-02.png
--- a/src/assets/img/dynamic/info-bg-03.png
+++ b/src/assets/img/dynamic/info-bg-03.png
--- a/src/assets/img/dynamic/info-bg-04.png
+++ b/src/assets/img/dynamic/info-bg-04.png
--- a/src/assets/img/dynamic/info-icon-1.png
+++ b/src/assets/img/dynamic/info-icon-1.png
--- a/src/assets/img/dynamic/info-icon-2.png
+++ b/src/assets/img/dynamic/info-icon-2.png
--- a/src/assets/img/dynamic/info-icon-3.png
+++ b/src/assets/img/dynamic/info-icon-3.png
--- a/src/assets/img/dynamic/info-icon-4.png
+++ b/src/assets/img/dynamic/info-icon-4.png
--- a/src/assets/img/dynamic/info-line-01.png
+++ b/src/assets/img/dynamic/info-line-01.png
--- a/src/assets/img/dynamic/info-line-02.png
+++ b/src/assets/img/dynamic/info-line-02.png
--- a/src/assets/img/icon_04.png
+++ b/src/assets/img/icon_04.png
--- a/src/assets/img/icon_05.png
+++ b/src/assets/img/icon_05.png
--- a/src/assets/img/icon_circle1.png
+++ b/src/assets/img/icon_circle1.png
--- a/src/assets/img/icon_circle2.png
+++ b/src/assets/img/icon_circle2.png
--- a/src/assets/img/line-fs.png
+++ b/src/assets/img/line-fs.png
--- a/src/assets/img/online.png
+++ b/src/assets/img/online.png
--- a/src/assets/img/pd-main-left-bg-2.png
+++ b/src/assets/img/pd-main-left-bg-2.png
--- a/src/assets/img/pd-main-left-bg-tree.png
+++ b/src/assets/img/pd-main-left-bg-tree.png
--- a/src/assets/img/person-1.png
+++ b/src/assets/img/person-1.png
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -110,4 +110,112 @@
 
															     }
														
 
															   }
														
 
															+}
														
 
															+
														
 
															+
														
 
															+@font-face {
														
 
															+    font-family: 'DIGITALDREAMFAT';
														
 
															+    /*src: url('./fonts/DIGITALDREAMFAT.eot');*/
														
 
															+    /*src: url('./fonts/DIGITALDREAMFAT.eot') format('embedded-opentype'),*/
														
 
															+    src: url('./fonts/DIGITALDREAMFAT.woff2') format('woff2'),
														
 
															+    url('./fonts/DIGITALDREAMFAT.woff') format('woff'),
														
 
															+    url('./fonts/DIGITALDREAMFAT.ttf') format('truetype');
														
 
															+    /*url('./fonts/DIGITALDREAMFAT.svg#DIGITALDREAMFAT') format('svg');*/
														
 
															+}
														
 
															+.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {
														
 
															+  display: inline-block;
														
 
															+  vertical-align: middle;
														
 
															+  *vertical-align: auto;
														
 
															+  *zoom: 1;
														
 
															+  *display: inline;
														
 
															+  position: relative;
														
 
															+}
														
 
															+.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit {
														
 
															+  display: inline-block;
														
 
															+  vertical-align: middle;
														
 
															+  *vertical-align: auto;
														
 
															+  *zoom: 1;
														
 
															+  *display: inline;
														
 
															+  position: relative;
														
 
															+}
														
 
															+.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer {
														
 
															+  display: inline-block;
														
 
															+  vertical-align: middle;
														
 
															+  *vertical-align: auto;
														
 
															+  *zoom: 1;
														
 
															+  *display: inline;
														
 
															+  visibility: hidden;
														
 
															+}
														
 
															+.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-inner {
														
 
															+  text-align: left;
														
 
															+  display: block;
														
 
															+  position: absolute;
														
 
															+  top: 0;
														
 
															+  left: 0;
														
 
															+  right: 0;
														
 
															+  bottom: 0;
														
 
															+  /*overflow: hidden;*/
														
 
															+}
														
 
															+.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon {
														
 
															+  display: block;
														
 
															+}
														
 
															+.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon-inner {
														
 
															+  display: block;
														
 
															+  -webkit-backface-visibility: hidden;
														
 
															+}
														
 
															+.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value {
														
 
															+  display: block;
														
 
															+  -webkit-transform: translateZ(0);
														
 
															+}
														
 
															+.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value.odometer-last-value {
														
 
															+  position: absolute;
														
 
															+}
														
 
															+.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up .odometer-ribbon-inner {
														
 
															+  -webkit-transition: -webkit-transform 2s;
														
 
															+  -moz-transition: -moz-transform 2s;
														
 
															+  -ms-transition: -ms-transform 2s;
														
 
															+  -o-transition: -o-transform 2s;
														
 
															+  transition: transform 2s;
														
 
															+}
														
 
															+.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
														
 
															+  -webkit-transform: translateY(-100%);
														
 
															+  -moz-transform: translateY(-100%);
														
 
															+  -ms-transform: translateY(-100%);
														
 
															+  -o-transform: translateY(-100%);
														
 
															+  transform: translateY(-100%);
														
 
															+}
														
 
															+.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down .odometer-ribbon-inner {
														
 
															+  -webkit-transform: translateY(-100%);
														
 
															+  -moz-transform: translateY(-100%);
														
 
															+  -ms-transform: translateY(-100%);
														
 
															+  -o-transform: translateY(-100%);
														
 
															+  transform: translateY(-100%);
														
 
															+}
														
 
															+.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
														
 
															+  -webkit-transition: -webkit-transform 2s;
														
 
															+  -moz-transition: -moz-transform 2s;
														
 
															+  -ms-transition: -ms-transform 2s;
														
 
															+  -o-transition: -o-transform 2s;
														
 
															+  transition: transform 2s;
														
 
															+  -webkit-transform: translateY(0);
														
 
															+  -moz-transform: translateY(0);
														
 
															+  -ms-transform: translateY(0);
														
 
															+  -o-transform: translateY(0);
														
 
															+  transform: translateY(0);
														
 
															+}
														
 
															+
														
 
															+.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {
														
 
															+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhiZjVhNSIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
														
 
															+  background-size: 100%;
														
 
															+  background-image: -moz-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
														
 
															+  background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000);
														
 
															+  background-image: radial-gradient(rgba(139, 245, 165, 0.4), #000000);
														
 
															+  background-color: #000;
														
 
															+  font-family: "DIGITALDREAMFAT";
														
 
															+  padding: 0 0.2em;
														
 
															+  line-height: 1.1em;
														
 
															+  color: #8bf5a5;
														
 
															+}
														
 
															+.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-digital .odometer-digit + .odometer-digit {
														
 
															+  margin-left: 0.1em;
														
 
															 }
														
--- a/src/assets/styles/fonts/DIGITALDREAMFAT.ttf
+++ b/src/assets/styles/fonts/DIGITALDREAMFAT.ttf
--- a/src/assets/styles/fonts/DIGITALDREAMFAT.woff
+++ b/src/assets/styles/fonts/DIGITALDREAMFAT.woff
--- a/src/assets/styles/fonts/DIGITALDREAMFAT.woff2
+++ b/src/assets/styles/fonts/DIGITALDREAMFAT.woff2
--- a/src/components/bar3d/index.vue
+++ b/src/components/bar3d/index.vue
@@ -0,0 +1,192 @@
 
															+<!--
														
 
															+ 描述: 3D立体柱状图
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-04-18
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container trigle">
														
 
															+    <div class="bar bar-img"></div>
														
 
															+    <div class="bar bar-img1"></div>
														
 
															+    <div class="bar bar-img2"></div>
														
 
															+
														
 
															+    <div class="chartsdom" id="chart_3d"></div>
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+import 'echarts-gl'
														
 
															+
														
 
															+export default {
														
 
															+  name: "bar3d",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      option: null
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    this.getEchart();
														
 
															+  },
														
 
															+  methods: {
														
 
															+    getEchart() {
														
 
															+      let myChart = echarts.init(document.getElementById('chart_3d'));
														
 
															+      let xData = ['20-25','25-30','30-35','35-40','40-45','45-50'];
														
 
															+      let days = ['1', '2', '3', '4', '5', '6'];
														
 
															+      let sex = ['女','男'];
														
 
															+      let data = [
														
 
															+        [0, 0, 3, sex[0], xData[0], 500, 25],
														
 
															+        [0, 1, 2.5, sex[0], xData[3], 1000, 35],
														
 
															+        [0, 2, 1.5, sex[1], xData[4], 3000, 5],
														
 
															+        [0, 3, 1, sex[1], xData[1], 300, 15],
														
 
															+        [0, 4, 2, sex[0], xData[2], 500, 55],
														
 
															+        [0, 5, 3, sex[0], xData[3], 1500, 45],
														
 
															+
														
 
															+        [1, 5, 6, sex[1], xData[0], 300, 25],
														
 
															+        [1, 1, 4, sex[0], xData[1], 500, 22],
														
 
															+        [1, 2, 2, sex[0], xData[2], 1500, 38],
														
 
															+        [1, 3, 1.5, sex[1], xData[3], 2500, 25],
														
 
															+        [1, 4, 3, sex[0], xData[4], 3500, 49],
														
 
															+        [1, 0, 4, sex[1], xData[5], 5500, 15],
														
 
															+
														
 
															+        [2, 2, 3, sex[1], xData[0], 300, 25],
														
 
															+        [2, 1, 2, sex[0], xData[4], 1300, 25],
														
 
															+        [2, 2, 5, sex[0], xData[2], 900, 25],
														
 
															+        [2, 5, 1, sex[1], xData[3], 2000, 25],
														
 
															+        [2, 0, 3, sex[1], xData[1], 2300, 25],
														
 
															+        [2, 0, 10, sex[1], xData[5], 3500, 25],
														
 
															+
														
 
															+        [3, 2, 3, sex[0], xData[5], 500, 35],
														
 
															+        [3, 3, 2, sex[0], xData[4], 2300, 55],
														
 
															+        [3, 2, 1, sex[1], xData[3], 3300, 15],
														
 
															+        [3, 5, 5, sex[1], xData[2], 500, 10],
														
 
															+        [3, 1, 2, sex[1], xData[1], 1000, 35],
														
 
															+        [3, 0, 1, sex[0], xData[0], 300, 45],
														
 
															+
														
 
															+        [4, 2, 3, sex[1], xData[1], 600, 25],
														
 
															+        [4, 0, 5, sex[0], xData[0], 500, 15],
														
 
															+        [4, 1, 3.5, sex[1], xData[3], 4000, 5],
														
 
															+        [4, 4, 7, sex[0], xData[0], 300, 75],
														
 
															+        [4, 1, 0, sex[1], xData[5], 3000, 85],
														
 
															+        [3, 1, 3, sex[0], xData[2], 2500, 65],
														
 
															+
														
 
															+        [5, 2, 3, sex[0], xData[2], 500, 15],
														
 
															+        [5, 1, 2, sex[1], xData[3], 3300, 52],
														
 
															+        [5, 1, 5, sex[0], xData[4], 1000, 88],
														
 
															+        [5, 5, 8, sex[1], xData[0], 200, 12],
														
 
															+        [5, 2, 7, sex[0], xData[0], 300, 45],
														
 
															+        [3, 2, 2, sex[1], xData[1], 5000, 51]
														
 
															+      ];
														
 
															+
														
 
															+      this.option = {
														
 
															+        tooltip: {
														
 
															+          borderColor: '#8a704e',
														
 
															+          borderWidth: 1,
														
 
															+          padding: 15,
														
 
															+          formatter: (params) => {
														
 
															+            let html = `${params.seriesName} <br> <span style="color: #fff;">性别：${params.value[3]} <br> 年龄：${params.value[4]}岁<br> 贷款金额：${params.value[5]} <br> 总人数：${params.value[6]}</span>`;
														
 
															+            return html;
														
 
															+          },
														
 
															+          textStyle: {
														
 
															+            color: '#8a704e',
														
 
															+            fontSize: 16
														
 
															+          }
														
 
															+        },
														
 
															+        xAxis3D: {
														
 
															+          type: 'category',
														
 
															+          data: xData
														
 
															+        },
														
 
															+        yAxis3D: {
														
 
															+          type: 'category',
														
 
															+          data: days
														
 
															+        },
														
 
															+        zAxis3D: {
														
 
															+          type: 'value'
														
 
															+        },
														
 
															+        grid3D: {
														
 
															+          show: false,
														
 
															+          boxWidth: 160,
														
 
															+          boxDepth: 80,
														
 
															+          viewControl: {
														
 
															+            alpha: 10,
														
 
															+            beta: 15
														
 
															+          }
														
 
															+        },
														
 
															+        series: [{
														
 
															+          type: 'bar3D',
														
 
															+          name: '当前值',
														
 
															+          data: data.map((item) => {
														
 
															+            return {
														
 
															+              value: [item[1], item[0], item[2], item[3], item[4], item[5], item[6]],
														
 
															+            }
														
 
															+          }),
														
 
															+          shading: 'lambert',
														
 
															+          label: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          itemStyle: {
														
 
															+            color: '#0084ff',
														
 
															+            opacity: 0.8
														
 
															+          },
														
 
															+          emphasis: {
														
 
															+            label: {
														
 
															+              show: false
														
 
															+            },
														
 
															+            itemStyle: {
														
 
															+              color: '#0084ff'
														
 
															+            }
														
 
															+          }
														
 
															+        }]
														
 
															+      }
														
 
															+
														
 
															+      myChart.setOption(this.option, true);
														
 
															+
														
 
															+      window.addEventListener('resize', () => {
														
 
															+        myChart.resize();
														
 
															+      });
														
 
															+    }
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.trigle {
														
 
															+  left: 644px;
														
 
															+  top: 2409px;
														
 
															+  width: 620px;
														
 
															+  height: 400px;
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+
														
 
															+  .bar {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+    position: absolute;
														
 
															+    &.bar-img {
														
 
															+      bottom: 0;
														
 
															+      background: url(../../assets/img/bk_circle.png) no-repeat center 97%;
														
 
															+      background-size: 100%;
														
 
															+      filter: hue-rotate(180deg);
														
 
															+    }
														
 
															+    &.bar-img1 {
														
 
															+      bottom: 30%;
														
 
															+      background: url(../../assets/img/bk_circle1.png) no-repeat center 97%;
														
 
															+      background-size: 75%;
														
 
															+      filter: hue-rotate(180deg);
														
 
															+    }
														
 
															+    &.bar-img2 {
														
 
															+      bottom: 60%;
														
 
															+      background: url(../../assets/img/bk_circle2.png) no-repeat center 97%;
														
 
															+      background-size: 50%;
														
 
															+      filter: hue-rotate(180deg);
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+ 
														
 
															+}
														
 
															+</style>
														
--- a/src/components/cakeLinkage/index.vue
+++ b/src/components/cakeLinkage/index.vue
@@ -28,7 +28,7 @@ export default {
 
															     }
														
 
															   },
														
 
															   mounted() {
														
 
															-     this.getEchart();
														
 
															+    this.getEchart();
														
 
															   },
														
 
															   methods: {
														
 
															     dataFormatter(obj) {
														
@@ -107,8 +107,8 @@ export default {
 
															           timeline: {
														
 
															             axisType: 'category',
														
 
															             autoPlay: true,
														
 
															-            playInterval: 1000,
														
 
															-            data: ['2016-01-01', '2017-01-01','2018-01-01', '2019-01-01', '2020-01-01'],
														
 
															+            playInterval: 2000,
														
 
															+            data: ['2016-01-01', '2017-01-01', '2018-01-01', '2019-01-01', '2020-01-01'],
														
 
															             lineStyle: {
														
 
															               color: '#179bf1'
														
 
															             },
														
@@ -162,12 +162,13 @@ export default {
 
															           //   trigger: 'item'
														
 
															           // },
														
 
															           grid: {
														
 
															-            bottom: 80
														
 
															+            bottom: '20%',
														
 
															+            right: "42%"
														
 
															           },
														
 
															           calculable: true,
														
 
															           xAxis: [{
														
 
															             type: 'category',
														
 
															-            data: ['金融类', '政务类', '医疗类', '互联网类', '', '', ''],
														
 
															+            data: ['金融类', '政务类', '医疗类', '互联网类'],
														
 
															             splitLine: { 
														
 
															               show: false 
														
 
															             },
														
@@ -184,7 +185,6 @@ export default {
 
															           yAxis: [{
														
 
															             type: 'value',
														
 
															             name: '区块链应用（个）',
														
 
															-            offset: -12,
														
 
															             splitLine: {
														
 
															               show: false
														
 
															             },
														
@@ -203,6 +203,7 @@ export default {
 
															             type: 'bar',
														
 
															             barMaxWidth: 15,
														
 
															             center: ['20%', '65%'],
														
 
															+            seriesLayoutBy: 'row',
														
 
															             markPoint: {
														
 
															               symbol: 'pin',
														
 
															               itemStyle: {
														
--- a/src/components/circleNesting/index.vue
+++ b/src/components/circleNesting/index.vue
@@ -0,0 +1,280 @@
 
															+<!--
														
 
															+ 描述: 圆环套圆环
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-05-03
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">圆环套圆环</div> 
														
 
															+      <div class="sn-body">
														
 
															+        <div class="defelement"> 
														
 
															+          <div class="wrap-container"> 
														
 
															+            <div class="chartsdom" id="chart_circle"></div> 
														
 
															+
														
 
															+            <div class="svg-dom"> 
														
 
															+              <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
														
 
															+               <path id="svg_2" d="m117,210c0,-51.65746 41.61878,-93.5 93,-93.5c51.38122,0 93,41.84254 93,93.5c0,51.65746 -41.61878,93.5 -93,93.5c-51.38122,0 -93,-41.84254 -93,-93.5z" stroke="#bfbfbf" fill="none" stroke-dasharray="3,3" xmlns="http://www.w3.org/2000/svg"></path> 
														
 
															+               <path id="svg_3" d="m134,210c0,-41.71271 34.01105,-75.5 76,-75.5c41.98895,0 76,33.78729 76,75.5c0,41.71271 -34.01105,75.5 -76,75.5c-41.98895,0 -76,-33.78729 -76,-75.5z" stroke="#bfbfbf" fill="none" stroke-dasharray="3,3" xmlns="http://www.w3.org/2000/svg"></path> 
														
 
															+              </svg> 
														
 
															+            </div>
														
 
															+
														
 
															+            <div class="cir-arrow cir-arrow1"></div>
														
 
															+            <div class="cir-arrow cir-arrow2"></div>
														
 
															+          </div>
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "circleNesting",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      option: null,
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    this.getEchart();
														
 
															+  },
														
 
															+  methods: {
														
 
															+    getEchart() {
														
 
															+      let myChart = echarts.init(document.getElementById('chart_circle'));
														
 
															+      let itemStyle = {
														
 
															+        normal: {
														
 
															+          color: 'rgba(0, 0, 0, 0)',
														
 
															+        }
														
 
															+      }
														
 
															+
														
 
															+      this.option = {
														
 
															+        color: ['#5d8ef8', '#638bfd', '#1dd1c1'],
														
 
															+        series: [{
														
 
															+          // name: '2020年',
														
 
															+          type: 'pie',
														
 
															+          clockWise: false,
														
 
															+          startAngle: 90,
														
 
															+          hoverAnimation: false,
														
 
															+          radius: ['68%', '70%'],
														
 
															+          center: ['50%', '50%'],
														
 
															+          label: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            },
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            }
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 10,
														
 
															+            name: '100%',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														
 
															+                  offset: 1,
														
 
															+                  color: '#628cfd'
														
 
															+                },{
														
 
															+                  offset: 0,
														
 
															+                  color: '#20cdc4'
														
 
															+                }]),
														
 
															+              }
														
 
															+            }
														
 
															+          }]
														
 
															+        },{
														
 
															+          // name: '交易占比'
														
 
															+          type: 'pie',
														
 
															+          clockWise: false,
														
 
															+          startAngle: 90,
														
 
															+          hoverAnimation: false,
														
 
															+          radius: ['53%', '56%'],
														
 
															+          center: ['50%', '50%'],
														
 
															+          label: {
														
 
															+            normal: {
														
 
															+              show: true,
														
 
															+              fontSize: 16,
														
 
															+              lineHeight: 22,
														
 
															+              formatter: (param) => {
														
 
															+                return param.name + '\n' + param.value + '%';
														
 
															+              }  
														
 
															+            },
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            smooth: true,
														
 
															+            normal: {
														
 
															+              show: true,
														
 
															+              length: 20,
														
 
															+              length2: 20,
														
 
															+              lineStyle: {
														
 
															+                type: 'dotted'
														
 
															+              }
														
 
															+            }
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 64,
														
 
															+            name: '交易比',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: '#638bfd'
														
 
															+              }
														
 
															+            }
														
 
															+          },{
														
 
															+            value: 36,
														
 
															+            name: '',
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          // name: '通道占比'
														
 
															+          type: 'pie',
														
 
															+          clockWise: false,
														
 
															+          startAngle: 0,
														
 
															+          hoverAnimation: false,
														
 
															+          radius: ['43%', '46%'],
														
 
															+          center: ['50%', '50%'],
														
 
															+          label: {
														
 
															+            normal: {
														
 
															+              show: true,
														
 
															+              fontSize: 16,
														
 
															+              lineHeight: 22,
														
 
															+              formatter: (param) => {
														
 
															+                return param.name + '\n' + param.value + '%';
														
 
															+              }
														
 
															+            },
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            smooth: true,
														
 
															+            normal: {
														
 
															+              show: true,
														
 
															+              length: 20,
														
 
															+              length2: 50,
														
 
															+              lineStyle: {
														
 
															+                type: 'dotted'
														
 
															+              }
														
 
															+            }
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 36,
														
 
															+            name: '通道比',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: '#1dd1c1'
														
 
															+              }
														
 
															+            }
														
 
															+          },{
														
 
															+            value: 64,
														
 
															+            name: '',
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        }]
														
 
															+      }
														
 
															+
														
 
															+      myChart.setOption(this.option, true);
														
 
															+
														
 
															+      window.addEventListener('resize', () => {
														
 
															+        myChart.resize();
														
 
															+      });
														
 
															+    }
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 1436px;
														
 
															+  top: 2837px;
														
 
															+  width: 432px;
														
 
															+  height: 400px;
														
 
															+  .defelement {
														
 
															+    position: absolute;
														
 
															+    height: 420px;
														
 
															+    border: none;
														
 
															+    top: -40px;
														
 
															+    left: 6px;
														
 
															+    width: 420px;
														
 
															+    overflow: hidden;
														
 
															+  }
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+
														
 
															+  .svg-dom{
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+    position: absolute;
														
 
															+    top: 0;
														
 
															+  }
														
 
															+  .cir-arrow {
														
 
															+    width: 17px;
														
 
															+    height: 17px;
														
 
															+    offset-distance: 0%;
														
 
															+    position: absolute;
														
 
															+    top: 0;
														
 
															+    left: 0;
														
 
															+    opacity: 0;
														
 
															+    &.cir-arrow1 {
														
 
															+      background: url(../../assets/img/icon_circle1.png) no-repeat 50% 50%;
														
 
															+      -webkit-animation: cir-arrow1 5s linear infinite;
														
 
															+      animation: cir-arrow1 5s linear infinite;
														
 
															+      offset-path: path("m117,210c0,-51.65746 41.61878,-93.5 93,-93.5c51.38122,0 93,41.84254 93,93.5c0,51.65746 -41.61878,93.5 -93,93.5c-51.38122,0 -93,-41.84254 -93,-93.5z");
														
 
															+    }
														
 
															+    &.cir-arrow2 {
														
 
															+      background: url(../../assets/img/icon_circle2.png) no-repeat 50% 50%;
														
 
															+      -webkit-animation: cir-arrow2 5s linear infinite;
														
 
															+      animation: cir-arrow2 5s linear infinite;
														
 
															+      offset-path: path("m134,210c0,-41.71271 34.01105,-75.5 76,-75.5c41.98895,0 76,33.78729 76,75.5c0,41.71271 -34.01105,75.5 -76,75.5c-41.98895,0 -76,-33.78729 -76,-75.5z");
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes cir-arrow1 {
														
 
															+  0% {
														
 
															+    offset-distance: 0%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  100% {
														
 
															+    offset-distance: 100%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+@keyframes cir-arrow1 {
														
 
															+  0% {
														
 
															+    offset-distance: 0%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  100% {
														
 
															+    offset-distance: 100%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes cir-arrow2 {
														
 
															+    0% {
														
 
															+      offset-distance: 100%;
														
 
															+      opacity: 1;
														
 
															+    }
														
 
															+    100% {
														
 
															+      offset-distance: 0%;
														
 
															+      opacity: 1;
														
 
															+    }
														
 
															+}
														
 
															+@keyframes cir-arrow2 {
														
 
															+    0% {
														
 
															+      offset-distance: 100%;
														
 
															+      opacity: 1;
														
 
															+    }
														
 
															+    100% {
														
 
															+      offset-distance: 0%;
														
 
															+      opacity: 1;
														
 
															+    }
														
 
															+}
														
 
															+
														
 
															+</style>
														
--- a/src/components/circleRunway/index.vue
+++ b/src/components/circleRunway/index.vue
@@ -60,7 +60,7 @@ export default {
 
															       this.option = {
														
 
															         color: ['#0772bb', '#00ffff', '#f48b3b'],
														
 
															         series: [{
														
 
															-          name: '2020年',
														
 
															+          name: '联盟链',
														
 
															           type: 'pie',
														
 
															           clockWise: false,
														
 
															           startAngle: 90,
														
@@ -91,7 +91,7 @@ export default {
 
															             itemStyle: itemStyle
														
 
															           }]
														
 
															         },{
														
 
															-          name: '2019年',
														
 
															+          name: '私有链',
														
 
															           type: 'pie',
														
 
															           clockWise: false,
														
 
															           startAngle: 90,
														
@@ -122,7 +122,7 @@ export default {
 
															             itemStyle: itemStyle
														
 
															           }]
														
 
															         },{
														
 
															-          name: '2018年',
														
 
															+          name: '公有链',
														
 
															           type: 'pie',
														
 
															           clockWise: false,
														
 
															           startAngle: 90,
														
--- a/src/components/colorfulArea/index.vue
+++ b/src/components/colorfulArea/index.vue
@@ -0,0 +1,276 @@
 
															+<!--
														
 
															+ 描述: 多彩轮播面积
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-05-03
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">多彩轮播面积</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container"> 
														
 
															+          <div class="chartsdom" id="chart_cra"></div>
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+
														
 
															+export default {
														
 
															+  name: "colorfulArea",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      option: null,
														
 
															+      dataMap: {}
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    this.getEchart();
														
 
															+  },
														
 
															+  methods: {
														
 
															+    dataFormatter(obj) {
														
 
															+      let pList = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
														
 
															+      let temp;
														
 
															+      for (let x = 1; x <= 5; x++) {
														
 
															+          let max = 0;
														
 
															+          let sum = 0;
														
 
															+          temp = obj[x];
														
 
															+          for (let i = 0, l = temp.length; i < l; i++) {
														
 
															+              max = Math.max(max, temp[i]);
														
 
															+              sum += temp[i];
														
 
															+              obj[x][i] = {
														
 
															+                name: pList[i],
														
 
															+                value: temp[i]
														
 
															+              };
														
 
															+          }
														
 
															+          obj[x + 'max'] = Math.floor(max / 100) * 100;
														
 
															+          obj[x + 'sum'] = sum;
														
 
															+      }
														
 
															+      return obj;
														
 
															+    },
														
 
															+    getEchart() {
														
 
															+      let myChart = echarts.init(document.getElementById('chart_cra'));
														
 
															+      let itemStyle = {
														
 
															+        barBorderRadius: [15, 0],
														
 
															+        color: '#0084ff'
														
 
															+      }
														
 
															+
														
 
															+      this.dataMap.dataType = this.dataFormatter({
														
 
															+        5:[96,96,96,96,96,96,96,96,96,96,96,96,85,85,85,85,85,85,98,54,50,54,54,54,54],
														
 
															+        4:[86,86,86,86,86,86,86,86,86,86,86,86,85,95,85,85,85,85,64,64,60,64,64,64,64],
														
 
															+        3:[90,90,90,90,90,90,90,90,90,90,95,90,91,91,91,91,91,91,54,54,50,54,54,54,54],
														
 
															+        2:[76,76,76,76,76,76,76,76,76,76,76,76,95,95,95,95,95,95,54,54,50,54,54,54,54],
														
 
															+        1:[66,66,66,66,66,66,66,66,66,96,66,66,85,85,85,85,85,85,55,55,50,55,55,55,55],
														
 
															+      });
														
 
															+
														
 
															+      this.option = {
														
 
															+        baseOption: {
														
 
															+          timeline: {
														
 
															+            axisType: 'category',
														
 
															+            autoPlay: true,
														
 
															+            playInterval: 1000,
														
 
															+            data: ['5.1', '5.2', '5.3', '5.4', '5.5'],
														
 
															+            left: 50,
														
 
															+            right: 50,
														
 
															+            top: 5,
														
 
															+            lineStyle: {
														
 
															+              color: '#122e96'
														
 
															+            },
														
 
															+            label: {
														
 
															+              color: '#fff'
														
 
															+            },
														
 
															+            checkpointStyle: {
														
 
															+              color: '#ef8c2f',
														
 
															+              symbolSize: 10,
														
 
															+              borderColor: 'rgba(239, 140, 47, 0.5)',
														
 
															+              borderWidth: 5,
														
 
															+            },
														
 
															+            controlStyle: {
														
 
															+              showPlayBtn: false,
														
 
															+              borderColor: '#122e96',
														
 
															+              itemGap: 20
														
 
															+            }, 
														
 
															+            itemStyle: {
														
 
															+              borderColor: '#122e96',
														
 
															+              borderWidth: 5,
														
 
															+              // shadowColor: 'rgba(239, 140, 47, 0.5)',
														
 
															+              // shadowBlur: 5
														
 
															+            },
														
 
															+            emphasis: {
														
 
															+              label: {
														
 
															+                color: '#ef8c2f',
														
 
															+                show: false
														
 
															+              },
														
 
															+              checkpointStyle: {
														
 
															+                color: '#ef8c2f',
														
 
															+                borderColor: 'rgba(239, 140, 47, 0.5)',
														
 
															+                borderWidth: 5,
														
 
															+              },
														
 
															+              controlStyle: {
														
 
															+                borderColor: '#122e96'
														
 
															+              }, 
														
 
															+              itemStyle: {
														
 
															+                color: '#ef8c2f',
														
 
															+                borderColor: 'rgba(239, 140, 47, 0.5)',
														
 
															+                borderWidth: 5
														
 
															+              } 
														
 
															+            }
														
 
															+          },
														
 
															+          calculable: true,
														
 
															+          grid: {
														
 
															+            top: '25%',
														
 
															+            bottom: '12%'
														
 
															+          },
														
 
															+          xAxis: [{
														
 
															+            type: 'category',
														
 
															+            axisLabel: {
														
 
															+              interval: 5
														
 
															+            },
														
 
															+            data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
														
 
															+            splitLine: { 
														
 
															+              show: false 
														
 
															+            },
														
 
															+            offset: 10,
														
 
															+            axisTick: {
														
 
															+              show: true,
														
 
															+              alignWithLabel: true,
														
 
															+              interval: 5,
														
 
															+              length: 10,
														
 
															+              lineStyle: {
														
 
															+                color: '#59aec8',
														
 
															+                width: 3
														
 
															+              }
														
 
															+            }, 
														
 
															+            axisLine: {
														
 
															+              show: false,
														
 
															+              lineStyle: {
														
 
															+                color: '#2867a8',
														
 
															+              }
														
 
															+            },
														
 
															+          }],
														
 
															+          yAxis: [{
														
 
															+            type: 'value',
														
 
															+            splitLine: {
														
 
															+              show: false
														
 
															+            },
														
 
															+            axisTick: {
														
 
															+              show: false
														
 
															+            }, 
														
 
															+            axisLine: {
														
 
															+              show: false,
														
 
															+              lineStyle: {
														
 
															+                color: '#2867a8'
														
 
															+              }
														
 
															+            }
														
 
															+          }],
														
 
															+          series: [{
														
 
															+            name: '多彩轮播面积', 
														
 
															+            type: 'line',
														
 
															+            markPoint: {
														
 
															+              symbol: 'pin',
														
 
															+              symbolSize: 40,
														
 
															+              itemStyle: {
														
 
															+                normal: {
														
 
															+                  color: '#ef8c2f',
														
 
															+                  shadowColor: '#ef8c2f',
														
 
															+                  shadowBlur: 15
														
 
															+                }
														
 
															+              },
														
 
															+              data: [
														
 
															+                {type: 'max', name: '最大值'}
														
 
															+              ]
														
 
															+            },
														
 
															+            itemStyle: {
														
 
															+              borderColor: '#1374e7',
														
 
															+              borderWidth: 10,
														
 
															+              shadowBlur: 10,
														
 
															+              shadowColor: '#1374e7', 
														
 
															+              opacity: 0,
														
 
															+            },
														
 
															+            label: {
														
 
															+              show: false,
														
 
															+              // position: 'top',
														
 
															+              // color: '#fff'
														
 
															+            },
														
 
															+            lineStyle: {
														
 
															+              width: 2,
														
 
															+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														
 
															+                offset: 0,
														
 
															+                color: '#17418d'
														
 
															+              },{
														
 
															+                offset: 1,
														
 
															+                color: '#a56d42'
														
 
															+              }]),
														
 
															+            },
														
 
															+            areaStyle: {
														
 
															+              normal: {
														
 
															+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														
 
															+                  offset: 0,
														
 
															+                  color: '#1e4b4b'
														
 
															+                },{
														
 
															+                  offset: 1,
														
 
															+                  color: 'rgba(0, 0, 0, 0)'
														
 
															+                }]),
														
 
															+              }
														
 
															+            },
														
 
															+            smooth: true,
														
 
															+          }]
														
 
															+        },
														
 
															+        options: [{
														
 
															+          series: [{
														
 
															+            data: this.dataMap.dataType['1'],
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          series: [{
														
 
															+            data: this.dataMap.dataType['2'],
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          series: [{
														
 
															+            data: this.dataMap.dataType['3'],
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          series: [{
														
 
															+            data: this.dataMap.dataType['4'],
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          series: [{
														
 
															+            data: this.dataMap.dataType['5'],
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        }]
														
 
															+      }
														
 
															+
														
 
															+      myChart.setOption(this.option, true);
														
 
															+
														
 
															+      window.addEventListener('resize', () => {
														
 
															+        myChart.resize();
														
 
															+      });
														
 
															+    }
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 1306px;
														
 
															+  top: 2408px;
														
 
															+  width: 560px;
														
 
															+  height: 400px;
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+
														
 
															+</style>
														
--- a/src/components/colorfulRadar/index.vue
+++ b/src/components/colorfulRadar/index.vue
@@ -0,0 +1,154 @@
 
															+<!--
														
 
															+ 描述: 多彩雷达
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-05-02
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">多彩雷达</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container"> 
														
 
															+          <div class="chartsdom" id="chart_radar"></div> 
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "colorfulRadar",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      option: null
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    this.getEchart();
														
 
															+  },
														
 
															+  methods: {
														
 
															+    getEchart() {
														
 
															+      let myChart = echarts.init(document.getElementById('chart_radar'));
														
 
															+      this.option = {
														
 
															+        tooltip: {
														
 
															+          trigger: 'axis'
														
 
															+        },
														
 
															+        radar: [{
														
 
															+          indicator: [
														
 
															+            {text: '外观', max: 100},
														
 
															+            {text: '拍照', max: 100},
														
 
															+            {text: '系统', max: 100},
														
 
															+            {text: '性能', max: 100},
														
 
															+            {text: '屏幕', max: 100},
														
 
															+            {text: '折叠', max: 100}
														
 
															+          ],
														
 
															+          radius: '75%',
														
 
															+          center: ['50%', '50%'],
														
 
															+          name: {
														
 
															+            textStyle: {
														
 
															+              color: '#1883ff'
														
 
															+            }
														
 
															+          },
														
 
															+          axisTick: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          axisLabel: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          axisLine: {
														
 
															+            show: true,
														
 
															+            symbol: 'arrow',
														
 
															+            symbolSize: [5, 7.5],
														
 
															+            lineStyle: {
														
 
															+              color: '#1883ff',
														
 
															+              type: 'dashed'
														
 
															+            }
														
 
															+          },
														
 
															+          splitArea: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          splitLine: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        }],
														
 
															+        series: [{
														
 
															+          type: 'radar',
														
 
															+          areaStyle: {},
														
 
															+          symbol: 'none',
														
 
															+          itemStyle: {
														
 
															+            normal: {
														
 
															+              areaStyle: {
														
 
															+                type: 'default'
														
 
															+              }
														
 
															+            }
														
 
															+          },
														
 
															+          lineStyle: {
														
 
															+            opacity: 0,
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: [35, 50, 30, 30, 40, 45],
														
 
															+            name: '智能手机',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														
 
															+                  offset: 0, 
														
 
															+                  color: '#9c6b4e'
														
 
															+                },{
														
 
															+                  offset: 1, 
														
 
															+                  color: '#2a59ac'
														
 
															+                }]),
														
 
															+                lineStyle: {
														
 
															+                  color: '#2a59ac'
														
 
															+                }
														
 
															+              }
														
 
															+            }
														
 
															+          },
														
 
															+          {
														
 
															+            value: [70, 40, 55, 55, 30, 55],
														
 
															+            name: '5G手机',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														
 
															+                  offset: 0, 
														
 
															+                  color: '#0855ca'
														
 
															+                },{
														
 
															+                  offset: 1, 
														
 
															+                  color: '#36a6c7'
														
 
															+                }]),
														
 
															+                lineStyle: {
														
 
															+                  color: '#36a6c7'
														
 
															+                }
														
 
															+              }
														
 
															+            }
														
 
															+          }]
														
 
															+        }]
														
 
															+      }
														
 
															+
														
 
															+      myChart.setOption(this.option, true);
														
 
															+
														
 
															+      window.addEventListener('resize', () => {
														
 
															+        myChart.resize();
														
 
															+      });
														
 
															+    }
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 1436px;
														
 
															+  top: 1978px;
														
 
															+  width: 432px;
														
 
															+  height: 400px;
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/dynamicLine/index.vue
+++ b/src/components/dynamicLine/index.vue
@@ -0,0 +1,166 @@
 
															+<!--
														
 
															+ 描述: 动态轮播折线图
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-04-18
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">动态折线图</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container"> 
														
 
															+          <div class="chartsdom" id="chart_dt"></div> 
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "dynamicLine",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      option: null,
														
 
															+      timer: null,
														
 
															+      xData: [],
														
 
															+      now: +new Date(2019, 1, 1),
														
 
															+      value: Math.random() * 1000,
														
 
															+      oneDay: 24 * 3600 * 1000
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    this.getEchart();
														
 
															+  },
														
 
															+  methods: {
														
 
															+    randomData() {
														
 
															+      this.now = new Date(+this.now + this.oneDay);
														
 
															+      this.value = this.value + Math.random() * 25 - 10;
														
 
															+      return {
														
 
															+        name: this.now.toString(),
														
 
															+        value: [
														
 
															+            [this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate()].join('/'),
														
 
															+            Math.round(this.value)
														
 
															+        ]
														
 
															+      };
														
 
															+    },
														
 
															+    getEchart() {
														
 
															+      let myChart = echarts.init(document.getElementById('chart_dt'));
														
 
															+      for (let i = 0; i < 1000; i++) {
														
 
															+        this.xData.push(this.randomData());
														
 
															+      }
														
 
															+
														
 
															+      this.option = {
														
 
															+        tooltip: {
														
 
															+          trigger: 'axis',
														
 
															+          axisPointer: {
														
 
															+            type: 'cross',
														
 
															+            axisPointer: {
														
 
															+              type: 'cross',
														
 
															+              label: {
														
 
															+                backgroundColor: '#283b56'
														
 
															+              }
														
 
															+            }
														
 
															+          }
														
 
															+        },
														
 
															+        grid: {
														
 
															+          top: '10%',
														
 
															+          left: '3%',
														
 
															+          right: '12%',
														
 
															+          bottom: '3%',
														
 
															+          containLabel: true
														
 
															+        },
														
 
															+        color: ['#b54c5d'],
														
 
															+        calculable: true,
														
 
															+        xAxis: {
														
 
															+          type: 'time',
														
 
															+          name: '年-月-日',
														
 
															+          boundaryGap: false,
														
 
															+          splitNumber: 5,
														
 
															+          axisLabel: {
														
 
															+            formatter(value) {
														
 
															+              let date = new Date(value);
														
 
															+              return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
														
 
															+            }
														
 
															+          },
														
 
															+          axisTick: {
														
 
															+            show: false
														
 
															+          }, 
														
 
															+          axisLine: {
														
 
															+            show: true,
														
 
															+            lineStyle: {
														
 
															+              color: '#2867a8'
														
 
															+            }
														
 
															+          },
														
 
															+          splitLine: {
														
 
															+            show: false
														
 
															+          }
														
 
															+        },
														
 
															+        yAxis: {
														
 
															+          type: 'value',
														
 
															+          scale: true,
														
 
															+          name: '比特币（美元）',
														
 
															+          min: 0,
														
 
															+          boundaryGap:  false,
														
 
															+          axisTick: {
														
 
															+            show: false
														
 
															+          }, 
														
 
															+          axisLine: {
														
 
															+            show: true,
														
 
															+            lineStyle: {
														
 
															+              color: '#2867a8'
														
 
															+            }
														
 
															+          },
														
 
															+          splitLine: {
														
 
															+            show: false
														
 
															+          },
														
 
															+        },
														
 
															+        series: [{
														
 
															+          name: '实时交易',
														
 
															+          type: 'line',
														
 
															+          xAxisIndex: 0,
														
 
															+          yAxisIndex: 0,
														
 
															+          itemStyle: {
														
 
															+            opacity: 0,
														
 
															+          },
														
 
															+          data: this.xData,
														
 
															+          smooth: true
														
 
															+        }]
														
 
															+      }
														
 
															+
														
 
															+      myChart.setOption(this.option, true);
														
 
															+
														
 
															+      window.addEventListener('resize', () => {
														
 
															+        myChart.resize();
														
 
															+      });
														
 
															+
														
 
															+      this.timer = setInterval(() => {
														
 
															+        for (let i = 0; i < 5; i++) {
														
 
															+          this.xData.shift();
														
 
															+          this.xData.push(this.randomData());
														
 
															+        }
														
 
															+
														
 
															+        myChart.setOption(this.option, true);
														
 
															+      }, 2000);
														
 
															+    }
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    clearInterval(this.timer);
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 1282px;
														
 
															+  top: 1548px;
														
 
															+  width: 586px;
														
 
															+  height: 400px;
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/dynamicList/index.vue
+++ b/src/components/dynamicList/index.vue
@@ -0,0 +1,604 @@
 
															+<!--
														
 
															+ 描述: 动态列表动画
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-04-18
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">动态列表</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container pd-info"> 
														
 
															+          <div class="pd-info-center">
														
 
															+            <div class="y-center">
														
 
															+              <div class="info-1-0 animated infinite rotateF"></div>
														
 
															+              <div class="info-1-1 animated infinite rotateF"></div>
														
 
															+              <div class="info-1-2 animated infinite rotate"></div>
														
 
															+              <div class="info-1-3 animated infinite rotate"></div>
														
 
															+              <div class="info-1-4 animated infinite flashPD"></div>
														
 
															+            </div>
														
 
															+
														
 
															+            <div class="y-number y-number-1 animated fadeInLeft">
														
 
															+              <div class="y-number-bg animated infinite rotate"></div>
														
 
															+              <div class="y-number-icon"></div>
														
 
															+              <div class="y-number-text">
														
 
															+                <span>区块链</span>
														
 
															+                <span id="number1" class="odometer odometer-theme-digital">
														
 
															+                  <div class="odometer-inside">
														
 
															+                    <span class="odometer-digit">
														
 
															+                      <span class="odometer-digit-spacer">8</span>
														
 
															+                      <span class="odometer-digit-inner">
														
 
															+                        <span class="odometer-ribbon">
														
 
															+                          <span class="odometer-ribbon-inner">
														
 
															+                            <span class="odometer-value">
														
 
															+                              <countTo :startVal='startVal' :endVal='12356' :duration='6000' separator=""></countTo>
														
 
															+                            </span>
														
 
															+                          </span>
														
 
															+                        </span>
														
 
															+                      </span>
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                </span>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+
														
 
															+            <div class="y-number y-number-2 animated fadeInLeft">
														
 
															+              <div class="y-number-bg animated infinite rotateF"></div>
														
 
															+              <div class="y-number-icon"></div>
														
 
															+              <div class="y-number-text">
														
 
															+                <span>大数据</span>
														
 
															+                <span id="number2" class="odometer odometer-theme-digital">
														
 
															+                  <div class="odometer-inside">
														
 
															+                    <span class="odometer-digit">
														
 
															+                      <span class="odometer-digit-spacer">8</span>
														
 
															+                      <span class="odometer-digit-inner">
														
 
															+                        <span class="odometer-ribbon">
														
 
															+                          <span class="odometer-ribbon-inner">
														
 
															+                            <span class="odometer-value">
														
 
															+                              <countTo :startVal='startVal' :endVal='65321' :duration='6000' separator=""></countTo>
														
 
															+                            </span>
														
 
															+                          </span>
														
 
															+                        </span>
														
 
															+                      </span>
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                </span>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+
														
 
															+            <div class="y-number y-number-3 animated fadeInLeft">
														
 
															+              <div class="y-number-bg animated infinite rotateF"></div>
														
 
															+              <div class="y-number-icon"></div>
														
 
															+              <div class="y-number-text">
														
 
															+                <span>云计算</span>
														
 
															+                <span id="number3" class="odometer odometer-theme-digital">
														
 
															+                  <div class="odometer-inside">
														
 
															+                    <span class="odometer-digit">
														
 
															+                      <span class="odometer-digit-spacer">8</span>
														
 
															+                      <span class="odometer-digit-inner">
														
 
															+                        <span class="odometer-ribbon">
														
 
															+                          <span class="odometer-ribbon-inner">
														
 
															+                            <span class="odometer-value">
														
 
															+                              <countTo :startVal='startVal' :endVal='8686' :duration='6000' separator=""></countTo>
														
 
															+                            </span>
														
 
															+                          </span>
														
 
															+                        </span>
														
 
															+                      </span>
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                </span>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+
														
 
															+            <div class="y-number y-number-4 animated fadeInLeft">
														
 
															+              <div class="y-number-bg animated infinite rotate"></div>
														
 
															+              <div class="y-number-icon"></div>
														
 
															+              <div class="y-number-text">
														
 
															+                <span>人工智能</span>
														
 
															+                <span id="number4" class="odometer odometer-theme-digital">
														
 
															+                  <div class="odometer-inside">
														
 
															+                    <span class="odometer-digit">
														
 
															+                      <span class="odometer-digit-spacer">8</span>
														
 
															+                      <span class="odometer-digit-inner">
														
 
															+                        <span class="odometer-ribbon">
														
 
															+                          <span class="odometer-ribbon-inner">
														
 
															+                            <span class="odometer-value">
														
 
															+                              <countTo :startVal='startVal' :endVal='258' :duration='6000' separator=""></countTo>
														
 
															+                            </span>
														
 
															+                          </span>
														
 
															+                        </span>
														
 
															+                      </span>
														
 
															+                    </span>
														
 
															+                  </div>
														
 
															+                </span>
														
 
															+              </div>
														
 
															+            </div>
														
 
															+          </div>
														
 
															+
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+import countTo from 'vue-count-to'
														
 
															+
														
 
															+export default {
														
 
															+  name: "dynamicList",
														
 
															+  components: {
														
 
															+    countTo
														
 
															+  },
														
 
															+  data() {
														
 
															+    return {
														
 
															+      startVal: 0
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    
														
 
															+  },
														
 
															+  methods: {
														
 
															+    
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 50px;
														
 
															+  top: 2408px;
														
 
															+  width: 560px;
														
 
															+  height: 400px;
														
 
															+  .pd-info {
														
 
															+    left: 0;
														
 
															+    top: 35px;
														
 
															+    width: 100%;
														
 
															+    height: 80%;
														
 
															+  }
														
 
															+  .pd-info-center {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+    .y-center {
														
 
															+      position: absolute;
														
 
															+      top: 16px;
														
 
															+      left: 30px;
														
 
															+      width: 234px;
														
 
															+      height: 234px;
														
 
															+      > [class^=info-1] {
														
 
															+        width: 100%;
														
 
															+        height: 100%;
														
 
															+        position: absolute;
														
 
															+        top: 0;
														
 
															+        left: 0;
														
 
															+        background-repeat: no-repeat;
														
 
															+        background-position: center center;
														
 
															+      }
														
 
															+      .info-1-0 {
														
 
															+        background-image: url(../../assets/img/dynamic/info-1-0.png);
														
 
															+        -webkit-animation-duration: 20s;
														
 
															+        -moz-animation-duration: 20s;
														
 
															+        -o-animation-duration: 20s;
														
 
															+        animation-duration: 20s;
														
 
															+      }
														
 
															+      .info-1-1 {
														
 
															+        background-image: url(../../assets/img/dynamic/info-1-1.png);
														
 
															+        -webkit-animation-duration: 20s;
														
 
															+        -moz-animation-duration: 20s;
														
 
															+        -o-animation-duration: 20s;
														
 
															+        animation-duration: 20s;
														
 
															+        -webkit-animation-delay: 3s;
														
 
															+        -moz-animation-delay: 3s;
														
 
															+        -o-animation-delay: 3s;
														
 
															+        animation-delay: 3s;
														
 
															+      }
														
 
															+      .info-1-2 {
														
 
															+        background-image: url(../../assets/img/dynamic/info-1-2.png);
														
 
															+        -webkit-animation-duration: 20s;
														
 
															+        -moz-animation-duration: 20s;
														
 
															+        -o-animation-duration: 20s;
														
 
															+        animation-duration: 20s;
														
 
															+        -webkit-animation-delay: 8s;
														
 
															+        -moz-animation-delay: 8s;
														
 
															+        -o-animation-delay: 8s;
														
 
															+        animation-delay: 8s;
														
 
															+      }
														
 
															+      .info-1-3 {
														
 
															+        background-image: url(../../assets/img/dynamic/info-1-3.png);
														
 
															+        -webkit-animation-duration: 10s;
														
 
															+        -moz-animation-duration: 10s;
														
 
															+        -o-animation-duration: 10s;
														
 
															+        animation-duration: 10s;
														
 
															+        -webkit-animation-delay: 5s;
														
 
															+        -moz-animation-delay: 5s;
														
 
															+        -o-animation-delay: 5s;
														
 
															+        animation-delay: 5s;
														
 
															+      }
														
 
															+      .info-1-4 {
														
 
															+        background-image: url(../../assets/img/dynamic/info-1-4.png);
														
 
															+        -webkit-animation-duration: 5s;
														
 
															+        -moz-animation-duration: 5s;
														
 
															+        -o-animation-duration: 5s;
														
 
															+        animation-duration: 5s;
														
 
															+      }
														
 
															+    }
														
 
															+
														
 
															+    .y-number {
														
 
															+      position: absolute;
														
 
															+      left: 0;
														
 
															+      padding-left: 290px;
														
 
															+      -webkit-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
														
 
															+      -moz-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
														
 
															+      -o-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
														
 
															+      animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
														
 
															+      .y-number-bg {
														
 
															+        width: 54px;
														
 
															+        height: 54px;
														
 
															+        position: absolute;
														
 
															+        top: 5px;
														
 
															+        -webkit-animation-duration: 5s;
														
 
															+        -moz-animation-duration: 5s;
														
 
															+        -o-animation-duration: 5s;
														
 
															+        animation-duration: 5s;
														
 
															+      }
														
 
															+      .y-number-icon {
														
 
															+        width: 54px;
														
 
															+        height: 54px;
														
 
															+        position: absolute;
														
 
															+        top: 5px;
														
 
															+      }
														
 
															+      .y-number-text {
														
 
															+        display: inline-block;
														
 
															+        color: #0072bc;
														
 
															+        font-size: 18px;
														
 
															+        padding: 10px 0 0 60px;
														
 
															+        > span {
														
 
															+          display: block;
														
 
															+          &:nth-child(2) {
														
 
															+            font-size: 22px;
														
 
															+            color: #00aeef;
														
 
															+            line-height: 28px;
														
 
															+            padding: 0;
														
 
															+            background: transparent;
														
 
															+          }
														
 
															+        }
														
 
															+      }
														
 
															+
														
 
															+      &.y-number-1 {
														
 
															+        -webkit-animation-delay: 1s;
														
 
															+        -moz-animation-delay: 1s;
														
 
															+        -o-animation-delay: 1s;
														
 
															+        animation-delay: 1s;
														
 
															+        background: url(../../assets/img/dynamic/info-line-01.png) no-repeat 180px center;
														
 
															+        height: 60px;
														
 
															+        top: 15px;
														
 
															+        .y-number-bg {
														
 
															+          -webkit-animation-delay: 2s;
														
 
															+          -moz-animation-delay: 2s;
														
 
															+          -o-animation-delay: 2s;
														
 
															+          animation-delay: 2s;
														
 
															+          background: url(../../assets/img/dynamic/info-bg-01.png) no-repeat 50% 50%;
														
 
															+        }
														
 
															+        .y-number-icon {
														
 
															+          background: url(../../assets/img/dynamic/info-icon-1.png) no-repeat 50% 50%;
														
 
															+        }
														
 
															+      }
														
 
															+      &.y-number-2 {
														
 
															+        -webkit-animation-delay: 1.25s;
														
 
															+        -moz-animation-delay: 1.25s;
														
 
															+        -o-animation-delay: 1.25s;
														
 
															+        animation-delay: 1.25s;
														
 
															+        background: url(../../assets/img/dynamic/info-line-02.png) no-repeat 180px center;
														
 
															+        height: 60px;
														
 
															+        top: 70px;
														
 
															+        padding-left: 350px;
														
 
															+        .y-number-bg {
														
 
															+          -webkit-animation-delay: 2.5s;
														
 
															+          -moz-animation-delay: 2.5s;
														
 
															+          -o-animation-delay: 2.5s;
														
 
															+          animation-delay: 2.5s;
														
 
															+          background: url(../../assets/img/dynamic/info-bg-02.png) no-repeat 50% 50%;
														
 
															+        }
														
 
															+        .y-number-icon {
														
 
															+          background: url(../../assets/img/dynamic/info-icon-2.png) no-repeat 50% 50%;
														
 
															+        }
														
 
															+      }
														
 
															+      &.y-number-3 {
														
 
															+        -webkit-animation-delay: 1.5s;
														
 
															+        -moz-animation-delay: 1.5s;
														
 
															+        -o-animation-delay: 1.5s;
														
 
															+        animation-delay: 1.5s;
														
 
															+        background: url(../../assets/img/dynamic/info-line-02.png) no-repeat 180px center;
														
 
															+        height: 60px;
														
 
															+        top: 135px;
														
 
															+        padding-left: 350px;
														
 
															+        .y-number-bg {
														
 
															+          -webkit-animation-delay: 3s;
														
 
															+          -moz-animation-delay: 3s;
														
 
															+          -o-animation-delay: 3s;
														
 
															+          animation-delay: 3s;
														
 
															+          background: url(../../assets/img/dynamic/info-bg-03.png) no-repeat 50% 50%;
														
 
															+        }
														
 
															+        .y-number-icon {
														
 
															+          background: url(../../assets/img/dynamic/info-icon-3.png) no-repeat 50% 50%;
														
 
															+        }
														
 
															+      }
														
 
															+      &.y-number-4 {
														
 
															+        -webkit-animation-delay: 1.75s;
														
 
															+        -moz-animation-delay: 1.75s;
														
 
															+        -o-animation-delay: 1.75s;
														
 
															+        animation-delay: 1.75s;
														
 
															+        background: url(../../assets/img/dynamic/info-line-01.png) no-repeat 180px center;
														
 
															+        height: 60px;
														
 
															+        top: 190px;
														
 
															+        .y-number-bg {
														
 
															+          -webkit-animation-delay: 3.5s;
														
 
															+          -moz-animation-delay: 3.5s;
														
 
															+          -o-animation-delay: 3.5s;
														
 
															+          animation-delay: 3.5s;
														
 
															+          background: url(../../assets/img/dynamic/info-bg-04.png) no-repeat 50% 50%;
														
 
															+        }
														
 
															+        .y-number-icon {
														
 
															+          background: url(../../assets/img/dynamic/info-icon-4.png) no-repeat 50% 50%;
														
 
															+        }
														
 
															+      }
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+}
														
 
															+
														
 
															+.animated {
														
 
															+  -webkit-animation-duration: 1s;
														
 
															+  -moz-animation-duration: 1s;
														
 
															+  -o-animation-duration: 1s;
														
 
															+  animation-duration: 1s;
														
 
															+  -webkit-animation-fill-mode: both;
														
 
															+  -moz-animation-fill-mode: both;
														
 
															+  -o-animation-fill-mode: both;
														
 
															+  animation-fill-mode: both;
														
 
															+}
														
 
															+.animated.infinite {
														
 
															+  -webkit-animation-iteration-count: infinite;
														
 
															+  -moz-animation-iteration-count: infinite;
														
 
															+  -o-animation-iteration-count: infinite;
														
 
															+  animation-iteration-count: infinite;
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes rotate {
														
 
															+  0% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(0deg);
														
 
															+    transform: rotate(0deg);
														
 
															+  }
														
 
															+  100% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(360deg);
														
 
															+    transform: rotate(360deg);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-moz-keyframes rotate {
														
 
															+  0% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -moz-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(0deg);
														
 
															+    -moz-transform: rotate(0deg);
														
 
															+    transform: rotate(0deg);
														
 
															+  }
														
 
															+  100% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -moz-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(360deg);
														
 
															+    -moz-transform: rotate(360deg);
														
 
															+    transform: rotate(360deg);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-o-keyframes rotate {
														
 
															+  0% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -o-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(0deg);
														
 
															+    -o-transform: rotate(0deg);
														
 
															+    transform: rotate(0deg);
														
 
															+  }
														
 
															+  100% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -o-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(360deg);
														
 
															+    -o-transform: rotate(360deg);
														
 
															+    transform: rotate(360deg);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@keyframes rotate {
														
 
															+  0% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -moz-transform-origin: center;
														
 
															+    -o-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(0deg);
														
 
															+    -moz-transform: rotate(0deg);
														
 
															+    -o-transform: rotate(0deg);
														
 
															+    transform: rotate(0deg);
														
 
															+  }
														
 
															+  100% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -moz-transform-origin: center;
														
 
															+    -o-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(360deg);
														
 
															+    -moz-transform: rotate(360deg);
														
 
															+    -o-transform: rotate(360deg);
														
 
															+    transform: rotate(360deg);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.rotate {
														
 
															+  -webkit-animation-name: rotate;
														
 
															+  -moz-animation-name: rotate;
														
 
															+  -o-animation-name: rotate;
														
 
															+  animation-name: rotate;
														
 
															+  -webkit-animation-timing-function: linear;
														
 
															+  -moz-animation-timing-function: linear;
														
 
															+  -o-animation-timing-function: linear;
														
 
															+  animation-timing-function: linear;
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes rotateF {
														
 
															+  100% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(-360deg);
														
 
															+    transform: rotate(-360deg);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-moz-keyframes rotateF {
														
 
															+  100% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -moz-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(-360deg);
														
 
															+    -moz-transform: rotate(-360deg);
														
 
															+    transform: rotate(-360deg);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-o-keyframes rotateF {
														
 
															+  100% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -o-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(-360deg);
														
 
															+    -o-transform: rotate(-360deg);
														
 
															+    transform: rotate(-360deg);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@keyframes rotateF {
														
 
															+  100% {
														
 
															+    -webkit-transform-origin: center;
														
 
															+    -moz-transform-origin: center;
														
 
															+    -o-transform-origin: center;
														
 
															+    transform-origin: center;
														
 
															+    -webkit-transform: rotate(-360deg);
														
 
															+    -moz-transform: rotate(-360deg);
														
 
															+    -o-transform: rotate(-360deg);
														
 
															+    transform: rotate(-360deg);
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.rotateF {
														
 
															+  -webkit-animation-name: rotateF;
														
 
															+  -moz-animation-name: rotateF;
														
 
															+  -o-animation-name: rotateF;
														
 
															+  animation-name: rotateF;
														
 
															+  -webkit-animation-timing-function: linear;
														
 
															+  -moz-animation-timing-function: linear;
														
 
															+  -o-animation-timing-function: linear;
														
 
															+  animation-timing-function: linear;
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes flashPD {
														
 
															+  0%,
														
 
															+  90% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  92%,
														
 
															+  98% {
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+  96%,
														
 
															+  100% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-moz-keyframes flashPD {
														
 
															+  0%,
														
 
															+  90% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  92%,
														
 
															+  98% {
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+  96%,
														
 
															+  100% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-o-keyframes flashPD {
														
 
															+  0%,
														
 
															+  90% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  92%,
														
 
															+  98% {
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+  96%,
														
 
															+  100% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@keyframes flashPD {
														
 
															+  0%,
														
 
															+  90% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  92%,
														
 
															+  98% {
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+  96%,
														
 
															+  100% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.flashPD {
														
 
															+  -webkit-animation-name: flashPD;
														
 
															+  -moz-animation-name: flashPD;
														
 
															+  -o-animation-name: flashPD;
														
 
															+  animation-name: flashPD;
														
 
															+}
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+
														
 
															+</style>
														
--- a/src/components/flashCloud/index.vue
+++ b/src/components/flashCloud/index.vue
@@ -0,0 +1,465 @@
 
															+<!--
														
 
															+ 描述: 闪动云
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-05-02
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">闪动云</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container cloud"> 
														
 
															+          
														
 
															+          <div class="pd-main-left"> 
														
 
															+           <div class="yun-container"> 
														
 
															+            <div class="yun-tree"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+            <div class="line-fs"></div> 
														
 
															+           </div>
														
 
															+
														
 
															+           <div id="yunText" class="yun-text"> 
														
 
															+            <div :id="`yunText-${index + 1}`" :class="{'span-flash': number == index }" v-for="(item, index) in arrData" :key="index">
														
 
															+              <span :title="item.title">{{ item.title }}</span>
														
 
															+            </div>
														
 
															+           </div> 
														
 
															+          </div>
														
 
															+
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "flashCloud",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      number: 0,
														
 
															+      arrData: [{
														
 
															+        title: 'JavaScript'
														
 
															+      },{
														
 
															+        title: 'Vue.js'
														
 
															+      },{
														
 
															+        title: 'React.js'
														
 
															+      },{
														
 
															+        title: 'Node.js'
														
 
															+      },{
														
 
															+        title: 'Angular'
														
 
															+      },{
														
 
															+        title: 'HTML5'
														
 
															+      },{
														
 
															+        title: 'CSS3'
														
 
															+      },{
														
 
															+        title: 'jQuery'
														
 
															+      },{
														
 
															+        title: 'Typescript'
														
 
															+      },{
														
 
															+        title: 'Bootstrap'
														
 
															+      },{
														
 
															+        title: 'WebApp'
														
 
															+      },{
														
 
															+        title: '小程序'
														
 
															+      },{
														
 
															+        title: 'HTTP'
														
 
															+      },{
														
 
															+        title: 'Sass/Less'
														
 
															+      },{
														
 
															+        title: 'Webpack'
														
 
															+      },{
														
 
															+        title: 'ES6'
														
 
															+      }]
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    let len = 5;
														
 
															+    this.timer = setInterval(() => {
														
 
															+      this.number = parseInt(Math.random() * 15, 10);
														
 
															+      if (len == 0) {
														
 
															+        len = 5;
														
 
															+        return this.arrData.sort(() => Math.random() - 0.5);
														
 
															+      } else {
														
 
															+        len--;
														
 
															+      }
														
 
															+    }, 2000)
														
 
															+  },
														
 
															+  methods: {
														
 
															+    
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    clearInterval(this.timer);
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 512px;
														
 
															+  top: 1978px;
														
 
															+  width: 432px;
														
 
															+  height: 400px;
														
 
															+  .cloud {
														
 
															+    left: 55px;
														
 
															+    top: 0;
														
 
															+    width: 80%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+
														
 
															+  .pd-main-left {
														
 
															+    position: relative;
														
 
															+    width: 310px;
														
 
															+    height: 335px;
														
 
															+    .yun-container {
														
 
															+      width: 100%;
														
 
															+      height: 100%;
														
 
															+      > div {
														
 
															+        &:nth-child(2) {
														
 
															+          height: 90%;
														
 
															+          -webkit-animation-duration: 2s;
														
 
															+          -moz-animation-duration: 2s;
														
 
															+          -o-animation-duration: 2s;
														
 
															+          animation-duration: 2s;
														
 
															+          -webkit-animation-delay: 1.5s;
														
 
															+          -moz-animation-delay: 1.5s;
														
 
															+          -o-animation-delay: 1.5s;
														
 
															+          animation-delay: 1.5s;
														
 
															+          bottom: 0;
														
 
															+          left: 51px;
														
 
															+        }
														
 
															+        &:nth-child(3) {
														
 
															+          height: 100%;
														
 
															+          -webkit-animation-duration: 3s;
														
 
															+          -moz-animation-duration: 3s;
														
 
															+          -o-animation-duration: 3s;
														
 
															+          animation-duration: 3s;
														
 
															+          -webkit-animation-delay: 0s;
														
 
															+          -moz-animation-delay: 0s;
														
 
															+          -o-animation-delay: 0s;
														
 
															+          animation-delay: 0s;
														
 
															+          bottom: 32px;
														
 
															+          left: 89px;
														
 
															+        }
														
 
															+        &:nth-child(4) {
														
 
															+          height: 100%;
														
 
															+          -webkit-animation-duration: 2.5s;
														
 
															+          -moz-animation-duration: 2.5s;
														
 
															+          -o-animation-duration: 2.5s;
														
 
															+          animation-duration: 2.5s;
														
 
															+          -webkit-animation-delay: 1s;
														
 
															+          -moz-animation-delay: 1s;
														
 
															+          -o-animation-delay: 1s;
														
 
															+          animation-delay: 1s;
														
 
															+          bottom: 3px;
														
 
															+          left: 179px;
														
 
															+          -webkit-filter: hue-rotate(180deg);
														
 
															+          filter: hue-rotate(180deg);
														
 
															+        }
														
 
															+        &:nth-child(5) {
														
 
															+          height: 90%;
														
 
															+          -webkit-animation-duration: 2s;
														
 
															+          -moz-animation-duration: 2s;
														
 
															+          -o-animation-duration: 2s;
														
 
															+          animation-duration: 2s;
														
 
															+          -webkit-animation-delay: 2s;
														
 
															+          -moz-animation-delay: 2s;
														
 
															+          -o-animation-delay: 2s;
														
 
															+          animation-delay: 2s;
														
 
															+          bottom: 42px;
														
 
															+          left: 229px;
														
 
															+        }
														
 
															+        &:nth-child(6) {
														
 
															+          height: 100%;
														
 
															+          -webkit-animation-duration: 2.5s;
														
 
															+          -moz-animation-duration: 2.5s;
														
 
															+          -o-animation-duration: 2.5s;
														
 
															+          animation-duration: 2.5s;
														
 
															+          -webkit-animation-delay: 0.5s;
														
 
															+          -moz-animation-delay: 0.5s;
														
 
															+          -o-animation-delay: 0.5s;
														
 
															+          animation-delay: 0.5s;
														
 
															+          bottom: 11px;
														
 
															+          right: 48px;
														
 
															+        }
														
 
															+        &:nth-child(7) {
														
 
															+          height: 90%;
														
 
															+          -webkit-animation-duration: 3s;
														
 
															+          -moz-animation-duration: 3s;
														
 
															+          -o-animation-duration: 3s;
														
 
															+          animation-duration: 3s;
														
 
															+          -webkit-animation-delay: 2.5s;
														
 
															+          -moz-animation-delay: 2.5s;
														
 
															+          -o-animation-delay: 2.5s;
														
 
															+          animation-delay: 2.5s;
														
 
															+          bottom: -22px;
														
 
															+          right: 174px;
														
 
															+          -webkit-filter: hue-rotate(180deg);
														
 
															+          filter: hue-rotate(180deg);
														
 
															+        }
														
 
															+        &:nth-child(8) {
														
 
															+          height: 90%;
														
 
															+          -webkit-animation-duration: 3s;
														
 
															+          -moz-animation-duration: 3s;
														
 
															+          -o-animation-duration: 3s;
														
 
															+          animation-duration: 3s;
														
 
															+          -webkit-animation-delay: 1.5s;
														
 
															+          -moz-animation-delay: 1.5s;
														
 
															+          -o-animation-delay: 1.5s;
														
 
															+          animation-delay: 1.5s;
														
 
															+          bottom: -22px;
														
 
															+          right: 100px;
														
 
															+        }
														
 
															+        &:nth-child(9) {
														
 
															+          height: 100%;
														
 
															+          -webkit-animation-duration: 2.5s;
														
 
															+          -moz-animation-duration: 2.5s;
														
 
															+          -o-animation-duration: 2.5s;
														
 
															+          animation-duration: 2.5s;
														
 
															+          -webkit-animation-delay: 2s;
														
 
															+          -moz-animation-delay: 2s;
														
 
															+          -o-animation-delay: 2s;
														
 
															+          animation-delay: 2s;
														
 
															+          bottom: -10px;
														
 
															+          right: 220px;
														
 
															+        }
														
 
															+        &:nth-child(10) {
														
 
															+          height: 95%;
														
 
															+          -webkit-animation-duration: 2s;
														
 
															+          -moz-animation-duration: 2s;
														
 
															+          -o-animation-duration: 2s;
														
 
															+          animation-duration: 2s;
														
 
															+          -webkit-animation-delay: 1s;
														
 
															+          -moz-animation-delay: 1s;
														
 
															+          -o-animation-delay: 1s;
														
 
															+          animation-delay: 1s;
														
 
															+          bottom: -41px;
														
 
															+          right: 182px;
														
 
															+        }
														
 
															+      }
														
 
															+      background: url(../../assets/img/pd-main-left-bg-2.png) no-repeat 50% 50%;
														
 
															+      .yun-tree {
														
 
															+        width: 100%;
														
 
															+        height: 100%;
														
 
															+        background: url(../../assets/img/pd-main-left-bg-tree.png) no-repeat 50% bottom;
														
 
															+        mix-blend-mode: screen;
														
 
															+      }
														
 
															+      .line-fs {
														
 
															+        width: 14px;
														
 
															+        height: 100%;
														
 
															+        background-image: url(../../assets/img/line-fs.png);
														
 
															+        background-repeat: no-repeat;
														
 
															+        background-position: 50% 150%;
														
 
															+        position: absolute;
														
 
															+        z-index: -1;
														
 
															+        -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
														
 
															+        -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
														
 
															+        -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
														
 
															+        animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
														
 
															+      }
														
 
															+    }
														
 
															+
														
 
															+    .yun-text {
														
 
															+      position: absolute;
														
 
															+      width: 318px;
														
 
															+      height: 195px;
														
 
															+      top: 0;
														
 
															+      left: 50%;
														
 
															+      margin-left: -161px;
														
 
															+      z-index: 2;
														
 
															+      .span-flash {
														
 
															+        color: #00f6ff;
														
 
															+        font-size: 12px;
														
 
															+        -webkit-animation-name: yun-flash;
														
 
															+        -moz-animation-name: yun-flash;
														
 
															+        -o-animation-name: yun-flash;
														
 
															+        animation-name: yun-flash;
														
 
															+        -webkit-animation-duration: 1s;
														
 
															+        -moz-animation-duration: 1s;
														
 
															+        -o-animation-duration: 1s;
														
 
															+        animation-duration: 1s;
														
 
															+        -webkit-animation-iteration-count: 1;
														
 
															+        -moz-animation-iteration-count: 1;
														
 
															+        -o-animation-iteration-count: 1;
														
 
															+        animation-iteration-count: 1;
														
 
															+      }
														
 
															+      div {
														
 
															+        position: absolute;
														
 
															+        white-space: nowrap;
														
 
															+        overflow: hidden;
														
 
															+        -o-text-overflow: ellipsis;
														
 
															+        text-overflow: ellipsis;
														
 
															+        width: 70px;
														
 
															+        height: 36px;
														
 
															+        line-height: 36px;
														
 
															+        word-wrap: break-word;
														
 
															+        word-break: break-all;
														
 
															+        opacity: 0.8;
														
 
															+        color: #00f6ff;
														
 
															+        span {
														
 
															+          font-size: 12px;
														
 
															+          cursor: pointer;
														
 
															+        }
														
 
															+        &:nth-child(1) {
														
 
															+          top: 84px;
														
 
															+          left: 26px;
														
 
															+        }
														
 
															+        &:nth-child(2) {
														
 
															+          top: 13px;
														
 
															+          left: 157px;
														
 
															+        }
														
 
															+        &:nth-child(3) {
														
 
															+          top: 105px;
														
 
															+          left: 35px;
														
 
															+        }
														
 
															+        &:nth-child(4) {
														
 
															+          top: 38px;
														
 
															+          left: 89px;
														
 
															+        }
														
 
															+        &:nth-child(5) {
														
 
															+          top: 43px;
														
 
															+          left: 178px;
														
 
															+        }
														
 
															+        &:nth-child(6) {
														
 
															+          top: 76px;
														
 
															+          left: 227px;
														
 
															+        }
														
 
															+        &:nth-child(7) {
														
 
															+          top: 63px;
														
 
															+          left: 66px;
														
 
															+        }
														
 
															+        &:nth-child(8) {
														
 
															+          top: 156px;
														
 
															+          left: 43px;
														
 
															+        }
														
 
															+        &:nth-child(9) {
														
 
															+          top: 130px;
														
 
															+          left: 16px;
														
 
															+        }
														
 
															+        &:nth-child(10) {
														
 
															+          top: 93px;
														
 
															+          left: 128px;
														
 
															+        }
														
 
															+        &:nth-child(11) {
														
 
															+          top: 106px;
														
 
															+          left: 241px;
														
 
															+        }
														
 
															+        &:nth-child(12) {
														
 
															+          top: 121px;
														
 
															+          left: 112px;
														
 
															+        }
														
 
															+        &:nth-child(13) {
														
 
															+          top: 67px;
														
 
															+          left: 153px;
														
 
															+        }
														
 
															+        &:nth-child(14) {
														
 
															+          top: 157px;
														
 
															+          left: 207px;
														
 
															+        }
														
 
															+        &:nth-child(15) {
														
 
															+          top: 132px;
														
 
															+          left: 206px;
														
 
															+        }
														
 
															+        &:nth-child(16) {
														
 
															+          top: 150px;
														
 
															+          left: 117px;
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes fs {
														
 
															+  0% {
														
 
															+    background-position: 50% 150%;
														
 
															+  }
														
 
															+  50% {
														
 
															+    background-position: 50% -132%;
														
 
															+  }
														
 
															+  100% {
														
 
															+    background-position: 50% -264%;
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+}
														
 
															+@-moz-keyframes fs {
														
 
															+  0% {
														
 
															+    background-position: 50% 150%;
														
 
															+  }
														
 
															+  50% {
														
 
															+    background-position: 50% -132%;
														
 
															+  }
														
 
															+  100% {
														
 
															+    background-position: 50% -264%;
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+}
														
 
															+@-o-keyframes fs {
														
 
															+  0% {
														
 
															+    background-position: 50% 150%;
														
 
															+  }
														
 
															+  50% {
														
 
															+    background-position: 50% -132%;
														
 
															+  }
														
 
															+  100% {
														
 
															+    background-position: 50% -264%;
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+}
														
 
															+@keyframes fs {
														
 
															+  0% {
														
 
															+    background-position: 50% 150%;
														
 
															+  }
														
 
															+  50% {
														
 
															+    background-position: 50% -132%;
														
 
															+  }
														
 
															+  100% {
														
 
															+    background-position: 50% -264%;
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes yun-flash {
														
 
															+  from,50%,
														
 
															+  to {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  25%,75% {
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+}
														
 
															+@-moz-keyframes yun-flash {
														
 
															+  from,50%,
														
 
															+  to {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  25%,75% {
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+}
														
 
															+@-o-keyframes yun-flash {
														
 
															+  from,50%,
														
 
															+  to {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  25%,75% {
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+}
														
 
															+@keyframes yun-flash {
														
 
															+  from,50%,
														
 
															+  to {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  25%,75% {
														
 
															+    opacity: 0;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/gauge/index.vue
+++ b/src/components/gauge/index.vue
@@ -0,0 +1,52 @@
 
															+<!--
														
 
															+ 描述: 仪表盘
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-05-03
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">仪表盘</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container"> 
														
 
															+          <div class="chartsdom" id="chart_gauge"></div> 
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "gauge",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    
														
 
															+  },
														
 
															+  methods: {
														
 
															+    
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 512px;
														
 
															+  top: 2838px;
														
 
															+  width: 432px;
														
 
															+  height: 400px;
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -16,6 +16,19 @@ import rotateColorful from './rotateColorful' // 旋转多彩图
 
															 import circleRunway from './circleRunway' // 环形跑道图
														
 
															 import scanRadius from './scanRadius' // 扫描半径图
														
 
															 import cakeLinkage from './cakeLinkage' // 柱饼组合联动
														
 
															+import dynamicLine from './dynamicLine' // 动态轮播折线图
														
 
															+import pyramidTrend from './pyramidTrend' // 金字塔趋势
														
 
															+import staffMix from './staffMix' // 人员占比
														
 
															+import flashCloud from './flashCloud' // 闪动云
														
 
															+import ringPie from './ringPie' // 环形饼图
														
 
															+import colorfulRadar from './colorfulRadar' // 多彩雷达
														
 
															+import dynamicList from './dynamicList' // 动态列表动画
														
 
															+import bar3d from './bar3d' // 3D立体柱状图
														
 
															+import colorfulArea from './colorfulArea' // 多彩轮播面积
														
 
															+import rainbow from './rainbow' // 彩虹轨道图
														
 
															+import gauge from './gauge' // 仪表盘
														
 
															+import waterPolo from './waterPolo' // 水球图
														
 
															+import circleNesting from './circleNesting' // 圆环套圆环
														
 
															 const components = {
														
 
															   bgAnimation,
														
@@ -30,6 +43,19 @@ const components = {
 
															   circleRunway,
														
 
															   scanRadius,
														
 
															   cakeLinkage,
														
 
															+  dynamicLine,
														
 
															+  pyramidTrend,
														
 
															+  staffMix,
														
 
															+  flashCloud,
														
 
															+  ringPie,
														
 
															+  colorfulRadar,
														
 
															+  dynamicList,
														
 
															+  bar3d,
														
 
															+  colorfulArea,
														
 
															+  rainbow,
														
 
															+  gauge,
														
 
															+  waterPolo,
														
 
															+  circleNesting,
														
 
															 };
														
--- a/src/components/pyramidTrend/index.vue
+++ b/src/components/pyramidTrend/index.vue
@@ -0,0 +1,211 @@
 
															+<!--
														
 
															+ 描述: 金字塔趋势
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-04-18
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">金字塔趋势</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container"> 
														
 
															+          <div class="chartsdom" id="chart_ptrend"></div>
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+
														
 
															+export default {
														
 
															+  name: "pyramidTrend",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      option: null,
														
 
															+      dataMap: {}
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    this.getEchart();
														
 
															+  },
														
 
															+  methods: {
														
 
															+    dataFormatter(obj) {
														
 
															+      let pList = ['长沙','湘潭','株洲','岳阳','邵阳','衡阳','益阳','娄底','怀化','湘西','张家界','郴州','常德','永州'];
														
 
															+      let temp;
														
 
															+      for (let x = 0; x < 3; x++) {
														
 
															+          let max = 0;
														
 
															+          let sum = 0;
														
 
															+          temp = obj[x];
														
 
															+          for (let i = 0, l = temp.length; i < l; i++) {
														
 
															+              max = Math.max(max, temp[i]);
														
 
															+              sum += temp[i];
														
 
															+              obj[x][i] = {
														
 
															+                name: pList[i],
														
 
															+                value: temp[i]
														
 
															+              };
														
 
															+          }
														
 
															+          obj[x + 'max'] = Math.floor(max / 100) * 100;
														
 
															+          obj[x + 'sum'] = sum;
														
 
															+      }
														
 
															+      return obj;
														
 
															+    },
														
 
															+    getEchart() {
														
 
															+      let myChart = echarts.init(document.getElementById('chart_ptrend'));
														
 
															+      let itemStyle = {
														
 
															+        barBorderRadius: [15, 0],
														
 
															+        color: '#0084ff'
														
 
															+      }
														
 
															+
														
 
															+      this.dataMap.dataType = this.dataFormatter({
														
 
															+        2:[124,145,261,54,195,131,150,39,11,40,23,51,45,88],
														
 
															+        1:[136,159,205,41,306,7,77,101,24,34,8,15,14,9],
														
 
															+        0:[118,128,220,47,92,14,9,11,113,61,11,22,33,5],
														
 
															+      });
														
 
															+
														
 
															+      this.option = {
														
 
															+        baseOption: {
														
 
															+          timeline: {
														
 
															+            axisType: 'category',
														
 
															+            autoPlay: true,
														
 
															+            playInterval: 1000,
														
 
															+            data: ['一类', '二类', '三类'],
														
 
															+            left: 80,
														
 
															+            right: 80,
														
 
															+            bottom: 10,
														
 
															+            lineStyle: {
														
 
															+              color: '#179bf1'
														
 
															+            },
														
 
															+            label: {
														
 
															+              color: '#fff'
														
 
															+            },
														
 
															+            checkpointStyle: {
														
 
															+              color: '#01d8ff',
														
 
															+              symbolSize: 10,
														
 
															+              borderColor: 'rgba(1, 216, 255, 0.5)',
														
 
															+              borderWidth: 5,
														
 
															+            },
														
 
															+            controlStyle: {
														
 
															+              show: false,
														
 
															+            }, 
														
 
															+            itemStyle: {
														
 
															+              borderColor: '#004b85',
														
 
															+              borderWidth: 1,
														
 
															+              shadowColor: 'rgba(1, 216, 225, 0.5)',
														
 
															+              shadowBlur: 5
														
 
															+            },
														
 
															+            emphasis: {
														
 
															+              label: {
														
 
															+                color: '#01d8ff',
														
 
															+                show: false
														
 
															+              },
														
 
															+              checkpointStyle: {
														
 
															+                color: '#01d8ff',
														
 
															+                borderColor: 'rgba(1, 216, 255, 0.5)',
														
 
															+                borderWidth: 5,
														
 
															+              },
														
 
															+              itemStyle: {
														
 
															+                color: '#01d8ff',
														
 
															+                borderColor: 'rgba(1, 216, 225, 0.5)',
														
 
															+                borderWidth: 5
														
 
															+              } 
														
 
															+            }
														
 
															+          },
														
 
															+          calculable: true,
														
 
															+          grid: {
														
 
															+            top: '10%',
														
 
															+            bottom: '25%'
														
 
															+          },
														
 
															+          xAxis: [{
														
 
															+            type: 'category',
														
 
															+            axisLabel: {
														
 
															+              interval: 0
														
 
															+            },
														
 
															+            data: ['长沙','湘潭','株洲','岳阳','邵阳','衡阳','益阳','娄底','怀化','湘西','张家界','郴州','常德','永州'],
														
 
															+            splitLine: { 
														
 
															+              show: false 
														
 
															+            },
														
 
															+            axisTick: {
														
 
															+              show: false
														
 
															+            }, 
														
 
															+            axisLine: {
														
 
															+              show: true,
														
 
															+              lineStyle: {
														
 
															+                color: '#2867a8',
														
 
															+              }
														
 
															+            },
														
 
															+          }],
														
 
															+          yAxis: [{
														
 
															+            type: 'value',
														
 
															+            name: '家',
														
 
															+            splitLine: {
														
 
															+              show: false
														
 
															+            },
														
 
															+            axisTick: {
														
 
															+              show: false
														
 
															+            }, 
														
 
															+            axisLine: {
														
 
															+              show: true,
														
 
															+              lineStyle: {
														
 
															+                color: '#2867a8'
														
 
															+              }
														
 
															+            }
														
 
															+          }],
														
 
															+          series: [{
														
 
															+            name: '一类', 
														
 
															+            type: 'bar',
														
 
															+            barWidth: 15,
														
 
															+            legendHoverLink: true,
														
 
															+            label: {
														
 
															+              show: true,
														
 
															+              position: 'top',
														
 
															+              color: '#fff'
														
 
															+            },
														
 
															+          }]
														
 
															+        },
														
 
															+        options: [{
														
 
															+          series: [{
														
 
															+            data: this.dataMap.dataType['0'],
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          series: [{
														
 
															+            data: this.dataMap.dataType['1'],
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          series: [{
														
 
															+            data: this.dataMap.dataType['2'],
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        }]
														
 
															+      }
														
 
															+
														
 
															+      myChart.setOption(this.option, true);
														
 
															+
														
 
															+      window.addEventListener('resize', () => {
														
 
															+        myChart.resize();
														
 
															+      });
														
 
															+    }
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 666px;
														
 
															+  top: 1548px;
														
 
															+  width: 586px;
														
 
															+  height: 400px;
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+
														
 
															+</style>
														
--- a/src/components/rainbow/index.vue
+++ b/src/components/rainbow/index.vue
@@ -0,0 +1,410 @@
 
															+<!--
														
 
															+ 描述: 彩虹轨道图
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-04-18
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">彩虹轨道</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container"> 
														
 
															+          <div class="chartsdom" id="chart_rbt"></div>
														
 
															+
														
 
															+          <div class="preinfo" :class="`preinfo${index}`" v-for="(item, index) in arrData" :key="index">
														
 
															+            <span>{{ item.percent }}%</span>
														
 
															+            <span>{{ item.name }}</span>
														
 
															+          </div>
														
 
															+
														
 
															+          <div class="preinfos" :class="`pre${i}`" v-for="(v, i) in arrData">
														
 
															+            <span></span>
														
 
															+            <span></span>
														
 
															+          </div>
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "rainbow",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      option: null,
														
 
															+      arrData: [{
														
 
															+        name: '食品类',
														
 
															+        percent: 73
														
 
															+      },{
														
 
															+        name: '工业类',
														
 
															+        percent: 20
														
 
															+      },{
														
 
															+        name: '医疗类',
														
 
															+        percent: 32
														
 
															+      },{
														
 
															+        name: '政务类',
														
 
															+        percent: 60
														
 
															+      },{
														
 
															+        name: '金融类',
														
 
															+        percent: 14
														
 
															+      }]
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    this.getEchart();
														
 
															+  },
														
 
															+  methods: {
														
 
															+    getEchart() {
														
 
															+      let myChart = echarts.init(document.getElementById('chart_rbt'));
														
 
															+      let itemStyle = {
														
 
															+        normal: {
														
 
															+          color: 'rgba(0, 0, 0, 0)',
														
 
															+        }
														
 
															+      }
														
 
															+
														
 
															+      this.option = {
														
 
															+        color: ['#125ec1', '#3fa5c0', '#d68639', '#ad5b68', '#6082a5'],
														
 
															+        series: [{
														
 
															+          name: '金融类',
														
 
															+          type: 'pie',
														
 
															+          clockWise: false,
														
 
															+          startAngle: 90,
														
 
															+          hoverAnimation: false,
														
 
															+          radius: ['85%', '90%'],
														
 
															+          center: ['50%', '50%'],
														
 
															+          label: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            },
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            }
														
 
															+          },
														
 
															+          itemStyle: {
														
 
															+            shadowColor: '#125ec1',
														
 
															+            shadowBlur: 15
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 15,
														
 
															+            name: '15%',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: '#125ec1'
														
 
															+              }
														
 
															+            }
														
 
															+          },{
														
 
															+            value: 85,
														
 
															+            name: '50%',
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          name: '政务类',
														
 
															+          type: 'pie',
														
 
															+          clockWise: false,
														
 
															+          startAngle: 90,
														
 
															+          hoverAnimation: false,
														
 
															+          radius: ['72%', '77%'],
														
 
															+          center: ['50%', '50%'],
														
 
															+          label: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            },
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            }
														
 
															+          },
														
 
															+          itemStyle: {
														
 
															+            shadowColor: '#3fa5c0',
														
 
															+            shadowBlur: 15
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 60,
														
 
															+            name: '60%',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: '#3fa5c0'
														
 
															+              }
														
 
															+            }
														
 
															+          },{
														
 
															+            value: 40,
														
 
															+            name: '40%',
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          name: '医疗类',
														
 
															+          type: 'pie',
														
 
															+          clockWise: false,
														
 
															+          startAngle: 90,
														
 
															+          hoverAnimation: false,
														
 
															+          radius: ['59%', '64%'],
														
 
															+          center: ['50%', '50%'],
														
 
															+          label: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            },
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            }
														
 
															+          },
														
 
															+          itemStyle: {
														
 
															+            shadowColor: '#d68639',
														
 
															+            shadowBlur: 15
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 32,
														
 
															+            name: '32%',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: '#d68639'
														
 
															+              }
														
 
															+            }
														
 
															+          },{
														
 
															+            value: 68,
														
 
															+            name: '68%',
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          name: '工业类',
														
 
															+          type: 'pie',
														
 
															+          clockWise: false,
														
 
															+          startAngle: 90,
														
 
															+          hoverAnimation: false,
														
 
															+          radius: ['46%', '51%'],
														
 
															+          center: ['50%', '50%'],
														
 
															+          label: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            },
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            }
														
 
															+          },
														
 
															+          itemStyle: {
														
 
															+            shadowColor: '#ad5b68',
														
 
															+            shadowBlur: 15
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 20,
														
 
															+            name: '20%',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: '#ad5b68'
														
 
															+              }
														
 
															+            }
														
 
															+          },{
														
 
															+            value: 80,
														
 
															+            name: '80%',
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        },{
														
 
															+          name: '食品类',
														
 
															+          type: 'pie',
														
 
															+          clockWise: false,
														
 
															+          startAngle: 90,
														
 
															+          hoverAnimation: false,
														
 
															+          radius: ['33%', '38%'],
														
 
															+          center: ['50%', '50%'],
														
 
															+          label: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            },
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            normal: {
														
 
															+              show: false
														
 
															+            }
														
 
															+          },
														
 
															+          itemStyle: {
														
 
															+            shadowColor: '#6082a5',
														
 
															+            shadowBlur: 15
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 73,
														
 
															+            name: '73%',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: '#6082a5'
														
 
															+              }
														
 
															+            }
														
 
															+          },{
														
 
															+            value: 27,
														
 
															+            name: '27%',
														
 
															+            itemStyle: itemStyle
														
 
															+          }]
														
 
															+        }]
														
 
															+      }
														
 
															+
														
 
															+      // 使用制定的配置项和数据显示图表
														
 
															+      myChart.setOption(this.option, true);
														
 
															+
														
 
															+      window.addEventListener('resize', () => {
														
 
															+        myChart.resize();
														
 
															+      });
														
 
															+    }
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 50px;
														
 
															+  top: 2838px;
														
 
															+  width: 432px;
														
 
															+  height: 400px;
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+
														
 
															+  .preinfo {
														
 
															+    position: absolute;
														
 
															+    left: 63%;
														
 
															+    top: 50%;
														
 
															+    margin-left: -2.5em;
														
 
															+    -webkit-transform: translate(0%,-50%);
														
 
															+    -moz-transform: translate(0%,-50%);
														
 
															+    -ms-transform: translate(0%,-50%);
														
 
															+    -o-transform: translate(0%,-50%);
														
 
															+    transform: translate(0%,-50%);
														
 
															+    white-space: nowrap;
														
 
															+    font-size: 13px;
														
 
															+    span {
														
 
															+      &:nth-child(1) {
														
 
															+        margin-right: 10px;
														
 
															+      }
														
 
															+    }
														
 
															+    &.preinfo0 {
														
 
															+      color: rgb(99, 139, 176); 
														
 
															+      margin-top: -65px;
														
 
															+    }
														
 
															+    &.preinfo1 {
														
 
															+      color: rgb(180, 91, 111); 
														
 
															+      margin-top: -87px;
														
 
															+    }
														
 
															+    &.preinfo2 {
														
 
															+      color: rgb(232, 138, 50); 
														
 
															+      margin-top: -109px;
														
 
															+    }
														
 
															+    &.preinfo3 {
														
 
															+      color: rgb(70, 179, 200); 
														
 
															+      margin-top: -131px;
														
 
															+    }
														
 
															+    &.preinfo4 {
														
 
															+      color: rgb(19, 98, 201); 
														
 
															+      margin-top: -153px;
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .preinfos {
														
 
															+    position: absolute;
														
 
															+    left: 50%;
														
 
															+    top: 50%;
														
 
															+    width: 1px;
														
 
															+    height: 58px;
														
 
															+    background-color: rgb(99, 139, 176);
														
 
															+    -webkit-transform-origin: 50% 0;
														
 
															+    -moz-transform-origin: 50% 0;
														
 
															+    -ms-transform-origin: 50% 0;
														
 
															+    -o-transform-origin: 50% 0;
														
 
															+    transform-origin: 50% 0;
														
 
															+    span {
														
 
															+      &:nth-child(1) {
														
 
															+        width:8px;
														
 
															+        height:8px;
														
 
															+        -webkit-border-radius:100%;
														
 
															+        -moz-border-radius:100%;
														
 
															+        border-radius:100%;
														
 
															+        position:absolute;
														
 
															+        left: -3px;
														
 
															+        top: 50%;
														
 
															+      }
														
 
															+      &:nth-child(2) {
														
 
															+        width: 0;
														
 
															+        height: 0;
														
 
															+        border-width: 12px 5px 5px 5px;
														
 
															+        border-style: solid;
														
 
															+        position: absolute;
														
 
															+        left: -5px;
														
 
															+        top: 100%;
														
 
															+      }
														
 
															+    }
														
 
															+    &.pre0 {
														
 
															+      height: 65px; 
														
 
															+      background-color: rgb(99, 139, 176); 
														
 
															+      transform: rotate(-62.614deg);
														
 
															+      span {
														
 
															+        &:nth-child(1) {
														
 
															+          background-color: rgb(99, 139, 176);
														
 
															+        }
														
 
															+        &:nth-child(2) {
														
 
															+          border-color: rgb(99, 139, 176) transparent transparent;
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+    &.pre1 {
														
 
															+      height: 87px; 
														
 
															+      background-color: rgb(180, 91, 111); 
														
 
															+      transform: rotate(125.593deg);
														
 
															+      span {
														
 
															+        &:nth-child(1) {
														
 
															+          background-color: rgb(180, 91, 111);
														
 
															+        }
														
 
															+        &:nth-child(2) {
														
 
															+          border-color: rgb(180, 91, 111) transparent transparent;
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+    &.pre2 {
														
 
															+      height: 109px; 
														
 
															+      background-color: rgb(232, 138, 50); 
														
 
															+      transform: rotate(86.2006deg);
														
 
															+      span {
														
 
															+        &:nth-child(1) {
														
 
															+          background-color: rgb(232, 138, 50);
														
 
															+        }
														
 
															+        &:nth-child(2) {
														
 
															+          border-color: rgb(232, 138, 50) transparent transparent;
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+    &.pre3 {
														
 
															+      height: 131px; 
														
 
															+      background-color: rgb(70, 179, 200); 
														
 
															+      transform: rotate(-18.845deg);
														
 
															+      span {
														
 
															+        &:nth-child(1) {
														
 
															+          background-color: rgb(70, 179, 200);
														
 
															+        }
														
 
															+        &:nth-child(2) {
														
 
															+          border-color: rgb(70, 179, 200) transparent transparent;
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+    &.pre4 {
														
 
															+      height: 153px; 
														
 
															+      background-color: rgb(19, 98, 201); 
														
 
															+      transform: rotate(149.666deg);
														
 
															+      span {
														
 
															+        &:nth-child(1) {
														
 
															+          background-color: rgb(19, 98, 201);
														
 
															+        }
														
 
															+        &:nth-child(2) {
														
 
															+          border-color: rgb(19, 98, 201) transparent transparent;
														
 
															+        }
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/ringPie/index.vue
+++ b/src/components/ringPie/index.vue
@@ -0,0 +1,192 @@
 
															+<!--
														
 
															+ 描述: 环形饼图
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-05-02
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">环形饼图</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container ring-pie"> 
														
 
															+          <div class="back-chart"> 
														
 
															+           <svg width="100%" height="100%" viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
														
 
															+            <path id="svg_2" d="m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z" stroke="#2de6af" fill-opacity="null" fill="none"></path> 
														
 
															+           </svg> 
														
 
															+          </div>
														
 
															+
														
 
															+          <div class="chartsdom" id="chart_rp"></div>
														
 
															+
														
 
															+          <div class="arrow-cir arrow-cir1"></div>
														
 
															+          <div class="arrow-cir arrow-cir2"></div>
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "ringPie",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      option: null
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    this.getEchart();
														
 
															+  },
														
 
															+  methods: {
														
 
															+    getEchart() {
														
 
															+      let myChart = echarts.init(document.getElementById('chart_rp'));
														
 
															+      this.option = {
														
 
															+        series: [{
														
 
															+          name: '环形饼图',
														
 
															+          type: 'pie',
														
 
															+          radius: ['68%', '80%'],
														
 
															+          hoverAnimation: false,
														
 
															+          avoidLabelOverlap: false,
														
 
															+          label: {
														
 
															+            show: false,
														
 
															+            position: 'center'
														
 
															+          },
														
 
															+          emphasis: {
														
 
															+            label: {
														
 
															+              show: false
														
 
															+            }
														
 
															+          },
														
 
															+          labelLine: {
														
 
															+            show: false
														
 
															+          },
														
 
															+          data: [{
														
 
															+            value: 6, 
														
 
															+            name: '区块链',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														
 
															+                  offset: 0, 
														
 
															+                  color: '#6984fe'
														
 
															+                },{
														
 
															+                  offset: 1, 
														
 
															+                  color: '#24d1fd'
														
 
															+                }])
														
 
															+              }
														
 
															+            }
														
 
															+          },{
														
 
															+            value: 4, 
														
 
															+            name: '大数据',
														
 
															+            itemStyle: {
														
 
															+              normal: {
														
 
															+                color: '#eee'
														
 
															+              }
														
 
															+            }
														
 
															+          }]
														
 
															+        }]
														
 
															+      }
														
 
															+
														
 
															+      myChart.setOption(this.option, true);
														
 
															+
														
 
															+      window.addEventListener('resize', () => {
														
 
															+        myChart.resize();
														
 
															+      });
														
 
															+    }
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 974px;
														
 
															+  top: 1978px;
														
 
															+  width: 432px;
														
 
															+  height: 400px;
														
 
															+  .wrap-container {
														
 
															+    left: 125px;
														
 
															+    top: 94px;
														
 
															+    width: 150px;
														
 
															+    height: 150px;
														
 
															+  }
														
 
															+  .chartsdom {
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+  }
														
 
															+
														
 
															+  .back-chart{
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+    position: absolute;
														
 
															+    left: 0;
														
 
															+    top: 0;
														
 
															+    background:url(../../assets/img/back_chart.png) no-repeat center;
														
 
															+  }
														
 
															+  .arrow-cir {
														
 
															+    width: 8px;
														
 
															+    height: 8px;
														
 
															+    offset-distance: 0%;
														
 
															+    position: absolute;
														
 
															+    top: 0;
														
 
															+    left: 0;
														
 
															+    opacity: 0;
														
 
															+    &.arrow-cir1 {
														
 
															+      background: url(../../assets/img/icon_04.png) no-repeat 50% 50%;
														
 
															+      -webkit-animation: arrow-cir1 5s linear infinite;
														
 
															+      animation: arrow-cir1 5s linear infinite;
														
 
															+      offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z");
														
 
															+    }
														
 
															+    &.arrow-cir2 {
														
 
															+      background: url(../../assets/img/icon_05.png) no-repeat 50% 50%;
														
 
															+      -webkit-animation: arrow-cir2 5s linear infinite;
														
 
															+      animation: arrow-cir2 5s linear infinite;
														
 
															+      offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z");
														
 
															+    }
														
 
															+  }
														
 
															+  
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes arrow-cir1 {
														
 
															+  0% {
														
 
															+    offset-distance: 40%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  100% {
														
 
															+    offset-distance: 140%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+@keyframes arrow-cir1 {
														
 
															+  0% {
														
 
															+    offset-distance: 40%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  100% {
														
 
															+    offset-distance: 140%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes arrow-cir2 {
														
 
															+  0% {
														
 
															+    offset-distance: 0%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  100% {
														
 
															+    offset-distance: 100%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+@keyframes arrow-cir2 {
														
 
															+  0% {
														
 
															+    offset-distance: 0%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+  100% {
														
 
															+    offset-distance: 100%;
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/scrollArc/index.vue
+++ b/src/components/scrollArc/index.vue
@@ -38,6 +38,7 @@ export default {
 
															       this.option = {
														
 
															         tooltip: {
														
 
															           trigger: 'axis',
														
 
															+          showContent: false,
														
 
															           axisPointer: { 
														
 
															             type: 'shadow',
														
 
															             shadowStyle: {
														
@@ -53,7 +54,7 @@ export default {
 
															         },
														
 
															         color: ['#5d83ff'],
														
 
															         grid: {
														
 
															-          top: 20,
														
 
															+          top: 30,
														
 
															           left: 20,
														
 
															           right: 20,
														
 
															           bottom: 20,
														
@@ -62,6 +63,7 @@ export default {
 
															         xAxis: {
														
 
															           type: 'category',
														
 
															           data: this.xData,
														
 
															+          boundaryGap: false,
														
 
															           axisTick: {
														
 
															             show: false
														
 
															           }, 
														
@@ -87,6 +89,23 @@ export default {
 
															           name: '人数',
														
 
															           type: 'line',
														
 
															           data: this.data,
														
 
															+          symbolSize: 10,
														
 
															+          itemStyle: {
														
 
															+            opacity: 0,
														
 
															+          },
														
 
															+          emphasis: {
														
 
															+            label: {
														
 
															+              show: true,
														
 
															+              color: '#fff',
														
 
															+              fontSize: 20
														
 
															+            },
														
 
															+            itemStyle: {
														
 
															+              color: '#5d83ff',
														
 
															+              borderColor: '#fff',
														
 
															+              borderWidth: 2,
														
 
															+              opacity: 1
														
 
															+            },
														
 
															+          },
														
 
															           areaStyle: {
														
 
															             normal: {
														
 
															               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														
--- a/src/components/staffMix/index.vue
+++ b/src/components/staffMix/index.vue
@@ -0,0 +1,213 @@
 
															+<!--
														
 
															+ 描述: 人员占比
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-05-02
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">人员占比</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container"> 
														
 
															+          <div class="person"> 
														
 
															+           <div class="pers person1"></div> 
														
 
															+           <div class="pers person2"></div> 
														
 
															+           <div class="pers person3"></div> 
														
 
															+          </div>
														
 
															+
														
 
															+          <div class="svgs"> 
														
 
															+           <svg width="244" height="264" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
														
 
															+            <defs> 
														
 
															+             <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%"> 
														
 
															+              <stop offset="0%" style="stop-color:#0a6aff;stop-opacity:0.47"></stop> 
														
 
															+              <stop offset="40%" style="stop-color:#5cffff;stop-opacity:1"></stop> 
														
 
															+              <stop offset="100%" style="stop-color:#0a6aff;stop-opacity:1"></stop> 
														
 
															+             </linearGradient> 
														
 
															+             <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"> 
														
 
															+              <path d="M0,0 L0,6 L9,3 z" fill="rgb(11,108,255)"></path> 
														
 
															+             </marker> 
														
 
															+            </defs> 
														
 
															+            <path d="M134 86C136 86 80 85 77 208" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)"></path> 
														
 
															+            <path d="M136 86C138 86 212 88 204 208" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)"></path> 
														
 
															+            <path d="M136 84C138 84 195 84 206 116" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)"></path> 
														
 
															+            <path d="M134 84C136 84 81 82 58 123" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)"></path> 
														
 
															+            <path d="M132 86C134 86 120 68 93 67" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)"></path> 
														
 
															+            <path d="M134 86C136 86 132 78 134 74C136 69 150 52 150 52" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)"></path> 
														
 
															+            <path d="M134 85C136 85 146 65 183 65" fill="none" fill-opacity="0" stroke="url(#linear)" marker-end="url(#arrow)"></path> 
														
 
															+           </svg> 
														
 
															+          </div>
														
 
															+
														
 
															+          <div class="svgs"> 
														
 
															+           <div class="text" :class="`per${index + 1}`" v-for="(item, index) in arrData" :key="index">
														
 
															+            <span>{{ item.name }}</span>
														
 
															+            <span>{{ item.number }}</span>人
														
 
															+           </div> 
														
 
															+          </div>
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "staffMix",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      arrData: [{
														
 
															+        name: '前端工程师',
														
 
															+        number: 3
														
 
															+      },{
														
 
															+        name: '后端工程师',
														
 
															+        number: 5
														
 
															+      },{
														
 
															+        name: '网页设计师',
														
 
															+        number: 2
														
 
															+      },{
														
 
															+        name: '测试工程师',
														
 
															+        number: 2
														
 
															+      },{
														
 
															+        name: '产品经理',
														
 
															+        number: 1
														
 
															+      },{
														
 
															+        name: '安卓工程师',
														
 
															+        number: 1
														
 
															+      },{
														
 
															+        name: 'IOS工程师',
														
 
															+        number: 1
														
 
															+      }]
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    
														
 
															+  },
														
 
															+  methods: {
														
 
															+    
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 50px;
														
 
															+  top: 1978px;
														
 
															+  width: 432px;
														
 
															+  height: 400px;
														
 
															+  .person{
														
 
															+    position: absolute;
														
 
															+    top: 0;
														
 
															+    width: 100%;
														
 
															+    height: 100%;
														
 
															+    .pers{
														
 
															+      width: 100%;
														
 
															+      height: 100%;
														
 
															+      position: absolute;
														
 
															+      top: 0;
														
 
															+      left: 0;
														
 
															+      background-repeat: no-repeat;
														
 
															+      background-position: center center;
														
 
															+      &.person1{
														
 
															+        background-image: url(../../assets/img/online.png);
														
 
															+        transform: rotateX(64deg) rotateZ(0deg);
														
 
															+        top: 16%;
														
 
															+      }
														
 
															+      &.person2{
														
 
															+        background-image: url(../../assets/img/cir-2.png);
														
 
															+        animation: move 10s linear infinite;
														
 
															+        -webkit-animation: move 10s linear infinite;
														
 
															+        transform: rotateX(64deg);
														
 
															+        top: 16%;
														
 
															+      }
														
 
															+      &.person3{
														
 
															+        background-image: url(../../assets/img/person-1.png);
														
 
															+        top: 5%;
														
 
															+      }
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  .svgs{
														
 
															+    width: 270px;
														
 
															+    height: 260px;
														
 
															+    margin: auto;
														
 
															+    top: 0;
														
 
															+    position: absolute;
														
 
															+    right: 0;
														
 
															+    left: 0;
														
 
															+    bottom: 0;
														
 
															+  }
														
 
															+  .text{
														
 
															+    position: absolute;
														
 
															+    width: 50px;
														
 
															+    height: 50px;
														
 
															+    background-image: url(../../assets/img/cir-1.png);
														
 
															+    background-repeat: no-repeat;
														
 
															+    background-position: center center;
														
 
															+    color: rgb(114,198,230);
														
 
															+    text-align: center;
														
 
															+    span {
														
 
															+      &:nth-child(1) {
														
 
															+        display: block;
														
 
															+        width: 52px;
														
 
															+        margin-top: 10px;
														
 
															+        line-height: 12px;
														
 
															+        transform: scale(0.85);
														
 
															+        height: 22px;
														
 
															+      }
														
 
															+      &:nth-child(2) {
														
 
															+        font-size: 14px;
														
 
															+        font-weight: bold;
														
 
															+      }
														
 
															+    }
														
 
															+    &.per1{
														
 
															+      top: 215px;
														
 
															+      left: 50px;
														
 
															+    }
														
 
															+    &.per2{
														
 
															+      top: 113px;
														
 
															+      left: 3px;
														
 
															+    }
														
 
															+    &.per3{
														
 
															+      top: 45px;
														
 
															+      left: 35px;
														
 
															+    }
														
 
															+    &.per4{
														
 
															+      left: 120px;
														
 
															+    }
														
 
															+    &.per5{
														
 
															+      top: 45px;
														
 
															+      left: 190px;
														
 
															+    }
														
 
															+    &.per6{
														
 
															+      top: 105px;
														
 
															+      left: 210px;
														
 
															+    }
														
 
															+    &.per7{
														
 
															+      top: 215px;
														
 
															+      left: 180px;
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes move {
														
 
															+  0%  {
														
 
															+    transform: rotateX(-64deg) rotateZ(360deg);
														
 
															+  }
														
 
															+  100%  {
														
 
															+    transform: rotateX(-64deg) rotateZ(0deg);
														
 
															+  }
														
 
															+}
														
 
															+@keyframes move {
														
 
															+  0% {
														
 
															+    transform: rotateX(-64deg) rotateZ(360deg);
														
 
															+  }
														
 
															+  100% {
														
 
															+    transform: rotateX(-64deg) rotateZ(0deg);
														
 
															+  }
														
 
															+}
														
 
															+</style>
														
--- a/src/components/waterPolo/index.vue
+++ b/src/components/waterPolo/index.vue
@@ -0,0 +1,48 @@
 
															+<!--
														
 
															+ 描述: 水球图
														
 
															+ 作者: Jack Chen
														
 
															+ 日期: 2020-05-03
														
 
															+-->
														
 
															+
														
 
															+<template>
														
 
															+  <div class="wrap-container sn-container"> 
														
 
															+    <div class="sn-content"> 
														
 
															+      <div class="sn-title">水球图</div> 
														
 
															+      <div class="sn-body"> 
														
 
															+        <div class="wrap-container"> 
														
 
															+          <div class="chartsdom" id="chart_polo"></div> 
														
 
															+        </div> 
														
 
															+      </div> 
														
 
															+    </div>   
														
 
															+  </div>
														
 
															+</template>
														
 
															+
														
 
															+<script>
														
 
															+export default {
														
 
															+  name: "waterPolo",
														
 
															+  data() {
														
 
															+    return {
														
 
															+      
														
 
															+      
														
 
															+    }
														
 
															+  },
														
 
															+  mounted() {
														
 
															+    
														
 
															+  },
														
 
															+  methods: {
														
 
															+    
														
 
															+  },
														
 
															+  beforeDestroy() {
														
 
															+    
														
 
															+  }
														
 
															+};
														
 
															+</script>
														
 
															+
														
 
															+<style lang="scss" scoped>
														
 
															+.sn-container {
														
 
															+  left: 974px;
														
 
															+  top: 2838px;
														
 
															+  width: 432px;
														
 
															+  height: 400px;
														
 
															+}
														
 
															+</style>
														
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -22,6 +22,22 @@
 
															       <scanRadius />
														
 
															       <cakeLinkage />
														
 
															+      <pyramidTrend />
														
 
															+      <dynamicLine />
														
 
															+
														
 
															+      <staffMix />
														
 
															+      <flashCloud />
														
 
															+      <ringPie />
														
 
															+      <colorfulRadar />
														
 
															+
														
 
															+      <dynamicList />
														
 
															+      <bar3d />
														
 
															+      <colorfulArea />
														
 
															+
														
 
															+      <rainbow />
														
 
															+      <gauge />
														
 
															+      <waterPolo />
														
 
															+      <circleNesting />
														
 
															       <div class="divider"></div>
														
@@ -88,9 +104,12 @@ export default {
 
															     .divider {
														
 
															       position: absolute;
														
 
															       left: 50px;
														
 
															-      top: 2000px;
														
 
															+      top: 3253px;
														
 
															       width: 90%;
														
 
															       height: 50px;
														
 
															+      width: 300px;
														
 
															+      border: none;
														
 
															+      background: transparent;
														
 
															     }
														
 
															   }