5 lat temu · 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;
			
 
				     }
			
 
				 
			
 
				   }