style: 更新代码风格

src/App.vue

@@ -1,24 +1,24 @@
 <template>
   <div id="app" v-cloak>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <script>
 export default {
-  name: "App"
-};
+  name: `App`,
+}
 </script>
 
 <style lang="less">
 #app {
-	-moz-osx-font-smoothing: grayscale;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	-webkit-font-smoothing: antialiased;
-	-webkit-user-select: none;
-	height: 100%;
-	user-select: none;
-	width: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -webkit-user-select: none;
+  height: 100%;
+  user-select: none;
+  width: 100%;
 }
 </style>

src/components/bar3d/index.vue

@@ -16,22 +16,21 @@
 
 <script>
 export default {
-  name: "bar3d",
+  name: `bar3d`,
   data() {
     return {
-      option: null
-      
+      option: null,
     }
   },
   mounted() {
-    this.getEchart();
+    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 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],
@@ -73,33 +72,33 @@ export default {
         [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]
-      ];
+        [3, 2, 2, sex[1], xData[1], 5000, 51],
+      ]
 
       this.option = {
         tooltip: {
-          borderColor: '#8a704e',
+          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;
+            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
-          }
+            color: `#8a704e`,
+            fontSize: 16,
+          },
         },
         xAxis3D: {
-          type: 'category',
-          data: xData
+          type: `category`,
+          data: xData,
         },
         yAxis3D: {
-          type: 'category',
-          data: days
+          type: `category`,
+          data: days,
         },
         zAxis3D: {
-          type: 'value'
+          type: `value`,
         },
         grid3D: {
           show: false,
@@ -107,47 +106,55 @@ export default {
           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
+            beta: 15,
           },
-          emphasis: {
+        },
+        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
+              show: false,
             },
             itemStyle: {
-              color: '#0084ff'
-            }
-          }
-        }]
+              color: `#0084ff`,
+              opacity: 0.8,
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+              itemStyle: {
+                color: `#0084ff`,
+              },
+            },
+          },
+        ],
       }
 
-      myChart.setOption(this.option, true);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -184,7 +191,5 @@ export default {
       filter: hue-rotate(180deg);
     }
   }
-
- 
 }
 </style>

src/components/bgAnimation/index.vue

@@ -14,10 +14,9 @@
 </template>
 
 <script>
-
 export default {
-  name: "bgAnimation"
-};
+  name: `bgAnimation`,
+}
 </script>
 
 <style lang="scss">
@@ -25,7 +24,7 @@ export default {
   position: fixed;
   width: 100%;
   height: 100%;
-  background: rgba(0, 134, 179, .5);
+  background: rgba(0, 134, 179, 0.5);
   top: 0;
   left: 0;
   z-index: 0;

src/components/cakeLinkage/index.vue

@@ -5,440 +5,516 @@
 -->
 
 <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_bp"></div> 
-        </div> 
-      </div> 
-    </div>   
+  <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_bp"></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "cakeLinkage",
+  name: `cakeLinkage`,
   data() {
     return {
       option: null,
       dataMap: {},
-
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     dataFormatter(obj) {
-      let pList = ['金融类', '政务类', '医疗类', '互联网类'];
-      let temp;
+      let pList = [`金融类`, `政务类`, `医疗类`, `互联网类`]
+      let temp
       for (let y = 2016; y <= 2020; y++) {
-        let max = 0;
-        let sum = 0;
-        temp = obj[y];
+        let max = 0
+        let sum = 0
+        temp = obj[y]
         for (let i = 0, l = temp.length; i < l; i++) {
-          max = Math.max(max, temp[i]);
-          sum += temp[i];
+          max = Math.max(max, temp[i])
+          sum += temp[i]
           obj[y][i] = {
             name: pList[i],
-            value: temp[i]
-          };
+            value: temp[i],
+          }
         }
-        obj[y + 'max'] = Math.floor(max / 100) * 100;
-        obj[y + 'sum'] = sum;
+        obj[y + `max`] = Math.floor(max / 100) * 100
+        obj[y + `sum`] = sum
       }
-      return obj;
+      return obj
     },
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_bp'));
+      let myChart = echarts.init(document.getElementById(`chart_bp`))
       let itemStyleJR = {
-        color: '#d6d638'
+        color: `#d6d638`,
       }
       let itemStyleZW = {
-        color: '#00c86c'
+        color: `#00c86c`,
       }
       let itemStyleYL = {
-        color: '#07d8ff'
+        color: `#07d8ff`,
       }
       let itemStyleIT = {
-        color: '#0c71cf'
+        color: `#0c71cf`,
       }
 
       this.dataMap.dataJR = this.dataFormatter({
-        //max : 4000,
-        2020:[136, 159, 905, 305],
-        2019:[124, 145, 562, 285],
-        2018:[118, 128, 207, 265],
-        2017:[112, 122, 234, 245],
-        2016:[101, 110, 804, 225]
-      });
+        // max : 4000,
+        2020: [136, 159, 905, 305],
+        2019: [124, 145, 562, 285],
+        2018: [118, 128, 207, 265],
+        2017: [112, 122, 234, 245],
+        2016: [101, 110, 804, 225],
+      })
 
       this.dataMap.dataZW = this.dataFormatter({
-        //max : 26600,
-        2020:[752, 928, 126, 210],
-        2019:[388, 840, 707, 208],
-        2018:[855, 987, 959, 207],
-        2017:[626, 709, 701, 206],
-        2016:[509, 892, 201, 205]
-      });
+        // max : 26600,
+        2020: [752, 928, 126, 210],
+        2019: [388, 840, 707, 208],
+        2018: [855, 987, 959, 207],
+        2017: [626, 709, 701, 206],
+        2016: [509, 892, 201, 205],
+      })
 
       this.dataMap.dataYL = this.dataFormatter({
-        //max : 25000,
-        2020:[363, 219, 483, 505],
-        2019:[600, 438, 123, 405],
-        2018:[179, 405, 668, 305],
-        2017:[375, 2886, 276, 205],
-        2016:[236, 250, 408, 105]
-      });
+        // max : 25000,
+        2020: [363, 219, 483, 505],
+        2019: [600, 438, 123, 405],
+        2018: [179, 405, 668, 305],
+        2017: [375, 2886, 276, 205],
+        2016: [236, 250, 408, 105],
+      })
 
       this.dataMap.dataIT = this.dataFormatter({
-        //max : 26600,
-        2020:[752, 928, 126, 255],
-        2019:[388, 840, 707, 245],
-        2018:[855, 987, 959, 235],
-        2017:[626, 709, 701, 225],
-        2016:[509, 892, 201, 215]
-      });
+        // max : 26600,
+        2020: [752, 928, 126, 255],
+        2019: [388, 840, 707, 245],
+        2018: [855, 987, 959, 235],
+        2017: [626, 709, 701, 225],
+        2016: [509, 892, 201, 215],
+      })
 
       this.option = {
         baseOption: {
           timeline: {
-            axisType: 'category',
+            axisType: `category`,
             autoPlay: true,
             playInterval: 2000,
-            data: ['2016-01-01', '2017-01-01', '2018-01-01', '2019-01-01', '2020-01-01'],
+            data: [
+              `2016-01-01`,
+              `2017-01-01`,
+              `2018-01-01`,
+              `2019-01-01`,
+              `2020-01-01`,
+            ],
             lineStyle: {
-              color: '#179bf1'
+              color: `#179bf1`,
             },
             left: 30,
             right: 30,
             label: {
-              color: '#2867a8',
+              color: `#2867a8`,
               formatter(s) {
-                return (new Date(s)).getFullYear();
-              }
+                return new Date(s).getFullYear()
+              },
             },
             checkpointStyle: {
-              color: '#01d8ff',
+              color: `#01d8ff`,
               symbolSize: 10,
-              borderColor: 'rgba(1, 216, 255, 0.5)',
+              borderColor: `rgba(1, 216, 255, 0.5)`,
               borderWidth: 5,
             },
             controlStyle: {
               showPlayBtn: false,
-              borderColor: '#01bde6',
-              itemGap: 20  
-            }, 
+              borderColor: `#01bde6`,
+              itemGap: 20,
+            },
             itemStyle: {
               // color: '#004b85',
-              borderColor: '#004b85',
+              borderColor: `#004b85`,
               borderWidth: 1,
-              shadowColor: 'rgba(1, 216, 225, 0.5)',
-              shadowBlur: 5
+              shadowColor: `rgba(1, 216, 225, 0.5)`,
+              shadowBlur: 5,
             },
             emphasis: {
               label: {
-                color: '#01d8ff',
-                show: false
+                color: `#01d8ff`,
+                show: false,
               },
               checkpointStyle: {
-                color: '#01d8ff',
-                borderColor: 'rgba(1, 216, 255, 0.5)',
+                color: `#01d8ff`,
+                borderColor: `rgba(1, 216, 255, 0.5)`,
                 borderWidth: 5,
               },
               controlStyle: {
-                borderColor: 'rgba(1, 216, 255, 0.5)'
+                borderColor: `rgba(1, 216, 255, 0.5)`,
               },
               itemStyle: {
-                color: '#01d8ff',
-                borderColor: 'rgba(1, 216, 225, 0.5)',
-                borderWidth: 5
-              } 
-            }
+                color: `#01d8ff`,
+                borderColor: `rgba(1, 216, 225, 0.5)`,
+                borderWidth: 5,
+              },
+            },
           },
           // tooltip: {
           //   trigger: 'item'
           // },
           grid: {
-            bottom: '20%',
-            right: "42%"
+            bottom: `20%`,
+            right: `42%`,
           },
           calculable: true,
-          xAxis: [{
-            type: 'category',
-            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',
-            barMaxWidth: 15,
-            center: ['20%', '65%'],
-            seriesLayoutBy: 'row',
-            markPoint: {
-              symbol: 'pin',
-              itemStyle: {
-                normal: {
-                  color: '#eb9b44',
-                  shadowColor: '#eb9b44',
-                  shadowBlur: 15
-                }
+          xAxis: [
+            {
+              type: `category`,
+              data: [`金融类`, `政务类`, `医疗类`, `互联网类`],
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: `#2867a8`,
+                },
               },
-              data: [
-                {type: 'max', name: '最大值'},
-                {type: 'min', name: '最小值'}
-              ]
-            }
-            // label: {
-            //   show: true,
-            //   position: 'top'
-            // },
-          },{
-            name: '应用占比',
-            type: 'pie',
-            center: ['76%', '20%'],
-            radius: '28%',
-            z: 100
-          }]
-        },
-        options: [{
-          series: [
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2016sum'],
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2016sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2016sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2016sum'], 
-                itemStyle: itemStyleIT
-              }],
             },
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2016sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2016sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2016sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2016sum'], 
-                itemStyle: itemStyleIT
-              }]
-            }
-          ]
-        },{
-          series: [
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2017sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2017sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2017sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2017sum'], 
-                itemStyle: itemStyleIT
-              }],
+          ],
+          yAxis: [
+            {
+              type: `value`,
+              name: `区块链应用（个）`,
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: `#2867a8`,
+                },
+              },
             },
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2017sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2017sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2017sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2017sum'], 
-                itemStyle: itemStyleIT
-              }]
-            }
-          ]
-        },{
+          ],
           series: [
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2018sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2018sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2018sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2018sum'], 
-                itemStyle: itemStyleIT
-              }]
+            {
+              name: `联盟链`,
+              type: `bar`,
+              barMaxWidth: 15,
+              center: [`20%`, `65%`],
+              seriesLayoutBy: `row`,
+              markPoint: {
+                symbol: `pin`,
+                itemStyle: {
+                  normal: {
+                    color: `#eb9b44`,
+                    shadowColor: `#eb9b44`,
+                    shadowBlur: 15,
+                  },
+                },
+                data: [
+                  { type: `max`, name: `最大值` },
+                  { type: `min`, name: `最小值` },
+                ],
+              },
+              // label: {
+              //   show: true,
+              //   position: 'top'
+              // },
             },
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2018sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2018sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2018sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2018sum'], 
-                itemStyle: itemStyleIT
-              }]
-            }
-          ]
-        },{
-          series: [
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2019sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2019sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2019sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2019sum'], 
-                itemStyle: itemStyleIT
-              }]
+            {
+              name: `应用占比`,
+              type: `pie`,
+              center: [`76%`, `20%`],
+              radius: `28%`,
+              z: 100,
             },
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2019sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2019sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2019sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2019sum'], 
-                itemStyle: itemStyleIT
-              }]
-            }
-          ]
-        },{
-          series: [
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2020sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2020sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2020sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2020sum'], 
-                itemStyle: itemStyleIT
-              }]
-            },
-            {data: [{
-                name: '金融类', 
-                value: this.dataMap.dataJR['2020sum'], 
-                itemStyle: itemStyleJR
-              },{
-                name: '政务类', 
-                value: this.dataMap.dataZW['2020sum'], 
-                itemStyle: itemStyleZW
-              },{
-                name: '医疗类', 
-                value: this.dataMap.dataYL['2020sum'], 
-                itemStyle: itemStyleYL
-              },{
-                name: '互联网类', 
-                value: this.dataMap.dataIT['2020sum'], 
-                itemStyle: itemStyleIT
-              }]
-            }
-          ]
-        }]
+          ],
+        },
+        options: [
+          {
+            series: [
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2016sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2016sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2016sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2016sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2016sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2016sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2016sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2016sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            series: [
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2017sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2017sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2017sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2017sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2017sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2017sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2017sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2017sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            series: [
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2018sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2018sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2018sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2018sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2018sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2018sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2018sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2018sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            series: [
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2019sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2019sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2019sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2019sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2019sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2019sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2019sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2019sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            series: [
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2020sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2020sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2020sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2020sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+              {
+                data: [
+                  {
+                    name: `金融类`,
+                    value: this.dataMap.dataJR[`2020sum`],
+                    itemStyle: itemStyleJR,
+                  },
+                  {
+                    name: `政务类`,
+                    value: this.dataMap.dataZW[`2020sum`],
+                    itemStyle: itemStyleZW,
+                  },
+                  {
+                    name: `医疗类`,
+                    value: this.dataMap.dataYL[`2020sum`],
+                    itemStyle: itemStyleYL,
+                  },
+                  {
+                    name: `互联网类`,
+                    value: this.dataMap.dataIT[`2020sum`],
+                    itemStyle: itemStyleIT,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
       }
 
-      myChart.setOption(this.option, true);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>

src/components/circleNesting/index.vue

@@ -5,184 +5,216 @@
 -->
 
 <template>
-  <div class="wrap-container sn-container"> 
-    <div class="sn-content"> 
-      <div class="sn-title">圆环套圆环</div> 
+  <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="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 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>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "circleNesting",
+  name: `circleNesting`,
   data() {
     return {
       option: null,
-      
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_circle'));
+      let myChart = echarts.init(document.getElementById(`chart_circle`))
       let itemStyle = {
         normal: {
-          color: 'rgba(0, 0, 0, 0)',
-        }
+          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
+        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: {
+            labelLine: {
               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 + '%';
-              }  
+                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`,
+                      },
+                    ]),
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            smooth: true,
-            normal: {
-              show: true,
-              length: 20,
-              length2: 20,
-              lineStyle: {
-                type: 'dotted'
-              }
-            }
-          },
-          data: [{
-            value: 64,
-            name: '交易比',
-            itemStyle: {
+          {
+            // name: '交易占比'
+            type: `pie`,
+            clockWise: false,
+            startAngle: 90,
+            hoverAnimation: false,
+            radius: [`53%`, `56%`],
+            center: [`50%`, `50%`],
+            label: {
               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 + '%';
-              }
+                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,
+              },
+            ],
           },
-          labelLine: {
-            smooth: true,
-            normal: {
-              show: true,
-              length: 20,
-              length2: 50,
-              lineStyle: {
-                type: 'dotted'
-              }
-            }
-          },
-          data: [{
-            value: 36,
-            name: '通道比',
-            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: {
-                color: '#1dd1c1'
-              }
-            }
-          },{
-            value: 64,
-            name: '',
-            itemStyle: itemStyle
-          }]
-        }]
+                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);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -205,7 +237,7 @@ export default {
     height: 100%;
   }
 
-  .svg-dom{
+  .svg-dom {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -223,16 +255,19 @@ export default {
       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");
+      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");
+      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 {
@@ -257,24 +292,23 @@ export default {
 }
 
 @-webkit-keyframes cir-arrow2 {
-    0% {
-      offset-distance: 100%;
-      opacity: 1;
-    }
-    100% {
-      offset-distance: 0%;
-      opacity: 1;
-    }
+  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;
-    }
+  0% {
+    offset-distance: 100%;
+    opacity: 1;
+  }
+  100% {
+    offset-distance: 0%;
+    opacity: 1;
+  }
 }
-
 </style>

src/components/circleRunway/index.vue

@@ -5,169 +5,188 @@
 -->
 
 <template>
-  <div class="wrap-container sn-container"> 
-    <div class="sn-content"> 
-      <div class="sn-title">环形跑道图</div> 
-      <div class="sn-body"> 
+  <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_run"></div>
-          <div class="pdt-info" :class="`info${index}`" v-for="(item, index) in arrData" :key="index">
+          <div
+            class="pdt-info"
+            :class="`info${index}`"
+            v-for="(item, index) in arrData"
+            :key="index"
+          >
             <span></span>
             <span>{{ item.name }}：</span>
             <span>{{ item.number }}</span>
             <span>（{{ item.percentage }}%）</span>
           </div>
-        </div> 
-      </div> 
-    </div>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "circleRunway",
+  name: `circleRunway`,
   data() {
     return {
       option: null,
-      arrData: [{
-        name: '联盟链',
-        number: 725,
-        percentage: 41.50
-      },{
-        name: '私有链',
-        number: 460,
-        percentage: 30.95
-      },{
-        name: '公有链',
-        number: 382,
-        percentage: 22.48
-      }]
+      arrData: [
+        {
+          name: `联盟链`,
+          number: 725,
+          percentage: 41.5,
+        },
+        {
+          name: `私有链`,
+          number: 460,
+          percentage: 30.95,
+        },
+        {
+          name: `公有链`,
+          number: 382,
+          percentage: 22.48,
+        },
+      ],
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
       // 初始化echarts实例
-      let myChart = echarts.init(document.getElementById('chart_run'));
+      let myChart = echarts.init(document.getElementById(`chart_run`))
       let itemStyle = {
         normal: {
-          color: '#091f45',
-        }
+          color: `#091f45`,
+        },
       }
 
       this.option = {
-        color: ['#0772bb', '#00ffff', '#f48b3b'],
-        series: [{
-          name: '联盟链',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 90,
-          hoverAnimation: false,
-          radius: ['86%', '90%'],
-          center: ['50%', '50%'],
-          label: {
-            normal: {
-              show: false
+        color: [`#0772bb`, `#00ffff`, `#f48b3b`],
+        series: [
+          {
+            name: `联盟链`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 90,
+            hoverAnimation: false,
+            radius: [`86%`, `90%`],
+            center: [`50%`, `50%`],
+            label: {
+              normal: {
+                show: false,
+              },
             },
-          },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 5,
-            name: '50%',
-            itemStyle: {
+            labelLine: {
               normal: {
-                color: '#0772bb'
-              }
-            }
-          },{
-            value: 5,
-            name: '50%',
-            itemStyle: itemStyle
-          }]
-        },{
-          name: '私有链',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 90,
-          hoverAnimation: false,
-          radius: ['66%', '70%'],
-          center: ['50%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 5,
+                name: `50%`,
+                itemStyle: {
+                  normal: {
+                    color: `#0772bb`,
+                  },
+                },
+              },
+              {
+                value: 5,
+                name: `50%`,
+                itemStyle: itemStyle,
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 3,
-            name: '50%',
-            itemStyle: {
+          {
+            name: `私有链`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 90,
+            hoverAnimation: false,
+            radius: [`66%`, `70%`],
+            center: [`50%`, `50%`],
+            label: {
               normal: {
-                color: '#00ffff'
-              }
-            }
-          },{
-            value: 7,
-            name: '50%',
-            itemStyle: itemStyle
-          }]
-        },{
-          name: '公有链',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 90,
-          hoverAnimation: false,
-          radius: ['46%', '50%'],
-          center: ['50%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 3,
+                name: `50%`,
+                itemStyle: {
+                  normal: {
+                    color: `#00ffff`,
+                  },
+                },
+              },
+              {
+                value: 7,
+                name: `50%`,
+                itemStyle: itemStyle,
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 2,
-            name: '50%',
-            itemStyle: {
+          {
+            name: `公有链`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 90,
+            hoverAnimation: false,
+            radius: [`46%`, `50%`],
+            center: [`50%`, `50%`],
+            label: {
               normal: {
-                color: '#f48b3b'
-              }
-            }
-          },{
-            value: 8,
-            name: '50%',
-            itemStyle: itemStyle
-          }]
-        }]
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 2,
+                name: `50%`,
+                itemStyle: {
+                  normal: {
+                    color: `#f48b3b`,
+                  },
+                },
+              },
+              {
+                value: 8,
+                name: `50%`,
+                itemStyle: itemStyle,
+              },
+            ],
+          },
+        ],
       }
 
       // 使用制定的配置项和数据显示图表
-      myChart.setOption(this.option, true);
-
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      myChart.setOption(this.option, true)
 
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
     },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -180,7 +199,7 @@ export default {
     width: 100%;
     height: 90%;
   }
-  
+
   .pdt-info {
     position: absolute;
     left: 50%;
@@ -222,7 +241,8 @@ export default {
         width: 12px;
         height: 12px;
         border-radius: 50%;
-        box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
+        box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em,
+          0 0 0 0.5em rgba(255, 255, 0, 0.1);
         text-decoration: underline;
         cursor: pointer;
         &:hover {

src/components/colorfulArea/index.vue

@@ -5,259 +5,303 @@
 -->
 
 <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="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>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-
 export default {
-  name: "colorfulArea",
+  name: `colorfulArea`,
   data() {
     return {
       option: null,
-      dataMap: {}
+      dataMap: {},
     }
   },
   mounted() {
-    this.getEchart();
+    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;
+      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]
-              };
+        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;
+        }
+        obj[x + `max`] = Math.floor(max / 100) * 100
+        obj[x + `sum`] = sum
       }
-      return obj;
+      return obj
     },
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_cra'));
+      let myChart = echarts.init(document.getElementById(`chart_cra`))
       let itemStyle = {
         barBorderRadius: [15, 0],
-        color: '#0084ff'
+        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],
-      });
+        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',
+            axisType: `category`,
             autoPlay: true,
             playInterval: 1000,
-            data: ['5.1', '5.2', '5.3', '5.4', '5.5'],
+            data: [`5.1`, `5.2`, `5.3`, `5.4`, `5.5`],
             left: 50,
             right: 50,
             top: 5,
             lineStyle: {
-              color: '#122e96'
+              color: `#122e96`,
             },
             label: {
-              color: '#fff'
+              color: `#fff`,
             },
             checkpointStyle: {
-              color: '#ef8c2f',
+              color: `#ef8c2f`,
               symbolSize: 10,
-              borderColor: 'rgba(239, 140, 47, 0.5)',
+              borderColor: `rgba(239, 140, 47, 0.5)`,
               borderWidth: 5,
             },
             controlStyle: {
               showPlayBtn: false,
-              borderColor: '#122e96',
-              itemGap: 20
-            }, 
+              borderColor: `#122e96`,
+              itemGap: 20,
+            },
             itemStyle: {
-              borderColor: '#122e96',
+              borderColor: `#122e96`,
               borderWidth: 5,
               // shadowColor: 'rgba(239, 140, 47, 0.5)',
               // shadowBlur: 5
             },
             emphasis: {
               label: {
-                color: '#ef8c2f',
-                show: false
+                color: `#ef8c2f`,
+                show: false,
               },
               checkpointStyle: {
-                color: '#ef8c2f',
-                borderColor: 'rgba(239, 140, 47, 0.5)',
+                color: `#ef8c2f`,
+                borderColor: `rgba(239, 140, 47, 0.5)`,
                 borderWidth: 5,
               },
               controlStyle: {
-                borderColor: '#122e96'
-              }, 
+                borderColor: `#122e96`,
+              },
               itemStyle: {
-                color: '#ef8c2f',
-                borderColor: 'rgba(239, 140, 47, 0.5)',
-                borderWidth: 5
-              } 
-            }
+                color: `#ef8c2f`,
+                borderColor: `rgba(239, 140, 47, 0.5)`,
+                borderWidth: 5,
+              },
+            },
           },
           calculable: true,
           grid: {
-            top: '25%',
-            bottom: '12%'
+            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',
-              }
+          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
+          ],
+          yAxis: [
+            {
+              type: `value`,
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+                lineStyle: {
+                  color: `#2867a8`,
+                },
+              },
             },
-            axisTick: {
-              show: false
-            }, 
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#2867a8'
-              }
-            }
-          }],
-          series: [{
-            name: '多彩轮播面积', 
-            type: 'line',
-            markPoint: {
-              symbol: 'pin',
-              symbolSize: 40,
+          ],
+          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: '#ef8c2f',
-                  shadowColor: '#ef8c2f',
-                  shadowBlur: 15
-                }
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: `#1e4b4b`,
+                    },
+                    {
+                      offset: 1,
+                      color: `rgba(0, 0, 0, 0)`,
+                    },
+                  ]),
+                },
               },
-              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,
             },
-            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
-          }]
-        }]
+        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);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -271,6 +315,4 @@ export default {
     height: 100%;
   }
 }
-
-
 </style>

src/components/colorfulRadar/index.vue

@@ -5,139 +5,148 @@
 -->
 
 <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 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",
+  name: `colorfulRadar`,
   data() {
     return {
-      option: null
-      
+      option: null,
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_radar'));
+      let myChart = echarts.init(document.getElementById(`chart_radar`))
       this.option = {
         tooltip: {
-          trigger: 'axis'
+          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'
-                }
-              }
-            }
+        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: [
           {
-            value: [70, 40, 55, 55, 30, 55],
-            name: '5G手机',
+            type: `radar`,
+            areaStyle: {},
+            symbol: `none`,
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0, 
-                  color: '#0855ca'
-                },{
-                  offset: 1, 
-                  color: '#36a6c7'
-                }]),
-                lineStyle: {
-                  color: '#36a6c7'
-                }
-              }
-            }
-          }]
-        }]
+                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);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>

src/components/companySummary/business.vue

@@ -5,36 +5,51 @@
 -->
 
 <template>
-  <div class="business-container"> 
-    <div class="chart" id="chart_left1"></div>   
+  <div class="business-container">
+    <div class="chart" id="chart_left1"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "business",
+  name: `business`,
   data() {
-    return {
-      
-    }
+    return {}
   },
   mounted() {
-    this.getEchartLeft1();
+    this.getEchartLeft1()
   },
   methods: {
     getEchartLeft1() {
       // 实例化对象
-      let myChart = echarts.init(document.getElementById('chart_left1'));
-      let charts = { // 按顺序排列从大到小
-        cityList: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车', '医疗互联', '物流行业'],
-        cityData: [1500, 1200, 900, 600, 400, 300, 100]
+      let myChart = echarts.init(document.getElementById(`chart_left1`))
+      let charts = {
+        // 按顺序排列从大到小
+        cityList: [
+          `金融行业`,
+          `电子政务`,
+          `文创版权`,
+          `教育行业`,
+          `智慧停车`,
+          `医疗互联`,
+          `物流行业`,
+        ],
+        cityData: [1500, 1200, 900, 600, 400, 300, 100],
       }
 
-      let top10CityList = charts.cityList;
-      let top10CityData = charts.cityData;
-      let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
+      let top10CityList = charts.cityList
+      let top10CityData = charts.cityData
+      let color = [
+        `rgba(14,109,236`,
+        `rgba(255,91,6`,
+        `rgba(100,255,249`,
+        `rgba(248,195,248`,
+        `rgba(110,234,19`,
+        `rgba(255,168,17`,
+        `rgba(218,111,227`,
+      ]
 
-      let lineY = [];
+      let lineY = []
       for (let i = 0; i < charts.cityList.length; i++) {
         let x = i
         if (x > color.length - 1) {
@@ -42,137 +57,152 @@ export default {
         }
         let data = {
           name: charts.cityList[i],
-          color: color[x] + ')',
+          color: color[x] + `)`,
           value: top10CityData[i],
           itemStyle: {
             normal: {
               show: true,
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                offset: 0,
-                color: color[x] + ', 0.3)'
-              }, {
-                offset: 1,
-                color: color[x] + ', 1)'
-              }], false),
-              barBorderRadius: 10
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                1,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: color[x] + `, 0.3)`,
+                  },
+                  {
+                    offset: 1,
+                    color: color[x] + `, 1)`,
+                  },
+                ],
+                false
+              ),
+              barBorderRadius: 10,
             },
             emphasis: {
               shadowBlur: 15,
-              shadowColor: 'rgba(0, 0, 0, 0.1)'
-            }
-          }
+              shadowColor: `rgba(0, 0, 0, 0.1)`,
+            },
+          },
         }
         lineY.push(data)
-      }  
+      }
 
       // 指定配置和数据
       let option = {
         color: color,
         tooltip: {
-          trigger: 'item',
+          trigger: `item`,
         },
         grid: {
           borderWidth: 0,
-          top: '5%',
-          left: '2%',
-          right: '2%',
-          bottom: '0%',
-          containLabel: true
+          top: `5%`,
+          left: `2%`,
+          right: `2%`,
+          bottom: `0%`,
+          containLabel: true,
         },
-        xAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          }
-        }],
-        yAxis: [{
-          type: 'category',
-          inverse: true,
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            show: true,
-            inside: false,
-            textStyle: {
-              color: '#b3ccf8',
-              fontSize: 13
+        xAxis: [
+          {
+            type: `value`,
+            axisTick: {
+              show: false,
             },
-          },
-          data: top10CityList
-        }, {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: true,
-            inside: false,
-            textStyle: {
-              color: '#b3ccf8',
-              fontSize: 13
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
             },
-            formatter: (val) => {
-              return `${val}`
-            }
-          },
-          splitArea: {
-            show: false
           },
-          splitLine: {
-            show: false
+        ],
+        yAxis: [
+          {
+            type: `category`,
+            inverse: true,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              inside: false,
+              textStyle: {
+                color: `#b3ccf8`,
+                fontSize: 13,
+              },
+            },
+            data: top10CityList,
           },
-          data: top10CityData.reverse()
-        }],
-        series: [{
-          name: '',
-          type: 'bar',
-          zlevel: 2,
-          barWidth: '10px',
-          data: lineY,
-          animationDuration: 1500,
-          label: {
-            normal: {
-              color: '#b3ccf8',
+          {
+            type: `category`,
+            axisLine: {
               show: false,
-              position: [0, '-15px'],
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              inside: false,
               textStyle: {
-                fontSize: 13
+                color: `#b3ccf8`,
+                fontSize: 13,
+              },
+              formatter: (val) => {
+                return `${val}`
+              },
+            },
+            splitArea: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            data: top10CityData.reverse(),
+          },
+        ],
+        series: [
+          {
+            name: ``,
+            type: `bar`,
+            zlevel: 2,
+            barWidth: `10px`,
+            data: lineY,
+            animationDuration: 1500,
+            label: {
+              normal: {
+                color: `#b3ccf8`,
+                show: false,
+                position: [0, `-15px`],
+                textStyle: {
+                  fontSize: 13,
+                },
+                formatter: (a, b) => {
+                  return a.name
+                },
               },
-              formatter: (a, b) => {
-                return a.name;
-              }
-            }
-          }
-        }]
-      };
+            },
+          },
+        ],
+      }
 
       // 把配置给实例对象
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      myChart.setOption(option, true)
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
     },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>

src/components/companySummary/distribution.vue

@@ -5,51 +5,57 @@
 -->
 
 <template>
-  <div class="distribution-container"> 
+  <div class="distribution-container">
     <div class="chart" id="chart_right2"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "distribution",
+  name: `distribution`,
   data() {
-    return {
-      
-    }
+    return {}
   },
   mounted() {
-    this.getEchartRight2();
+    this.getEchartRight2()
   },
   methods: {
     getEchartRight2() {
-      let myChart = echarts.init(document.getElementById('chart_right2'));
+      let myChart = echarts.init(document.getElementById(`chart_right2`))
       let option = {
-        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
+        color: [
+          `#EAEA26`,
+          `#906BF9`,
+          `#FE5656`,
+          `#01E17E`,
+          `#3DD1F9`,
+          `#FFAD05`,
+          `#4465fc`,
+        ],
         tooltip: {
-          trigger: 'item',
-          formatter: '{b} : {c} ({d}%)'
+          trigger: `item`,
+          formatter: `{b} : {c} ({d}%)`,
         },
         polar: {},
         angleAxis: {
           interval: 1,
-          type: 'category',
+          type: `category`,
           data: [],
           z: 10,
           axisLine: {
             show: false,
             lineStyle: {
-              color: '#0B4A6B',
+              color: `#0B4A6B`,
               width: 5,
-              type: 'solid'
+              type: `solid`,
             },
           },
           axisLabel: {
             interval: 0,
             show: true,
-            color: '#0B4A6B',
+            color: `#0B4A6B`,
             margin: 8,
-            fontSize: 16
+            fontSize: 16,
           },
         },
         radiusAxis: {
@@ -59,146 +65,160 @@ export default {
           axisLine: {
             show: false,
             lineStyle: {
-              color: '#0B3E5E',
+              color: `#0B3E5E`,
               width: 1,
-              type: 'solid'
+              type: `solid`,
             },
           },
           axisLabel: {
-            formatter: '{value} %',
+            formatter: `{value} %`,
             show: false,
             padding: [0, 0, 20, 0],
-            color: '#0B3E5E',
-            fontSize: 16
+            color: `#0B3E5E`,
+            fontSize: 16,
           },
           splitLine: {
             lineStyle: {
-              color: '#0B3E5E',
+              color: `#0B3E5E`,
               width: 2,
-              type: "solid"
-            }
-          }
+              type: `solid`,
+            },
+          },
         },
         calculable: true,
-        series: [{
-          type: 'pie',
-          radius: ['6%', '10%'],
-          hoverAnimation: false,
-          labelLine: {
-            normal: {
+        series: [
+          {
+            type: `pie`,
+            radius: [`6%`, `10%`],
+            hoverAnimation: false,
+            labelLine: {
+              normal: {
+                show: false,
+                length: 30,
+                length2: 50,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            tooltip: {
               show: false,
-              length: 30,
-              length2: 50
             },
-            emphasis: {
-              show: false
-            }
-          },
-          tooltip: {
-            show: false
+            data: [
+              {
+                name: ``,
+                value: 0,
+                itemStyle: {
+                  normal: {
+                    color: `#0B4A6B`,
+                  },
+                },
+              },
+            ],
           },
-          data: [{
-            name: '',
-            value: 0,
-            itemStyle: {
+          {
+            type: `pie`,
+            radius: [`90%`, `95%`],
+            hoverAnimation: false,
+            labelLine: {
               normal: {
-                color: '#0B4A6B'
-              }
-            }
-          }]
-        }, {
-          type: 'pie',
-          radius: ['90%', '95%'],
-          hoverAnimation: false,
-          labelLine: {
-            normal: {
+                show: false,
+                length: 30,
+                length2: 50,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            tooltip: {
               show: false,
-              length: 30,
-              length2: 50
             },
-            emphasis: {
-              show: false
-            }
-          },
-          tooltip: {
-            show: false
+            data: [
+              {
+                name: ``,
+                value: 0,
+                itemStyle: {
+                  normal: {
+                    color: `#0B4A6B`,
+                  },
+                },
+              },
+            ],
           },
-          data: [{
-            name: '',
-            value: 0,
-            itemStyle: {
+          {
+            stack: `a`,
+            type: `pie`,
+            radius: [`20%`, `80%`],
+            roseType: `area`,
+            zlevel: 10,
+            label: {
               normal: {
-                color: '#0B4A6B'
-              }
-            }
-          }]
-        },{
-          stack: 'a',
-          type: 'pie',
-          radius: ['20%', '80%'],
-          roseType: 'area',
-          zlevel: 10,
-          label: {
-            normal: {
-              show: true,
-              formatter: '{b}',
-              textStyle: {
-                fontSize: 12,
-              },
-              position: 'outside'
+                show: true,
+                formatter: `{b}`,
+                textStyle: {
+                  fontSize: 12,
+                },
+                position: `outside`,
+              },
+              emphasis: {
+                show: false,
+              },
             },
-            emphasis: {
-              show: false
-            }
-          },
-          labelLine: {
-            normal: {
-              show: true,
-              length: 15,
-              length2: 50,
-              lineStyle: {
-                type: 'dotted' 
-              } 
+            labelLine: {
+              normal: {
+                show: true,
+                length: 15,
+                length2: 50,
+                lineStyle: {
+                  type: `dotted`,
+                },
+              },
+              emphasis: {
+                show: true,
+              },
             },
-            emphasis: {
-              show: true
-            }
+            data: [
+              {
+                value: 35,
+                name: `湖南`,
+              },
+              {
+                value: 28,
+                name: `河北`,
+              },
+              {
+                value: 23,
+                name: `广东`,
+              },
+              {
+                value: 18,
+                name: `四川`,
+              },
+              {
+                value: 13,
+                name: `浙江`,
+              },
+              {
+                value: 8,
+                name: `江苏`,
+              },
+              {
+                value: 5,
+                name: `湖北`,
+              },
+            ],
           },
-          data: [{
-            value: 35,
-            name: '湖南'
-          },{
-            value: 28,
-            name: '河北'
-          },{
-            value: 23,
-            name: '广东'
-          },{
-            value: 18,
-            name: '四川'
-          },{
-            value: 13,
-            name: '浙江'
-          },{
-            value: 8,
-            name: '江苏'
-          },{
-            value: 5,
-            name: '湖北'
-          }]
-        }]
+        ],
       }
 
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      myChart.setOption(option, true)
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
     },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>

src/components/companySummary/history.vue

@@ -8,16 +8,29 @@
   <div class="history-container">
     <div class="tabs">
       <ul class="tab-tilte">
-        <li v-for="(itemTit, index) in tabTitle" :key="index" @mouseover="handleMouseOver(index)"
-          @mouseout="handleMouseOut(index)" :class="{ active: cur == index }">
+        <li
+          v-for="(itemTit, index) in tabTitle"
+          :key="index"
+          @mouseover="handleMouseOver(index)"
+          @mouseout="handleMouseOut(index)"
+          :class="{ active: cur == index }"
+        >
           {{ itemTit }}
         </li>
       </ul>
       <div class="indicatorDots">
-        <span :class="{ active: cur == i }" v-for="(v, i) in tabTitle" :key="i"></span>
+        <span
+          :class="{ active: cur == i }"
+          v-for="(v, i) in tabTitle"
+          :key="i"
+        ></span>
       </div>
       <div class="tab-content">
-        <div v-for="(itemCon, index) in tabCon" v-show="cur == index" :key="index">
+        <div
+          v-for="(itemCon, index) in tabCon"
+          v-show="cur == index"
+          :key="index"
+        >
           <div v-for="(v, i) in itemCon" :key="i" class="content">
             {{ v }}
           </div>
@@ -29,73 +42,73 @@
 
 <script>
 export default {
-  name: "history",
+  name: `history`,
   data() {
     return {
       timer: null,
-      tabTitle: ['2015', '2016', '2017', '2018', '2019', '2020'],
+      tabTitle: [`2015`, `2016`, `2017`, `2018`, `2019`, `2020`],
       tabCon: [
         [
-          '2015.10，公司成立，正式布局区块链、大数据方向',
-          '2015.11，与国家超算吕梁云计算中心签订战略合作协议',
-          '2015.12，建设高性能计算服务平台，基于区块链技术打造文创基础云平台'
+          `2015.10，公司成立，正式布局区块链、大数据方向`,
+          `2015.11，与国家超算吕梁云计算中心签订战略合作协议`,
+          `2015.12，建设高性能计算服务平台，基于区块链技术打造文创基础云平台`,
         ],
         [
-          '2016.03，公司提供的高性能计算服务得到中科院认可，就此达成合作',
-          '2016.07，与国家超算广州中心签订战略合作协议，启动区块链底层公链开发技术论证',
-          '2016.10，启动区块链底层公链开发，开拓数字资产管理业务',
-          '2016.11，与国家超级计算长沙中心签订战略合作协议'
+          `2016.03，公司提供的高性能计算服务得到中科院认可，就此达成合作`,
+          `2016.07，与国家超算广州中心签订战略合作协议，启动区块链底层公链开发技术论证`,
+          `2016.10，启动区块链底层公链开发，开拓数字资产管理业务`,
+          `2016.11，与国家超级计算长沙中心签订战略合作协议`,
         ],
         [
-          '2017.03，与国家级长沙经开区共建博士创新创业园',
-          '2017.07，开发GBI区块链资讯信息平台',
-          '2017.09，打造区块链信息服务平台，开拓区块链安全业务',
-          '2017.12，区块链底层公链测试链上线运行，启动链上DAPP开发'
+          `2017.03，与国家级长沙经开区共建博士创新创业园`,
+          `2017.07，开发GBI区块链资讯信息平台`,
+          `2017.09，打造区块链信息服务平台，开拓区块链安全业务`,
+          `2017.12，区块链底层公链测试链上线运行，启动链上DAPP开发`,
         ],
         [
-          '2018.05，与长沙经开区共建区块链产业园，区块链底层公链上线运行',
-          '2018.08，公链分布式存储网络正式运行',
-          '2018.10，区块链安全技术检测中心正式运行，公链多侧链技术落地，链上应用上线',
-          '2018.12，被评为中国区块链百强企业'
+          `2018.05，与长沙经开区共建区块链产业园，区块链底层公链上线运行`,
+          `2018.08，公链分布式存储网络正式运行`,
+          `2018.10，区块链安全技术检测中心正式运行，公链多侧链技术落地，链上应用上线`,
+          `2018.12，被评为中国区块链百强企业`,
         ],
         [
-          '2019.03，上线分布式存储系统UDFS，更新优壹号V2.0.0版，完成Ulord V2.0版白皮书全部规划',
-          '2019.07，文创版权公共服务平台优版权正式上线',
-          '2019.08，承担国家网信办区块链相关课题研究',
+          `2019.03，上线分布式存储系统UDFS，更新优壹号V2.0.0版，完成Ulord V2.0版白皮书全部规划`,
+          `2019.07，文创版权公共服务平台优版权正式上线`,
+          `2019.08，承担国家网信办区块链相关课题研究`,
         ],
         [
-          '2020.03，完成分布式计算框架和贡献证明算法的设计和开发',
-          '2020.05，完成分布式计算资源动态调度和管理开发',
-          '2020.10，推出链云计算生态，完成计算平台和API接口开发，完成优壹号对计算Dapp支持'
-        ]
+          `2020.03，完成分布式计算框架和贡献证明算法的设计和开发`,
+          `2020.05，完成分布式计算资源动态调度和管理开发`,
+          `2020.10，推出链云计算生态，完成计算平台和API接口开发，完成优壹号对计算Dapp支持`,
+        ],
       ],
-      cur: 0, //默认选中第一个tab
+      cur: 0, // 默认选中第一个tab
     }
   },
   mounted() {
-    this.getTimer();
+    this.getTimer()
   },
   methods: {
     getTimer() {
       this.timer = setInterval(() => {
-        this.cur++;
+        this.cur++
         if (this.cur == this.tabTitle.length) {
-          this.cur = 0;
+          this.cur = 0
         }
       }, 2000)
     },
     handleMouseOver(index) {
-      this.cur = index;
-      clearInterval(this.timer);
+      this.cur = index
+      clearInterval(this.timer)
     },
     handleMouseOut() {
-      this.getTimer();
-    }
+      this.getTimer()
+    },
   },
   beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
+    clearInterval(this.timer)
+  },
+}
 </script>
 
 <style lang="scss" scoped>
@@ -112,7 +125,7 @@ export default {
         text-align: center;
         cursor: pointer;
         font-size: 0.125rem;
-        width: 1.0rem;
+        width: 1rem;
         height: 0.35rem;
         line-height: 0.35rem;
         margin-bottom: 0.175rem;

src/components/companySummary/income.vue

@@ -5,175 +5,192 @@
 -->
 
 <template>
-  <div class="income-container"> 
-    <div class="chart" id="chart_left3"></div>  
+  <div class="income-container">
+    <div class="chart" id="chart_left3"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "income",
+  name: `income`,
   data() {
-    return {
-      
-    }
+    return {}
   },
   mounted() {
-    this.getEchartLeft3();
+    this.getEchartLeft3()
   },
   methods: {
     getEchartLeft3() {
-      let myChart = echarts.init(document.getElementById('chart_left3'));
+      let myChart = echarts.init(document.getElementById(`chart_left3`))
       let data = {
-        city: ['2015', '2016', '2017', '2018', '2019', '2020'],
-        num: ['555', '896', '1935', '2922', '4508', '5000']
+        city: [`2015`, `2016`, `2017`, `2018`, `2019`, `2020`],
+        num: [`555`, `896`, `1935`, `2922`, `4508`, `5000`],
       }
 
       let option = {
         tooltip: {
-          trigger: 'axis',
+          trigger: `axis`,
           axisPointer: {
             lineStyle: {
               color: {
-                type: 'linear',
+                type: `linear`,
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
-                colorStops: [{
-                  offset: 0,
-                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
-                }, {
-                  offset: 0.5,
-                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
-                }, {
-                  offset: 1,
-                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: `rgba(255,255,255,0)`, // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: `rgba(255,255,255,1)`, // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: `rgba(255,255,255,0)`, // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
           },
           formatter: (value) => {
-            return value[0].name + '年营业收入：<br>' + value[0].value + '万元'; 
-          }
+            return value[0].name + `年营业收入：<br>` + value[0].value + `万元`
+          },
         },
         grid: {
-          top: '5%',
-          left: '2%',
-          right: '2%',
-          bottom: '0%',
-          containLabel: true
+          top: `5%`,
+          left: `2%`,
+          right: `2%`,
+          bottom: `0%`,
+          containLabel: true,
         },
-        xAxis: [{
-          type: 'category',
-          boundaryGap: true,
-          axisLine: { //坐标轴轴线相关设置。数学上的x轴
-            show: false,
-            lineStyle: {
-              color: '#092b5d'
+        xAxis: [
+          {
+            type: `category`,
+            boundaryGap: true,
+            axisLine: {
+              // 坐标轴轴线相关设置。数学上的x轴
+              show: false,
+              lineStyle: {
+                color: `#092b5d`,
+              },
             },
-          },
-          axisLabel: { //坐标轴刻度标签的相关设置
-            textStyle: {
-              color: '#24c4ff',
-              margin: 15,
+            axisLabel: {
+              // 坐标轴刻度标签的相关设置
+              textStyle: {
+                color: `#24c4ff`,
+                margin: 15,
+              },
+              formatter: (data) => {
+                return data.substr(2) + `年`
+              },
             },
-            formatter: (data) => {
-                return data.substr(2) + '年';
-            }
-          },
-          axisTick: {
-            show: false,
+            axisTick: {
+              show: false,
+            },
+            data: data.city,
           },
-          data: data.city
-        }],
-        yAxis: [{
-          min: 0,
-          max: 6000,
-          splitLine: {
-            show: false,
-            lineStyle: {
-              color: '#092b5d'
+        ],
+        yAxis: [
+          {
+            min: 0,
+            max: 6000,
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: `#092b5d`,
+              },
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: `#092b5d`,
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: `#24c4ff`,
+              },
+            },
+            axisTick: {
+              show: false,
             },
           },
-          axisLine: {
-            show: false,
+        ],
+        series: [
+          {
+            name: ``,
+            type: `line`,
+            symbol: `circle`, // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 8,
             lineStyle: {
-              color: "#092b5d"
-            }
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#24c4ff',
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-        }],
-        series: [{
-          name: '',
-          type: 'line',
-          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-          showAllSymbol: true,
-          symbolSize: 8,
-          lineStyle: {
-            normal: {
-              color: '#7c80f4', // 线条颜色
+              normal: {
+                color: `#7c80f4`, // 线条颜色
+              },
+              borderColor: `rgba(0,0,0,.4)`,
             },
-            borderColor: 'rgba(0,0,0,.4)',
-          },
-          itemStyle: {
-            color: "rgba(14,30,73,1)",
-            borderColor: "#646ace",
-            borderWidth: 2
-          },
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-              formatter: [
-                ' {a|{c}}',
-              ].join(','),
-              rich: {
-                a: {
-                  color: '#fff',
-                  align: 'center',
+            itemStyle: {
+              color: `rgba(14,30,73,1)`,
+              borderColor: `#646ace`,
+              borderWidth: 2,
+            },
+            label: {
+              normal: {
+                show: true,
+                position: `top`,
+                formatter: [` {a|{c}}`].join(`,`),
+                rich: {
+                  a: {
+                    color: `#fff`,
+                    align: `center`,
+                  },
                 },
-              }
-            }
-          },
-          smooth: true,
-          areaStyle: { //区域填充样式
-            normal: {
-              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: "rgba(124, 128, 244,.3)"
-              },{
-                offset: 1,
-                color: "rgba(124, 128, 244, 0)"
-              }], false),
-              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
-              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-            }
+              },
+            },
+            smooth: true,
+            areaStyle: {
+              // 区域填充样式
+              normal: {
+                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: `rgba(124, 128, 244,.3)`,
+                    },
+                    {
+                      offset: 1,
+                      color: `rgba(124, 128, 244, 0)`,
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: `rgba(53,142,215, 0.9)`, // 阴影颜色
+                shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+            data: data.num,
           },
-          data: data.num
-        }]
+        ],
       }
 
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
+      myChart.setOption(option, true)
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
       })
     },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>

src/components/companySummary/talent.vue

@@ -5,136 +5,152 @@
 -->
 
 <template>
-  <div class="talent-container"> 
-    <div class="chart" id="chart_left2"></div>   
+  <div class="talent-container">
+    <div class="chart" id="chart_left2"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "talent",
+  name: `talent`,
   data() {
-    return {
-      
-    }
+    return {}
   },
   mounted() {
-    this.getEchartLeft2();
+    this.getEchartLeft2()
   },
   methods: {
     getEchartLeft2() {
-      let myChart = echarts.init(document.getElementById('chart_left2'));
-      let scaleData = [{
-        name: '博士',
-        value: 5
-      },{
-        name: '硕士',
-        value: 10
-      },{
-        name: '本科',
-        value: 10
-      },{
-        name: '专科',
-        value: 10
-      },{
-        name: '国防科大',
-        value: 5
-      },{
-        name: '大厂专家',
-        value: 5
-      }];
+      let myChart = echarts.init(document.getElementById(`chart_left2`))
+      let scaleData = [
+        {
+          name: `博士`,
+          value: 5,
+        },
+        {
+          name: `硕士`,
+          value: 10,
+        },
+        {
+          name: `本科`,
+          value: 10,
+        },
+        {
+          name: `专科`,
+          value: 10,
+        },
+        {
+          name: `国防科大`,
+          value: 5,
+        },
+        {
+          name: `大厂专家`,
+          value: 5,
+        },
+      ]
       let rich = {
         white: {
-          color: '#ddd',
-          align: 'center',
-          padding: [3, 0]
-        }
-      };
+          color: `#ddd`,
+          align: `center`,
+          padding: [3, 0],
+        },
+      }
       let placeHolderStyle = {
         normal: {
           label: {
-            show: false
+            show: false,
           },
           labelLine: {
-            show: false
+            show: false,
           },
-          color: 'rgba(0, 0, 0, 0)',
-          borderColor: 'rgba(0, 0, 0, 0)',
-          borderWidth: 0
-        }
-      };
-      let data = [];
-      let color=['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+          color: `rgba(0, 0, 0, 0)`,
+          borderColor: `rgba(0, 0, 0, 0)`,
+          borderWidth: 0,
+        },
+      }
+      let data = []
+      let color = [
+        `#00ffff`,
+        `#00cfff`,
+        `#006ced`,
+        `#ffe000`,
+        `#ffa800`,
+        `#ff5b00`,
+        `#ff3000`,
+      ]
       for (let i = 0; i < scaleData.length; i++) {
-        data.push({
-          value: scaleData[i].value,
-          name: scaleData[i].name,
-          itemStyle: {
-            normal: {
-              borderWidth: 6,
-              shadowBlur: 10,
-              borderColor: color[i],
-              shadowColor: color[i]
-            }
+        data.push(
+          {
+            value: scaleData[i].value,
+            name: scaleData[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 6,
+                shadowBlur: 10,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 2,
+            name: ``,
+            itemStyle: placeHolderStyle,
           }
-        }, {
-          value: 2,
-          name: '',
-          itemStyle: placeHolderStyle
-        });
+        )
       }
 
       let option = {
-        series: [{
-          name: '',
-          type: 'pie',
-          clockWise: false,
-          radius: ['66%', '68%'],
-          center: ['50%', '50%'],
-          hoverAnimation: false,
-          itemStyle: {
-            normal: {
-              label: {
-                show: true,
-                position: 'outside',
-                color: '#ddd',
-                formatter: (params) => {
-                  let percent = 0;
-                  let total = 0;
-                  for (let i = 0; i < scaleData.length; i++) {
-                    total += scaleData[i].value;
-                  }
-                  percent = ((params.value / total) * 100).toFixed(0);
-                  if (params.name !== '') {
-                    return params.name + '\n{white|' + '占比' + percent + '%}';
-                  } else {
-                    return '';
-                  }
+        series: [
+          {
+            name: ``,
+            type: `pie`,
+            clockWise: false,
+            radius: [`66%`, `68%`],
+            center: [`50%`, `50%`],
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  position: `outside`,
+                  color: `#ddd`,
+                  formatter: (params) => {
+                    let percent = 0
+                    let total = 0
+                    for (let i = 0; i < scaleData.length; i++) {
+                      total += scaleData[i].value
+                    }
+                    percent = ((params.value / total) * 100).toFixed(0)
+                    if (params.name !== ``) {
+                      return params.name + `\n{white|` + `占比` + percent + `%}`
+                    } else {
+                      return ``
+                    }
+                  },
+                  rich: rich,
+                },
+                labelLine: {
+                  length: 10,
+                  length2: 30,
+                  show: true,
+                  color: `#00ffff`,
                 },
-                rich: rich
               },
-              labelLine: {
-                length: 10,
-                length2: 30,
-                show: true,
-                color: '#00ffff'
-              }
-            }
+            },
+            data: data,
           },
-          data: data
-        }]
+        ],
       }
 
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      myChart.setOption(option, true)
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
     },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>

src/components/companySummary/wordCloud.vue

@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <div class="word-container"> 
+  <div class="word-container">
     <div class="chart" id="chart_right1"></div>
   </div>
 </template>
@@ -14,172 +14,213 @@
 import '@/assets/js/echarts-wordcloud.min'
 
 export default {
-  name: "wordCloud",
+  name: `wordCloud`,
   data() {
     return {
-      timer: null
+      timer: null,
     }
   },
   mounted() {
-    this.getEchartRight1();
+    this.getEchartRight1()
     this.timer = setInterval(() => {
-      this.getEchartRight1();
+      this.getEchartRight1()
     }, 5000)
   },
   methods: {
     getEchartRight1() {
-      let myChart = echarts.init(document.getElementById('chart_right1'));
+      let myChart = echarts.init(document.getElementById(`chart_right1`))
       let option = {
         // tooltip: {
         //   show: false
         // },
-        series: [{
-          type: 'wordCloud',
-          gridSize: 1,
-          sizeRange: [12, 50],
-          rotationRange: [-90, 90],
-          rotationStep: 45,
-          shape: 'diamond',
-          width: '90%',
-          textPadding: 0,
-          autoSize: {
-            enable: true,
-            minSize: 6
-          },
-          textStyle: {
-            normal: {
-              textBorderColor: 'rgba(255,255,255,0.3)',
-              textBorderWidth: 1,
-              color: () => {
-                return 'rgb(' + [
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160)
-                ].join(',') + ')';
-              }
+        series: [
+          {
+            type: `wordCloud`,
+            gridSize: 1,
+            sizeRange: [12, 50],
+            rotationRange: [-90, 90],
+            rotationStep: 45,
+            shape: `diamond`,
+            width: `90%`,
+            textPadding: 0,
+            autoSize: {
+              enable: true,
+              minSize: 6,
+            },
+            textStyle: {
+              normal: {
+                textBorderColor: `rgba(255,255,255,0.3)`,
+                textBorderWidth: 1,
+                color: () => {
+                  return (
+                    `rgb(` +
+                    [
+                      Math.round(Math.random() * 160),
+                      Math.round(Math.random() * 160),
+                      Math.round(Math.random() * 160),
+                    ].join(`,`) +
+                    `)`
+                  )
+                },
+              },
+              emphasis: {
+                fontSize: 20,
+                // shadowBlur: 10,
+                // shadowColor: 'rgba(255,255,255, .1)'
+              },
             },
-            emphasis: {
-              fontSize: 20,
-              // shadowBlur: 10,
-              // shadowColor: 'rgba(255,255,255, .1)'
-            }
+            data: [
+              {
+                name: `区块链`,
+                value: 810,
+              },
+              {
+                name: `云计算`,
+                value: 520,
+              },
+              {
+                name: `人工智能`,
+                value: 928,
+              },
+              {
+                name: `大数据`,
+                value: 906,
+              },
+              {
+                name: `工业互联网`,
+                value: 825,
+              },
+              {
+                name: `医疗`,
+                value: 514,
+              },
+              {
+                name: `质量溯源`,
+                value: 486,
+              },
+              {
+                name: `政务`,
+                value: 53,
+              },
+              {
+                name: `密码学`,
+                value: 927,
+              },
+              {
+                name: `金融行业`,
+                value: 1308,
+              },
+              {
+                name: `供应链`,
+                value: 693,
+              },
+              {
+                name: `公有链`,
+                value: 611,
+              },
+              {
+                name: `私有链`,
+                value: 512,
+              },
+              {
+                name: `联盟链`,
+                value: 382,
+              },
+              {
+                name: `数据共享`,
+                value: 312,
+              },
+              {
+                name: `文创版权`,
+                value: 187,
+              },
+              {
+                name: `天河链`,
+                value: 163,
+              },
+              {
+                name: `数据存证`,
+                value: 104,
+              },
+              {
+                name: `UDFS存储`,
+                value: 3,
+              },
+              {
+                name: `在线教育`,
+                value: 31,
+              },
+              {
+                name: `关联分析`,
+                value: 941,
+              },
+              {
+                name: `智慧停车`,
+                value: 585,
+              },
+              {
+                name: `链云生态`,
+                value: 473,
+              },
+              {
+                name: `应用层`,
+                value: 358,
+              },
+              {
+                name: `网络层`,
+                value: 246,
+              },
+              {
+                name: `数据层`,
+                value: 207,
+              },
+              {
+                name: `基础层`,
+                value: 194,
+              },
+              {
+                name: `智能合约`,
+                value: 104,
+              },
+              {
+                name: `去中心化`,
+                value: 87,
+              },
+              {
+                name: `数字货币`,
+                value: 415,
+              },
+              {
+                name: `酷屏`,
+                value: 253,
+              },
+              {
+                name: `可视化`,
+                value: 211,
+              },
+              {
+                name: `P2P`,
+                value: 116,
+              },
+              {
+                name: `数据挖掘`,
+                value: 1309,
+              },
+            ],
           },
-          data: [{
-            name: '区块链',
-            value: 810
-          }, {
-            name: '云计算',
-            value: 520
-          },{
-            name: "人工智能",
-            value: 928
-          },{
-            name: "大数据",
-            value: 906
-          },{
-            name: "工业互联网",
-            value: 825
-          },{
-            name: "医疗",
-            value: 514
-          },{
-            name: "质量溯源",
-            value: 486
-          },{
-            name: "政务",
-            value: 53
-          },{
-            name: "密码学",
-            value: 927
-          },{
-            name: "金融行业",
-            value: 1308
-          },{
-            name: "供应链",
-            value: 693
-          },{
-            name: "公有链",
-            value: 611
-          },{
-            name: "私有链",
-            value: 512
-          },{
-            name: "联盟链",
-            value: 382
-          },{
-            name: "数据共享",
-            value: 312
-          },{
-            name: "文创版权",
-            value: 187
-          },{
-            name: "天河链",
-            value: 163
-          },{
-            name: "数据存证",
-            value: 104
-          },{
-            name: "UDFS存储",
-            value: 3
-          },{
-            name: "在线教育",
-            value: 31
-          },{
-            name: "关联分析",
-            value: 941
-          },{
-            name: "智慧停车",
-            value: 585
-          },{
-            name: "链云生态",
-            value: 473
-          },{
-            name: "应用层",
-            value: 358
-          },{
-            name: "网络层",
-            value: 246
-          },{
-            name: "数据层",
-            value: 207
-          },{
-            name: "基础层",
-            value: 194
-          },{
-            name: "智能合约",
-            value: 104
-          },{
-            name: "去中心化",
-            value: 87
-          },{
-            name: "数字货币",
-            value: 415
-          },{
-            name: "酷屏",
-            value: 253
-          },{
-            name: "可视化",
-            value: 211
-          },{
-            name: "P2P",
-            value: 116
-          },{
-            name: "数据挖掘",
-            value: 1309
-          }]
-        }]
+        ],
       }
 
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      myChart.setOption(option, true)
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
     },
   },
   beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
+    clearInterval(this.timer)
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/components/dynamicLine/index.vue

@@ -5,21 +5,21 @@
 -->
 
 <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 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",
+  name: `dynamicLine`,
   data() {
     return {
       option: null,
@@ -27,129 +27,140 @@ export default {
       xData: [],
       now: +new Date(2019, 1, 1),
       value: Math.random() * 1000,
-      oneDay: 24 * 3600 * 1000
-      
+      oneDay: 24 * 3600 * 1000,
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     randomData() {
-      this.now = new Date(+this.now + this.oneDay);
-      this.value = this.value + Math.random() * 25 - 10;
+      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)
-        ]
-      };
+          [
+            this.now.getFullYear(),
+            this.now.getMonth() + 1,
+            this.now.getDate(),
+          ].join(`/`),
+          Math.round(this.value),
+        ],
+      }
     },
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_dt'));
+      let myChart = echarts.init(document.getElementById(`chart_dt`))
       for (let i = 0; i < 1000; i++) {
-        this.xData.push(this.randomData());
+        this.xData.push(this.randomData())
       }
 
       this.option = {
         tooltip: {
-          trigger: 'axis',
+          trigger: `axis`,
           axisPointer: {
-            type: 'cross',
+            type: `cross`,
             axisPointer: {
-              type: 'cross',
+              type: `cross`,
               label: {
-                backgroundColor: '#283b56'
-              }
-            }
-          }
+                backgroundColor: `#283b56`,
+              },
+            },
+          },
         },
         grid: {
-          top: '10%',
-          left: '3%',
-          right: '12%',
-          bottom: '3%',
-          containLabel: true
+          top: `10%`,
+          left: `3%`,
+          right: `12%`,
+          bottom: `3%`,
+          containLabel: true,
         },
-        color: ['#b54c5d'],
+        color: [`#b54c5d`],
         calculable: true,
         xAxis: {
-          type: 'time',
-          name: '年-月-日',
+          type: `time`,
+          name: `年-月-日`,
           boundaryGap: false,
           splitNumber: 5,
           axisLabel: {
             formatter(value) {
-              let date = new Date(value);
-              return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
-            }
+              let date = new Date(value)
+              return (
+                date.getFullYear() +
+                `-` +
+                (date.getMonth() + 1) +
+                `-` +
+                date.getDate()
+              )
+            },
           },
           axisTick: {
-            show: false
-          }, 
+            show: false,
+          },
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#2867a8'
-            }
+              color: `#2867a8`,
+            },
           },
           splitLine: {
-            show: false
-          }
+            show: false,
+          },
         },
         yAxis: {
-          type: 'value',
+          type: `value`,
           scale: true,
-          name: '比特币（美元）',
+          name: `比特币（美元）`,
           min: 0,
-          boundaryGap:  false,
+          boundaryGap: false,
           axisTick: {
-            show: false
-          }, 
+            show: false,
+          },
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#2867a8'
-            }
+              color: `#2867a8`,
+            },
           },
           splitLine: {
-            show: false
+            show: false,
           },
         },
-        series: [{
-          name: '实时交易',
-          type: 'line',
-          xAxisIndex: 0,
-          yAxisIndex: 0,
-          itemStyle: {
-            opacity: 0,
+        series: [
+          {
+            name: `实时交易`,
+            type: `line`,
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            itemStyle: {
+              opacity: 0,
+            },
+            data: this.xData,
+            smooth: true,
           },
-          data: this.xData,
-          smooth: true
-        }]
+        ],
       }
 
-      myChart.setOption(this.option, true);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
 
       this.timer = setInterval(() => {
         for (let i = 0; i < 5; i++) {
-          this.xData.shift();
-          this.xData.push(this.randomData());
+          this.xData.shift()
+          this.xData.push(this.randomData())
         }
 
-        myChart.setOption(this.option, true);
-      }, 2000);
-    }
+        myChart.setOption(this.option, true)
+      }, 2000)
+    },
   },
   beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
+    clearInterval(this.timer)
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/components/dynamicList/index.vue

@@ -5,11 +5,11 @@
 -->
 
 <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="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>
@@ -32,7 +32,12 @@
                         <span class="odometer-ribbon">
                           <span class="odometer-ribbon-inner">
                             <span class="odometer-value">
-                              <countTo :startVal='startVal' :endVal='12356' :duration='6000' separator=""></countTo>
+                              <countTo
+                                :startVal="startVal"
+                                :endVal="12356"
+                                :duration="6000"
+                                separator=""
+                              ></countTo>
                             </span>
                           </span>
                         </span>
@@ -56,7 +61,12 @@
                         <span class="odometer-ribbon">
                           <span class="odometer-ribbon-inner">
                             <span class="odometer-value">
-                              <countTo :startVal='startVal' :endVal='65321' :duration='6000' separator=""></countTo>
+                              <countTo
+                                :startVal="startVal"
+                                :endVal="65321"
+                                :duration="6000"
+                                separator=""
+                              ></countTo>
                             </span>
                           </span>
                         </span>
@@ -80,7 +90,12 @@
                         <span class="odometer-ribbon">
                           <span class="odometer-ribbon-inner">
                             <span class="odometer-value">
-                              <countTo :startVal='startVal' :endVal='8686' :duration='6000' separator=""></countTo>
+                              <countTo
+                                :startVal="startVal"
+                                :endVal="8686"
+                                :duration="6000"
+                                separator=""
+                              ></countTo>
                             </span>
                           </span>
                         </span>
@@ -104,7 +119,12 @@
                         <span class="odometer-ribbon">
                           <span class="odometer-ribbon-inner">
                             <span class="odometer-value">
-                              <countTo :startVal='startVal' :endVal='258' :duration='6000' separator=""></countTo>
+                              <countTo
+                                :startVal="startVal"
+                                :endVal="258"
+                                :duration="6000"
+                                separator=""
+                              ></countTo>
                             </span>
                           </span>
                         </span>
@@ -115,10 +135,9 @@
               </div>
             </div>
           </div>
-
-        </div> 
-      </div> 
-    </div>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -126,25 +145,19 @@
 import countTo from 'vue-count-to'
 
 export default {
-  name: "dynamicList",
+  name: `dynamicList`,
   components: {
-    countTo
+    countTo,
   },
   data() {
     return {
-      startVal: 0
+      startVal: 0,
     }
   },
-  mounted() {
-    
-  },
-  methods: {
-    
-  },
-  beforeDestroy() {
-    
-  }
-};
+  mounted() {},
+  methods: {},
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -168,7 +181,7 @@ export default {
       left: 30px;
       width: 234px;
       height: 234px;
-      > [class^=info-1] {
+      > [class^='info-1'] {
         width: 100%;
         height: 100%;
         position: absolute;
@@ -272,7 +285,8 @@ export default {
         -moz-animation-delay: 1s;
         -o-animation-delay: 1s;
         animation-delay: 1s;
-        background: url(../../assets/img/dynamic/info-line-01.png) no-repeat 180px center;
+        background: url(../../assets/img/dynamic/info-line-01.png) no-repeat
+          180px center;
         height: 60px;
         top: 15px;
         .y-number-bg {
@@ -280,10 +294,12 @@ export default {
           -moz-animation-delay: 2s;
           -o-animation-delay: 2s;
           animation-delay: 2s;
-          background: url(../../assets/img/dynamic/info-bg-01.png) no-repeat 50% 50%;
+          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%;
+          background: url(../../assets/img/dynamic/info-icon-1.png) no-repeat
+            50% 50%;
         }
       }
       &.y-number-2 {
@@ -291,7 +307,8 @@ export default {
         -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;
+        background: url(../../assets/img/dynamic/info-line-02.png) no-repeat
+          180px center;
         height: 60px;
         top: 70px;
         padding-left: 350px;
@@ -300,10 +317,12 @@ export default {
           -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%;
+          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%;
+          background: url(../../assets/img/dynamic/info-icon-2.png) no-repeat
+            50% 50%;
         }
       }
       &.y-number-3 {
@@ -311,7 +330,8 @@ export default {
         -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;
+        background: url(../../assets/img/dynamic/info-line-02.png) no-repeat
+          180px center;
         height: 60px;
         top: 135px;
         padding-left: 350px;
@@ -320,10 +340,12 @@ export default {
           -moz-animation-delay: 3s;
           -o-animation-delay: 3s;
           animation-delay: 3s;
-          background: url(../../assets/img/dynamic/info-bg-03.png) no-repeat 50% 50%;
+          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%;
+          background: url(../../assets/img/dynamic/info-icon-3.png) no-repeat
+            50% 50%;
         }
       }
       &.y-number-4 {
@@ -331,7 +353,8 @@ export default {
         -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;
+        background: url(../../assets/img/dynamic/info-line-01.png) no-repeat
+          180px center;
         height: 60px;
         top: 190px;
         .y-number-bg {
@@ -339,26 +362,16 @@ export default {
           -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%;
+          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%;
+          background: url(../../assets/img/dynamic/info-icon-4.png) no-repeat
+            50% 50%;
         }
       }
-
-
-
-
-
-
-
-
-
-
-
     }
   }
-
 }
 
 .animated {
@@ -586,19 +599,4 @@ export default {
   -o-animation-name: flashPD;
   animation-name: flashPD;
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 </style>

src/components/flashCloud/index.vue

@@ -5,100 +5,117 @@
 -->
 
 <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 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 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>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "flashCloud",
+  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'
-      }]
-      
+      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;
+    let len = 5
     this.timer = setInterval(() => {
-      this.number = parseInt(Math.random() * 15, 10);
+      this.number = parseInt(Math.random() * 15, 10)
       if (len == 0) {
-        len = 5;
-        return this.arrData.sort(() => Math.random() - 0.5);
+        len = 5
+        return this.arrData.sort(() => Math.random() - 0.5)
       } else {
-        len--;
+        len--
       }
     }, 2000)
   },
-  methods: {
-    
-  },
+  methods: {},
   beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
+    clearInterval(this.timer)
+  },
+}
 </script>
 
 <style lang="scss" scoped>
@@ -248,7 +265,8 @@ export default {
       .yun-tree {
         width: 100%;
         height: 100%;
-        background: url(../../assets/img/pd-main-left-bg-tree.png) no-repeat 50% bottom;
+        background: url(../../assets/img/pd-main-left-bg-tree.png) no-repeat 50%
+          bottom;
         mix-blend-mode: screen;
       }
       .line-fs {
@@ -374,7 +392,6 @@ export default {
       }
     }
   }
-
 }
 
 @-webkit-keyframes fs {
@@ -427,38 +444,46 @@ export default {
 }
 
 @-webkit-keyframes yun-flash {
-  from,50%,
+  from,
+  50%,
   to {
     opacity: 1;
   }
-  25%,75% {
+  25%,
+  75% {
     opacity: 0;
   }
 }
 @-moz-keyframes yun-flash {
-  from,50%,
+  from,
+  50%,
   to {
     opacity: 1;
   }
-  25%,75% {
+  25%,
+  75% {
     opacity: 0;
   }
 }
 @-o-keyframes yun-flash {
-  from,50%,
+  from,
+  50%,
   to {
     opacity: 1;
   }
-  25%,75% {
+  25%,
+  75% {
     opacity: 0;
   }
 }
 @keyframes yun-flash {
-  from,50%,
+  from,
+  50%,
   to {
     opacity: 1;
   }
-  25%,75% {
+  25%,
+  75% {
     opacity: 0;
   }
 }

src/components/gauge/index.vue

@@ -5,88 +5,102 @@
 -->
 
 <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 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",
+  name: `gauge`,
   data() {
     return {
       option: null,
-      timer: null
+      timer: null,
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_gauge'));
+      let myChart = echarts.init(document.getElementById(`chart_gauge`))
       this.option = {
         tooltip: {
-          formatter: '{a} <br/>{c} {b}'
+          formatter: `{a} <br/>{c} {b}`,
         },
-         series: [{
-            name: '速度',
-            type: 'gauge',
+        series: [
+          {
+            name: `速度`,
+            type: `gauge`,
             min: 0,
             max: 220,
             splitNumber: 11,
             // radius: '50%',
-            axisLine: {            // 坐标轴线
-              lineStyle: {       // 属性lineStyle控制线条样式
-                color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
+            axisLine: {
+              // 坐标轴线
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: [
+                  [0.09, `lime`],
+                  [0.82, `#1e90ff`],
+                  [1, `#ff4500`],
+                ],
                 width: 3,
-                shadowColor: '#fff', //默认透明
-                shadowBlur: 10
-              }
+                shadowColor: `#fff`, // 默认透明
+                shadowBlur: 10,
+              },
             },
-            axisLabel: {            // 坐标轴小标记
-              fontWeight: 'bolder',
-              color: '#fff',
-              shadowColor: '#fff', //默认透明
-              shadowBlur: 10
+            axisLabel: {
+              // 坐标轴小标记
+              fontWeight: `bolder`,
+              color: `#fff`,
+              shadowColor: `#fff`, // 默认透明
+              shadowBlur: 10,
             },
-            axisTick: {            // 坐标轴小标记
-                length: 15,        // 属性length控制线长
-                lineStyle: {       // 属性lineStyle控制线条样式
-                  color: 'auto',
-                  shadowColor: '#fff', //默认透明
-                  shadowBlur: 10
-                }
+            axisTick: {
+              // 坐标轴小标记
+              length: 15, // 属性length控制线长
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: `auto`,
+                shadowColor: `#fff`, // 默认透明
+                shadowBlur: 10,
+              },
             },
-            splitLine: {           // 分隔线
-              length: 25,         // 属性length控制线长
-              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+            splitLine: {
+              // 分隔线
+              length: 25, // 属性length控制线长
+              lineStyle: {
+                // 属性lineStyle（详见lineStyle）控制线条样式
                 width: 3,
-                color: '#fff',
-                shadowColor: '#fff', //默认透明
-                shadowBlur: 10
-              }
+                color: `#fff`,
+                shadowColor: `#fff`, // 默认透明
+                shadowBlur: 10,
+              },
             },
-            pointer: {           // 分隔线
-              shadowColor: '#fff', //默认透明
-              shadowBlur: 5
+            pointer: {
+              // 分隔线
+              shadowColor: `#fff`, // 默认透明
+              shadowBlur: 5,
             },
             title: {
-              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: 'bolder',
+              textStyle: {
+                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                fontWeight: `bolder`,
                 fontSize: 20,
-                fontStyle: 'italic',
-                color: '#fff',
-                shadowColor: '#fff', //默认透明
-                shadowBlur: 10
-              }
+                fontStyle: `italic`,
+                color: `#fff`,
+                shadowColor: `#fff`, // 默认透明
+                shadowBlur: 10,
+              },
             },
             detail: {
               // backgroundColor: 'rgba(30,144,255,0.8)',
@@ -94,37 +108,41 @@ export default {
               // borderColor: '#fff',
               // shadowColor: '#fff', //默认透明
               // shadowBlur: 5,
-              offsetCenter: [0, '50%'],       // x, y，单位px
-              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: 'bolder',
+              offsetCenter: [0, `50%`], // x, y，单位px
+              textStyle: {
+                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                fontWeight: `bolder`,
                 fontSize: 25,
-                color: '#fff'
-              }
+                color: `#fff`,
+              },
             },
-            data: [{
-              value: 40, 
-              name: 'km/h'
-            }]
-        }]
+            data: [
+              {
+                value: 40,
+                name: `km/h`,
+              },
+            ],
+          },
+        ],
       }
 
+      myChart.setOption(this.option, true)
 
-      myChart.setOption(this.option, true);
-
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
 
       this.timer = setInterval(() => {
-        this.option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
-        myChart.setOption(this.option, true);
-      },2000);
-    }
+        this.option.series[0].data[0].value =
+          (Math.random() * 100).toFixed(2) - 0
+        myChart.setOption(this.option, true)
+      }, 2000)
+    },
   },
   beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
+    clearInterval(this.timer)
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/components/index.js

@@ -70,29 +70,27 @@ const components = {
   wordCloud,
   distribution,
   history,
-  
-};
+}
 
 const install = (Vue = {}) => {
-  if (install.installed) return;
-  Object.keys(components).forEach(component => {
-    Vue.component(components[component].name, components[component]);
-  });
+  if (install.installed) return
+  Object.keys(components).forEach((component) => {
+    Vue.component(components[component].name, components[component])
+  })
 
-  install.installed = true;
-};
+  install.installed = true
+}
 
-install.installed = false;
+install.installed = false
 
-if (typeof window !== "undefined" && window.Vue) {
-  install(window.Vue);
-  install.installed = true;
+if (typeof window !== `undefined` && window.Vue) {
+  install(window.Vue)
+  install.installed = true
 }
 
 const Vcomp = {
   ...components,
-  install
-};
-
+  install,
+}
 
 export default Vcomp

src/components/modal/index.vue

@@ -13,112 +13,118 @@
           <i class="iconfont icon-close close" @click="close"></i>
         </div>
         <div class="modal-body">
-            {{ content }}
+          {{ content }}
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn-close" @click="close" v-if="showCancle">
-            {{cancleText ? cancleText : '取消'}}
+          <button
+            type="button"
+            class="btn-close"
+            @click="close"
+            v-if="showCancle"
+          >
+            {{ cancleText ? cancleText : '取消' }}
           </button>
           <button type="button" class="btn-confirm" @click="confirm">
-            {{confirmText ? confirmText : '确定'}}
+            {{ confirmText ? confirmText : '确定' }}
           </button>
         </div>
       </div>
     </div>
   </transition>
 </template>
- 
-<script>
 
+<script>
 export default {
-  name: 'Modal',
+  name: `Modal`,
   props: {
     // modal标题
     title: {
       type: String,
-      default: '提示'
+      default: `提示`,
     },
     // modal内容
     content: {
       type: String,
-      default: ''
+      default: ``,
     },
     // 是否显示
     visible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 是否显示取消按钮
     showCancle: {
       type: Boolean,
-      default: true
+      default: true,
     },
     // 确认按钮文字
     confirmText: {
       type: String,
-      default: '确认'
+      default: `确认`,
     },
     // 取消按钮文字
     cancleText: {
       type: String,
-      default: '取消'
-    }
+      default: `取消`,
+    },
   },
   watch: {
-    visible (curVal) {
+    visible(curVal) {
       // 监听visible值的变化
       console.log(curVal)
-    }
+    },
   },
-  methods: { 
+  methods: {
     // 关闭按钮事件
     close() {
-      this.$emit('update:visible', false);
+      this.$emit(`update:visible`, false)
     },
     // 确定按钮事件
     confirm() {
-      this.close();
-      this.$emit('confirm');
-    }   
-  }
+      this.close()
+      this.$emit(`confirm`)
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 /* 动画效果 淡入淡出 */
-.fade-enter-active, .fade-leave-active{
+.fade-enter-active,
+.fade-leave-active {
   transition: all 0.5s ease;
 }
-.fade-enter, .fade-leave-active{
+.fade-enter,
+.fade-leave-active {
   opacity: 0;
 }
 
-.modal-backdrop { 
-  position: fixed; 
-  top: 0; 
-  right: 0; 
-  bottom: 0; 
-  left: 0; 
-  background-color: rgba(0,0,0,.5); 
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
-  display: flex; 
-  justify-content: center; 
-  align-items: center; 
+  display: flex;
+  justify-content: center;
+  align-items: center;
   z-index: 99999;
   .modal {
-    position: relative; 
-    background-color: #fff; 
-    box-shadow: 2px 2px 20px 1px; 
+    position: relative;
+    background-color: #fff;
+    box-shadow: 2px 2px 20px 1px;
     overflow-x: auto;
     border-radius: 16px;
     width: 400px;
-  } 
-  .modal-header { 
+  }
+  .modal-header {
     position: relative;
-    border-bottom: 1px solid #eee; 
-    color: #313131; 
-    padding: 20px; 
+    border-bottom: 1px solid #eee;
+    color: #313131;
+    padding: 20px;
     font-size: 20px;
     text-align: center;
     .close {
@@ -127,41 +133,42 @@ export default {
       cursor: pointer;
       color: #909399;
       font-size: 18px;
-    } 
-  } 
+    }
+  }
   .modal-footer {
     padding: 10px 20px 20px;
     text-align: right;
-    .btn-close, .btn-confirm {    
-        border-radius: 8px;
-        cursor: pointer;
-        border: none;
-        font-size: 16px;
-        padding: 12px 20px;
-        outline: none;
+    .btn-close,
+    .btn-confirm {
+      border-radius: 8px;
+      cursor: pointer;
+      border: none;
+      font-size: 16px;
+      padding: 12px 20px;
+      outline: none;
     }
     .btn-close {
-        color: #606266;
-        background-color: #fff;
-        border: 1px solid #dcdfe6;
-        margin-right: 20px;
-        &:hover {
-          color: #409eff; 
-          background-color: #ecf5ff;
-        }
+      color: #606266;
+      background-color: #fff;
+      border: 1px solid #dcdfe6;
+      margin-right: 20px;
+      &:hover {
+        color: #409eff;
+        background-color: #ecf5ff;
+      }
     }
     .btn-confirm {
-        color: #fff; 
-        background-color: #409eff;
-        border-color: #409eff;
-        &:hover {
-          background-color: #66b1ff;
-        }
+      color: #fff;
+      background-color: #409eff;
+      border-color: #409eff;
+      &:hover {
+        background-color: #66b1ff;
+      }
     }
-  } 
-  .modal-body { 
-    position: relative; 
-    padding: 30px 20px; 
+  }
+  .modal-body {
+    position: relative;
+    padding: 30px 20px;
     font-size: 16px;
     line-height: 22px;
   }

src/components/pyramid/index.vue

@@ -5,145 +5,167 @@
 -->
 
 <template>
-  <div class="wrap-container trigle"> 
-    <div class="back_img3"></div> 
-    <div class="back_img"></div> 
-    <div class="back_img1"></div> 
+  <div class="wrap-container trigle">
+    <div class="back_img3"></div>
+    <div class="back_img"></div>
+    <div class="back_img1"></div>
     <div class="back_img2"></div>
-    <ul :class="{first: index == 0, second: index == 1, third: index == 2, four: index == 3}" v-for="(item, index) in arrData"> 
+    <ul
+      :class="{
+        first: index == 0,
+        second: index == 1,
+        third: index == 2,
+        four: index == 3,
+      }"
+      v-for="(item, index) in arrData"
+    >
       <li></li>
       <li></li>
-      <li></li> 
       <li></li>
       <li></li>
-      <li></li> 
-    </ul> 
+      <li></li>
+      <li></li>
+    </ul>
 
-    <div class="detail" :class="`detail_${index + 1}`" v-for="(item, index) in arrData" :key="index"> 
-      <div class="detail_txt" :class="`detail_txt${index + 1}`"> 
-        <span class="precent_txt" :class="`precent_txt${index + 1}`"> 
-          <div class="chartsdom" :id="`chart_${index + 1}`"></div> 
+    <div
+      class="detail"
+      :class="`detail_${index + 1}`"
+      v-for="(item, index) in arrData"
+      :key="index"
+    >
+      <div class="detail_txt" :class="`detail_txt${index + 1}`">
+        <span class="precent_txt" :class="`precent_txt${index + 1}`">
+          <div class="chartsdom" :id="`chart_${index + 1}`"></div>
         </span>
-        <div class="txt_right" :class="`txt_right${index + 1}`"> 
-          <span> 
-            <div class="f_div" :class="{aharrow_up: index == 0 || index == 1, aharrow_down: index == 2 || index == 3}">{{ item.post }}</div> 
-            <div class="s_div" :class="`s_div${index + 1}`">{{ item.number }}人</div> 
-          </span> 
+        <div class="txt_right" :class="`txt_right${index + 1}`">
+          <span>
+            <div
+              class="f_div"
+              :class="{
+                aharrow_up: index == 0 || index == 1,
+                aharrow_down: index == 2 || index == 3,
+              }"
+            >
+              {{ item.post }}
+            </div>
+            <div class="s_div" :class="`s_div${index + 1}`">
+              {{ item.number }}人
+            </div>
+          </span>
         </div>
       </div>
-      <div class="arrow_contain" :class="`arrow_contain${index + 1}`"> 
-        <span class="arrow" :class="`arrow_${index + 1}`"></span> 
+      <div class="arrow_contain" :class="`arrow_contain${index + 1}`">
+        <span class="arrow" :class="`arrow_${index + 1}`"></span>
       </div>
     </div>
-
   </div>
-
-    
 </template>
 
 <script>
 export default {
-  name: "pyramid",
+  name: `pyramid`,
   data() {
     return {
       option: null,
-      arrData: [{
-        post: '技术经理',
-        number: 158
-      },{
-        post: 'Java工程师',
-        number: 572
-      },{
-        post: '前端工程师',
-        number: 826
-      },{
-        post: '项目经理',
-        number: 66
-      }],
-      color: ['#45fed4', '#84a9ef', '#f1e04f', '#dbfe73'],
+      arrData: [
+        {
+          post: `技术经理`,
+          number: 158,
+        },
+        {
+          post: `Java工程师`,
+          number: 572,
+        },
+        {
+          post: `前端工程师`,
+          number: 826,
+        },
+        {
+          post: `项目经理`,
+          number: 66,
+        },
+      ],
+      color: [`#45fed4`, `#84a9ef`, `#f1e04f`, `#dbfe73`],
       totalNum: [],
-      sum: 0
-      
+      sum: 0,
     }
   },
   mounted() {
     this.arrData.forEach((v, i) => {
-      this.totalNum.push(v.number);
+      this.totalNum.push(v.number)
     })
     this.sum = this.totalNum.reduce((prev, next, index, array) => prev + next)
     this.arrData.map((v, i) => {
-      v.color = this.color[i];
-      this.getEchart(`chart_${i + 1}`, v);
+      v.color = this.color[i]
+      this.getEchart(`chart_${i + 1}`, v)
     })
   },
   methods: {
     getEchart(dom, data) {
-      let sum = (Math.round( (data.number / this.sum) * 10000 ) / 100).toFixed(1);
-      let myChart = echarts.init(document.getElementById(dom));
+      let sum = (Math.round((data.number / this.sum) * 10000) / 100).toFixed(1)
+      let myChart = echarts.init(document.getElementById(dom))
       this.option = {
-          color: [data.color, '#333'],
-          series: [
-            {
-              name: '访问来源',
-              type: 'pie',
-              radius: ['92%', '100%'],
-              clockWise: false,
-              avoidLabelOverlap: false,
-              hoverAnimation: false,
-              label: {
-                normal: {
-                  show: true,
-                  position: 'center',
-                  textStyle: {
-                      fontSize: 14
-                  },
-                  formatter: '{c}%'
-                }
+        color: [data.color, `#333`],
+        series: [
+          {
+            name: `访问来源`,
+            type: `pie`,
+            radius: [`92%`, `100%`],
+            clockWise: false,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: true,
+                position: `center`,
+                textStyle: {
+                  fontSize: 14,
+                },
+                formatter: `{c}%`,
               },
-              labelLine: {
-                  show: false
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              {
+                value: sum,
+                name: ``,
+                label: {
+                  normal: {
+                    show: true,
+                  },
+                },
               },
-              data: [
-                {
-                  value: sum, 
-                  name: '',
-                  label: {
-                    normal: {
-                      show: true
-                    }
-                  }
+              {
+                value: 100 - sum,
+                name: ``,
+                label: {
+                  normal: {
+                    show: false,
+                  },
                 },
-                {
-                  value: (100 - sum), 
-                  name: '',
-                  label: {
-                    normal: {
-                      show: false
-                    }
-                  }
-                }
-              ]
-            }
-          ]
-      };
-      myChart.setOption(this.option, true);
+              },
+            ],
+          },
+        ],
+      }
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
 .trigle {
-  left: 600px; 
-  top: 150px; 
-  width: 720px; 
+  left: 600px;
+  top: 150px;
+  width: 720px;
   height: 500px;
   .back_img {
     position: absolute;
@@ -199,23 +221,23 @@ export default {
     perspective: 2000px;
     perspective-origin: 50% 100%;
     animation: trigle_down1 1s linear;
-    -webkit-animation: trigle_down1 1s linear; 
+    -webkit-animation: trigle_down1 1s linear;
     li {
       width: 100%;
       height: 100%;
       line-height: 200px;
       position: absolute;
-      background-image: linear-gradient(#45fed4 1%,rgba(0,96,220,1));
+      background-image: linear-gradient(#45fed4 1%, rgba(0, 96, 220, 1));
       opacity: 0.8;
       &:nth-child(1) {
         transform: rotateX(0deg) translateZ(-35px) scale(0.79);
       }
       &:nth-child(2) {
-        transform:translateZ(-100px) translateY(170px) rotateX(-70deg);
+        transform: translateZ(-100px) translateY(170px) rotateX(-70deg);
         height: 70px;
         line-height: 70px;
         transform-origin: 0 100%;
-        clip-path: polygon(25px 0%,calc(100% - 25px) 0%,100% 100%,0% 100%);
+        clip-path: polygon(25px 0%, calc(100% - 25px) 0%, 100% 100%, 0% 100%);
       }
       &:nth-child(3) {
         transform: rotateX(-180deg) translateZ(100px);
@@ -225,20 +247,24 @@ export default {
         line-height: 70px;
         transform-origin: 0 100%;
         transform: translateZ(-100px) translateY(-70px) rotateX(-110deg);
-        clip-path: polygon(25px 0%,calc(100% - 25px) 0%,100% 100%,0% 100%);
+        clip-path: polygon(25px 0%, calc(100% - 25px) 0%, 100% 100%, 0% 100%);
       }
       &:nth-child(5) {
         width: 70px;
         transform-origin: 100% 100%;
         transform: translateZ(-100px) translateX(-70px) rotateY(110deg);
-        clip-path: polygon(0% 25px,100% 0%,100% 100%,0% calc(100% - 25px));
+        clip-path: polygon(0% 25px, 100% 0%, 100% 100%, 0% calc(100% - 25px));
       }
       &:nth-child(6) {
         width: 70px;
         transform-origin: 100% 100%;
-        transform:translateZ(-100px) translateX(170px) rotateY(70deg);
-        clip-path: polygon(0% 25px,100% 0%,100% 100%,0% calc(100% - 25px));
-        background-image: linear-gradient(to left, rgba(0,96,220,1),#45fed4);
+        transform: translateZ(-100px) translateX(170px) rotateY(70deg);
+        clip-path: polygon(0% 25px, 100% 0%, 100% 100%, 0% calc(100% - 25px));
+        background-image: linear-gradient(
+          to left,
+          rgba(0, 96, 220, 1),
+          #45fed4
+        );
       }
     }
   }
@@ -261,17 +287,17 @@ export default {
       width: 100%;
       height: 100%;
       position: absolute;
-      background-image: linear-gradient(rgba(58,200,255,0.8) 25%,#616cff);
+      background-image: linear-gradient(rgba(58, 200, 255, 0.8) 25%, #616cff);
       opacity: 0.8;
       &:nth-child(1) {
         transform: rotateX(0deg) translateZ(-48px) scale(0.8);
       }
       &:nth-child(2) {
-        transform:translateZ(-100px) translateY(140px) rotateX(-70deg);
+        transform: translateZ(-100px) translateY(140px) rotateX(-70deg);
         height: 55px;
         line-height: 55px;
         transform-origin: 0 100%;
-        clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
+        clip-path: polygon(18px 0%, calc(100% - 18px) 0%, 100% 100%, 0% 100%);
       }
       &:nth-child(3) {
         transform: rotateX(-180deg) translateZ(100px);
@@ -281,21 +307,21 @@ export default {
         line-height: 55px;
         transform-origin: 0 100%;
         transform: translateZ(-100px) translateY(-55px) rotateX(-110deg);
-        clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
+        clip-path: polygon(18px 0%, calc(100% - 18px) 0%, 100% 100%, 0% 100%);
       }
       &:nth-child(5) {
         width: 55px;
         transform-origin: 100% 100%;
         transform: translateZ(-100px) translateX(-55px) rotateY(110deg);
-        clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
+        clip-path: polygon(0% 18px, 100% 0%, 100% 100%, 0% calc(100% - 18px));
       }
       &:nth-child(6) {
         width: 55px;
         transform-origin: 100% 100%;
-        transform:translateZ(-100px) translateX(145px) rotateY(70deg);
-        clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
+        transform: translateZ(-100px) translateX(145px) rotateY(70deg);
+        clip-path: polygon(0% 18px, 100% 0%, 100% 100%, 0% calc(100% - 18px));
       }
-    } 
+    }
   }
 
   .third {
@@ -316,17 +342,17 @@ export default {
       width: 100%;
       height: 100%;
       position: absolute;
-      background-image: linear-gradient(#f1e04f 5%,rgba(253,156,48,0.8));
+      background-image: linear-gradient(#f1e04f 5%, rgba(253, 156, 48, 0.8));
       opacity: 0.7;
       &:nth-child(1) {
         transform: rotateX(0deg) translateZ(-48px) scale(0.75);
       }
       &:nth-child(2) {
-        transform:translateZ(-100px) translateY(85px) rotateX(-70deg);
+        transform: translateZ(-100px) translateY(85px) rotateX(-70deg);
         height: 55px;
         line-height: 55px;
         transform-origin: 0 100%;
-        clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
+        clip-path: polygon(18px 0%, calc(100% - 18px) 0%, 100% 100%, 0% 100%);
       }
       &:nth-child(3) {
         transform: rotateX(-180deg) translateZ(100px);
@@ -336,21 +362,21 @@ export default {
         line-height: 55px;
         transform-origin: 0 100%;
         transform: translateZ(-100px) translateY(-55px) rotateX(-110deg);
-        clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
+        clip-path: polygon(18px 0%, calc(100% - 18px) 0%, 100% 100%, 0% 100%);
       }
       &:nth-child(5) {
         width: 55px;
         transform-origin: 100% 100%;
         transform: translateZ(-100px) translateX(-55px) rotateY(110deg);
-        clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
+        clip-path: polygon(0% 18px, 100% 0%, 100% 100%, 0% calc(100% - 18px));
       }
       &:nth-child(6) {
         width: 55px;
         transform-origin: 100% 100%;
-        transform:translateZ(-100px) translateX(85px) rotateY(70deg);
-        clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
+        transform: translateZ(-100px) translateX(85px) rotateY(70deg);
+        clip-path: polygon(0% 18px, 100% 0%, 100% 100%, 0% calc(100% - 18px));
       }
-    } 
+    }
   }
 
   .four {
@@ -371,17 +397,17 @@ export default {
       width: 100%;
       height: 100%;
       position: absolute;
-      background-image: linear-gradient(rgba(112,245,100,0.8) 9%,#dbfe73);
+      background-image: linear-gradient(rgba(112, 245, 100, 0.8) 9%, #dbfe73);
       opacity: 0.7;
       &:nth-child(1) {
-        display:none;
+        display: none;
         transform: rotateX(0deg) translateZ(-48px) scale(0.75);
       }
       &:nth-child(2) {
-        transform:translateZ(-100px) translateY(-48px) rotateX(-70deg);
+        transform: translateZ(-100px) translateY(-48px) rotateX(-70deg);
         height: 152px;
         transform-origin: 0 100%;
-        clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);
+        clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
       }
       &:nth-child(3) {
         transform: rotateX(-180deg) translateZ(100px);
@@ -390,21 +416,21 @@ export default {
         height: 150px;
         transform-origin: 0 100%;
         transform: translateZ(-100px) translateY(-150px) rotateX(-110deg);
-        clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);
+        clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
       }
       &:nth-child(5) {
         width: 150px;
         transform-origin: 100% 100%;
         transform: translateZ(-100px) translateX(-150px) rotateY(110deg);
-        clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);
+        clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);
       }
       &:nth-child(6) {
         width: 152px;
         transform-origin: 100% 100%;
         transform: translateZ(-100px) translateX(-48px) rotateY(70deg);
-        clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);
+        clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);
       }
-    } 
+    }
   }
 
   .detail {
@@ -418,7 +444,7 @@ export default {
     &.detail_2 {
       left: 430px;
       top: 194px;
-      width:290px;
+      width: 290px;
     }
     &.detail_3 {
       left: 67px;
@@ -451,13 +477,15 @@ export default {
           &.aharrow_down {
             &:before {
               @extend %arrow_icon;
-              background: url(../../assets/img/chart2/icon_jt01.png) no-repeat center;
+              background: url(../../assets/img/chart2/icon_jt01.png) no-repeat
+                center;
             }
           }
           &.aharrow_up {
             &:before {
               @extend %arrow_icon;
-              background: url(../../assets/img/chart2/icon_jt02.png) no-repeat center;
+              background: url(../../assets/img/chart2/icon_jt02.png) no-repeat
+                center;
             }
           }
         }
@@ -479,22 +507,22 @@ export default {
         }
       }
       &.detail_txt1 {
-        animation : opacity_path 3s linear;
-        -webkit-animation: opacity_path 3s linear; 
+        animation: opacity_path 3s linear;
+        -webkit-animation: opacity_path 3s linear;
       }
       &.detail_txt2 {
-        animation : opacity_path2 4s linear;
+        animation: opacity_path2 4s linear;
         -webkit-animation: opacity_path2 4s linear;
-        float: right; 
+        float: right;
       }
       &.detail_txt3 {
-        animation : opacity_path3 5s linear;
-        -webkit-animation: opacity_path3 5s linear; 
+        animation: opacity_path3 5s linear;
+        -webkit-animation: opacity_path3 5s linear;
       }
       &.detail_txt4 {
-        animation : opacity_path4 6s linear;
+        animation: opacity_path4 6s linear;
         -webkit-animation: opacity_path4 6s linear;
-        float: right; 
+        float: right;
       }
       .precent_txt {
         width: 50px;
@@ -503,22 +531,26 @@ export default {
         border-radius: 50%;
         margin: 5px;
         &.precent_txt1 {
-          background: url(../../assets/img/chart2/icon_xfq04.png) no-repeat center;
+          background: url(../../assets/img/chart2/icon_xfq04.png) no-repeat
+            center;
         }
         &.precent_txt2 {
-          background: url(../../assets/img/chart2/icon_xfq03.png) no-repeat center;
+          background: url(../../assets/img/chart2/icon_xfq03.png) no-repeat
+            center;
         }
         &.precent_txt3 {
-          background: url(../../assets/img/chart2/icon_xfq01.png) no-repeat center;
+          background: url(../../assets/img/chart2/icon_xfq01.png) no-repeat
+            center;
         }
         &.precent_txt4 {
-          background: url(../../assets/img/chart2/icon_xfq02.png) no-repeat center;
+          background: url(../../assets/img/chart2/icon_xfq02.png) no-repeat
+            center;
         }
       }
     }
   }
-  
-  .chartsdom{
+
+  .chartsdom {
     width: 100%;
     height: 100%;
   }
@@ -528,22 +560,22 @@ export default {
     height: 100%;
     display: inline-block;
     &.arrow_contain1 {
-      animation : clip_line 2s linear;
+      animation: clip_line 2s linear;
       -webkit-animation: clip_line 2s linear;
       float: right;
     }
     &.arrow_contain2 {
-      animation : clip_line2 3s linear;
+      animation: clip_line2 3s linear;
       -webkit-animation: clip_line2 3s linear;
-      float: left; 
+      float: left;
     }
     &.arrow_contain3 {
-      animation : clip_line3 4s linear;
-      -webkit-animation: clip_line3 4s linear; 
+      animation: clip_line3 4s linear;
+      -webkit-animation: clip_line3 4s linear;
       float: right;
     }
     &.arrow_contain4 {
-      animation : clip_line4 5s linear;
+      animation: clip_line4 5s linear;
       -webkit-animation: clip_line4 5s linear;
       float: left;
     }
@@ -674,68 +706,64 @@ export default {
           left: 17px;
         }
       }
-
     }
   }
-
-
 }
 
-
 @keyframes clip_line {
   0% {
-    clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
+    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
   }
   50% {
-    clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
+    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
   }
   75% {
-    clip-path: polygon(50% 0, 100% 0% ,100% 100%, 50% 100%);
+    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
   }
   100% {
-    clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
+    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
   }
 }
 @keyframes clip_line2 {
   0% {
-    clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
+    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
   }
   66.66% {
-    clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
+    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
   }
   83% {
-    clip-path: polygon(0% 0, 50% 0% ,50% 50%, 0% 50%);
+    clip-path: polygon(0% 0, 50% 0%, 50% 50%, 0% 50%);
   }
   100% {
-    clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
+    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
   }
 }
 @keyframes clip_line3 {
   0% {
-    clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
+    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
   }
   75% {
-    clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
+    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
   }
   93% {
-    clip-path: polygon(50% 0, 100% 0% ,100% 100%, 50% 100%);
+    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
   }
   100% {
-    clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
+    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
   }
 }
 @keyframes clip_line4 {
   0% {
-    clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
+    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
   }
   70% {
-    clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
+    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
   }
   85% {
-    clip-path: polygon(0% 0, 50% 0% ,50% 50%, 0% 50%);
+    clip-path: polygon(0% 0, 50% 0%, 50% 50%, 0% 50%);
   }
   100% {
-    clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
+    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
   }
 }
 
@@ -746,7 +774,7 @@ export default {
   66.7% {
     opacity: 0;
   }
-  100%{
+  100% {
     opacity: 1;
   }
 }
@@ -794,13 +822,13 @@ export default {
 }
 @keyframes trigle_down2 {
   0% {
-    top:-300px;
+    top: -300px;
   }
   50% {
-    top:-300px;
+    top: -300px;
   }
   100% {
-    top:45px
+    top: 45px;
   }
 }
 @keyframes trigle_down3 {
@@ -842,5 +870,4 @@ export default {
     transform: rotateX(66deg) rotateZ(360deg);
   }
 }
-
 </style>

src/components/pyramidTrend/index.vue

@@ -5,194 +5,237 @@
 -->
 
 <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="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>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-
 export default {
-  name: "pyramidTrend",
+  name: `pyramidTrend`,
   data() {
     return {
       option: null,
-      dataMap: {}
+      dataMap: {},
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     dataFormatter(obj) {
-      let pList = ['长沙','湘潭','株洲','岳阳','邵阳','衡阳','益阳','娄底','怀化','湘西','张家界','郴州','常德','永州'];
-      let temp;
+      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]
-              };
+        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;
+        }
+        obj[x + `max`] = Math.floor(max / 100) * 100
+        obj[x + `sum`] = sum
       }
-      return obj;
+      return obj
     },
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_ptrend'));
+      let myChart = echarts.init(document.getElementById(`chart_ptrend`))
       let itemStyle = {
         barBorderRadius: [15, 0],
-        color: '#0084ff'
+        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],
-      });
+        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',
+            axisType: `category`,
             autoPlay: true,
             playInterval: 1000,
-            data: ['一类', '二类', '三类'],
+            data: [`一类`, `二类`, `三类`],
             left: 80,
             right: 80,
             bottom: 10,
             lineStyle: {
-              color: '#179bf1'
+              color: `#179bf1`,
             },
             label: {
-              color: '#fff'
+              color: `#fff`,
             },
             checkpointStyle: {
-              color: '#01d8ff',
+              color: `#01d8ff`,
               symbolSize: 10,
-              borderColor: 'rgba(1, 216, 255, 0.5)',
+              borderColor: `rgba(1, 216, 255, 0.5)`,
               borderWidth: 5,
             },
             controlStyle: {
               show: false,
-            }, 
+            },
             itemStyle: {
-              borderColor: '#004b85',
+              borderColor: `#004b85`,
               borderWidth: 1,
-              shadowColor: 'rgba(1, 216, 225, 0.5)',
-              shadowBlur: 5
+              shadowColor: `rgba(1, 216, 225, 0.5)`,
+              shadowBlur: 5,
             },
             emphasis: {
               label: {
-                color: '#01d8ff',
-                show: false
+                color: `#01d8ff`,
+                show: false,
               },
               checkpointStyle: {
-                color: '#01d8ff',
-                borderColor: 'rgba(1, 216, 255, 0.5)',
+                color: `#01d8ff`,
+                borderColor: `rgba(1, 216, 255, 0.5)`,
                 borderWidth: 5,
               },
               itemStyle: {
-                color: '#01d8ff',
-                borderColor: 'rgba(1, 216, 225, 0.5)',
-                borderWidth: 5
-              } 
-            }
+                color: `#01d8ff`,
+                borderColor: `rgba(1, 216, 225, 0.5)`,
+                borderWidth: 5,
+              },
+            },
           },
           calculable: true,
           grid: {
-            top: '10%',
-            bottom: '25%'
+            top: `10%`,
+            bottom: `25%`,
           },
-          xAxis: [{
-            type: 'category',
-            axisLabel: {
-              interval: 0
-            },
-            data: ['长沙','湘潭','株洲','岳阳','邵阳','衡阳','益阳','娄底','怀化','湘西','张家界','郴州','常德','永州'],
-            splitLine: { 
-              show: false 
-            },
-            axisTick: {
-              show: false
-            }, 
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#2867a8',
-              }
+          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
+          ],
+          yAxis: [
+            {
+              type: `value`,
+              name: `家`,
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: `#2867a8`,
+                },
+              },
             },
-            axisTick: {
-              show: false
-            }, 
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#2867a8'
-              }
-            }
-          }],
-          series: [{
-            name: '一类', 
-            type: 'bar',
-            barWidth: 15,
-            legendHoverLink: true,
-            label: {
-              show: true,
-              position: 'top',
-              color: '#fff'
+          ],
+          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
-          }]
-        }]
+        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);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -206,6 +249,4 @@ export default {
     height: 100%;
   }
 }
-
-
 </style>

src/components/rainbow/index.vue

@@ -5,14 +5,19 @@
 -->
 
 <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="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">
+          <div
+            class="preinfo"
+            :class="`preinfo${index}`"
+            v-for="(item, index) in arrData"
+            :key="index"
+          >
             <span>{{ item.percent }}%</span>
             <span>{{ item.name }}</span>
           </div>
@@ -21,240 +26,265 @@
             <span></span>
             <span></span>
           </div>
-        </div> 
-      </div> 
-    </div>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "rainbow",
+  name: `rainbow`,
   data() {
     return {
       option: null,
-      arrData: [{
-        name: '食品类',
-        percent: 73
-      },{
-        name: '工业类',
-        percent: 20
-      },{
-        name: '医疗类',
-        percent: 32
-      },{
-        name: '政务类',
-        percent: 60
-      },{
-        name: '金融类',
-        percent: 14
-      }]
+      arrData: [
+        {
+          name: `食品类`,
+          percent: 73,
+        },
+        {
+          name: `工业类`,
+          percent: 20,
+        },
+        {
+          name: `医疗类`,
+          percent: 32,
+        },
+        {
+          name: `政务类`,
+          percent: 60,
+        },
+        {
+          name: `金融类`,
+          percent: 14,
+        },
+      ],
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_rbt'));
+      let myChart = echarts.init(document.getElementById(`chart_rbt`))
       let itemStyle = {
         normal: {
-          color: 'rgba(0, 0, 0, 0)',
-        }
+          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
+        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: {
+            labelLine: {
               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
+                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
+              shadowColor: `#125ec1`,
+              shadowBlur: 15,
             },
+            data: [
+              {
+                value: 15,
+                name: `15%`,
+                itemStyle: {
+                  normal: {
+                    color: `#125ec1`,
+                  },
+                },
+              },
+              {
+                value: 85,
+                name: `50%`,
+                itemStyle: itemStyle,
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          itemStyle: {
-            shadowColor: '#d68639',
-            shadowBlur: 15
-          },
-          data: [{
-            value: 32,
-            name: '32%',
-            itemStyle: {
+          {
+            name: `政务类`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 90,
+            hoverAnimation: false,
+            radius: [`72%`, `77%`],
+            center: [`50%`, `50%`],
+            label: {
               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
+                show: false,
+              },
             },
-          },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          itemStyle: {
-            shadowColor: '#ad5b68',
-            shadowBlur: 15
-          },
-          data: [{
-            value: 20,
-            name: '20%',
-            itemStyle: {
+            labelLine: {
               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
+                show: false,
+              },
             },
+            itemStyle: {
+              shadowColor: `#3fa5c0`,
+              shadowBlur: 15,
+            },
+            data: [
+              {
+                value: 60,
+                name: `60%`,
+                itemStyle: {
+                  normal: {
+                    color: `#3fa5c0`,
+                  },
+                },
+              },
+              {
+                value: 40,
+                name: `40%`,
+                itemStyle: itemStyle,
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          itemStyle: {
-            shadowColor: '#6082a5',
-            shadowBlur: 15
+          {
+            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,
+              },
+            ],
           },
-          data: [{
-            value: 73,
-            name: '73%',
+          {
+            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: {
-                color: '#6082a5'
-              }
-            }
-          },{
-            value: 27,
-            name: '27%',
-            itemStyle: itemStyle
-          }]
-        }]
+                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);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -273,11 +303,11 @@ export default {
     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%);
+    -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 {
@@ -286,23 +316,23 @@ export default {
       }
     }
     &.preinfo0 {
-      color: rgb(99, 139, 176); 
+      color: rgb(99, 139, 176);
       margin-top: -65px;
     }
     &.preinfo1 {
-      color: rgb(180, 91, 111); 
+      color: rgb(180, 91, 111);
       margin-top: -87px;
     }
     &.preinfo2 {
-      color: rgb(232, 138, 50); 
+      color: rgb(232, 138, 50);
       margin-top: -109px;
     }
     &.preinfo3 {
-      color: rgb(70, 179, 200); 
+      color: rgb(70, 179, 200);
       margin-top: -131px;
     }
     &.preinfo4 {
-      color: rgb(19, 98, 201); 
+      color: rgb(19, 98, 201);
       margin-top: -153px;
     }
   }
@@ -321,12 +351,12 @@ export default {
     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;
+        width: 8px;
+        height: 8px;
+        -webkit-border-radius: 100%;
+        -moz-border-radius: 100%;
+        border-radius: 100%;
+        position: absolute;
         left: -3px;
         top: 50%;
       }
@@ -341,8 +371,8 @@ export default {
       }
     }
     &.pre0 {
-      height: 65px; 
-      background-color: rgb(99, 139, 176); 
+      height: 65px;
+      background-color: rgb(99, 139, 176);
       transform: rotate(-62.614deg);
       span {
         &:nth-child(1) {
@@ -354,8 +384,8 @@ export default {
       }
     }
     &.pre1 {
-      height: 87px; 
-      background-color: rgb(180, 91, 111); 
+      height: 87px;
+      background-color: rgb(180, 91, 111);
       transform: rotate(125.593deg);
       span {
         &:nth-child(1) {
@@ -367,8 +397,8 @@ export default {
       }
     }
     &.pre2 {
-      height: 109px; 
-      background-color: rgb(232, 138, 50); 
+      height: 109px;
+      background-color: rgb(232, 138, 50);
       transform: rotate(86.2006deg);
       span {
         &:nth-child(1) {
@@ -380,8 +410,8 @@ export default {
       }
     }
     &.pre3 {
-      height: 131px; 
-      background-color: rgb(70, 179, 200); 
+      height: 131px;
+      background-color: rgb(70, 179, 200);
       transform: rotate(-18.845deg);
       span {
         &:nth-child(1) {
@@ -393,8 +423,8 @@ export default {
       }
     }
     &.pre4 {
-      height: 153px; 
-      background-color: rgb(19, 98, 201); 
+      height: 153px;
+      background-color: rgb(19, 98, 201);
       transform: rotate(149.666deg);
       span {
         &:nth-child(1) {

src/components/ringPie/index.vue

@@ -5,98 +5,116 @@
 -->
 
 <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 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>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "ringPie",
+  name: `ringPie`,
   data() {
     return {
-      option: null
-      
+      option: null,
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_rp'));
+      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: {
+        series: [
+          {
+            name: `环形饼图`,
+            type: `pie`,
+            radius: [`68%`, `80%`],
+            hoverAnimation: false,
+            avoidLabelOverlap: false,
             label: {
-              show: false
-            }
-          },
-          labelLine: {
-            show: false
+              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`,
+                  },
+                },
+              },
+            ],
           },
-          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);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -116,13 +134,13 @@ export default {
     height: 100%;
   }
 
-  .back-chart{
+  .back-chart {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
-    background:url(../../assets/img/back_chart.png) no-repeat center;
+    background: url(../../assets/img/back_chart.png) no-repeat center;
   }
   .arrow-cir {
     width: 8px;
@@ -136,16 +154,19 @@ export default {
       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");
+      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");
+      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 {

src/components/ringPin/index.vue

@@ -5,10 +5,10 @@
 -->
 
 <template>
-  <div class="wrap-container sn-container"> 
-    <div class="sn-content"> 
-      <div class="sn-title">环形气泡图</div> 
-      <div class="sn-body"> 
+  <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_pin"></div>
           <div class="updef"></div>
@@ -20,417 +20,497 @@
           <div class="definfo definfo5"><span>55个</span><span></span></div>
           <div class="definfo definfo6"><span>42个</span><span></span></div>
           <div class="definfo definfo7"><span>95个</span><span></span></div>
-        </div> 
-      </div> 
-    </div>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "ringPin",
+  name: `ringPin`,
   data() {
     return {
       option: null,
-      
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_pin'));
+      let myChart = echarts.init(document.getElementById(`chart_pin`))
       let linearGradient0 = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0, 
-          color: '#0a49c2'
-        },{
-          offset: 1, 
-          color: '#13adc5'
-        }])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: `#0a49c2`,
+          },
+          {
+            offset: 1,
+            color: `#13adc5`,
+          },
+        ]),
       }
       let linearGradient1 = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0, 
-          color: '#0c388d'
-        },{
-          offset: 1, 
-          color: '#137ff6'
-        }])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: `#0c388d`,
+          },
+          {
+            offset: 1,
+            color: `#137ff6`,
+          },
+        ]),
       }
       let linearGradient2 = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0, 
-          color: '#05247a'
-        },{
-          offset: 1, 
-          color: '#183cd7'
-        }])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: `#05247a`,
+          },
+          {
+            offset: 1,
+            color: `#183cd7`,
+          },
+        ]),
       }
       let linearGradient3 = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0, 
-          color: '#064d9d'
-        },{
-          offset: 1, 
-          color: '#00b977'
-        }])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: `#064d9d`,
+          },
+          {
+            offset: 1,
+            color: `#00b977`,
+          },
+        ]),
       }
       let linearGradient4 = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0, 
-          color: '#133389'
-        },{
-          offset: 1, 
-          color: '#5e51e3'
-        }])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: `#133389`,
+          },
+          {
+            offset: 1,
+            color: `#5e51e3`,
+          },
+        ]),
       }
       let linearGradient5 = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0, 
-          color: '#2a54a4'
-        },{
-          offset: 1, 
-          color: '#ff900e'
-        }])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: `#2a54a4`,
+          },
+          {
+            offset: 1,
+            color: `#ff900e`,
+          },
+        ]),
       }
       let linearGradient6 = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0, 
-          color: '#5a847f'
-        },{
-          offset: 1, 
-          color: '#e3de24'
-        }])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: `#5a847f`,
+          },
+          {
+            offset: 1,
+            color: `#e3de24`,
+          },
+        ]),
       }
       let linearGradient7 = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-          offset: 0, 
-          color: '#38828a'
-        },{
-          offset: 1, 
-          color: '#61ac62'
-        }])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: `#38828a`,
+          },
+          {
+            offset: 1,
+            color: `#61ac62`,
+          },
+        ]),
       }
 
       this.option = {
-        color: ['#05bbdf', '#1170e1', '#1b40e3', '#00c86c', '#5e51e3', '#ff9235', '#fef51e', '#399632'],
+        color: [
+          `#05bbdf`,
+          `#1170e1`,
+          `#1b40e3`,
+          `#00c86c`,
+          `#5e51e3`,
+          `#ff9235`,
+          `#fef51e`,
+          `#399632`,
+        ],
         legend: {
           show: true,
-          orient: 'vertical',
-          left: '80%',
-          top: 'middle',
-          data: ['2020年', '2019年', '2018年', '2017年', '2016年', '2015年', '2014年', '2013年'],
+          orient: `vertical`,
+          left: `80%`,
+          top: `middle`,
+          data: [
+            `2020年`,
+            `2019年`,
+            `2018年`,
+            `2017年`,
+            `2016年`,
+            `2015年`,
+            `2014年`,
+            `2013年`,
+          ],
           textStyle: {
-            color: '#fff',
+            color: `#fff`,
             fontSize: 14,
           },
           itemWidth: 20,
-          itemHeight: 10
+          itemHeight: 10,
         },
-        series: [{
-          name: '2020年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['85%', '90%'],
-          center: ['40%', '50%'],
-          label: {
-            normal: {
-              show: false
-            },
-          },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 300,
-            itemStyle: {
+        series: [
+          {
+            name: `2020年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`85%`, `90%`],
+            center: [`40%`, `50%`],
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 270,
-            itemStyle: linearGradient0
-          },{
-            value: 30,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: '#053f67'
-              }
-            }
-          }]
-        },{
-          name: '2019年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['75%', '80%'],
-          center: ['40%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 300,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 270,
+                itemStyle: linearGradient0,
+              },
+              {
+                value: 30,
+                itemStyle: {
+                  normal: {
+                    color: `#053f67`,
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 300,
-            itemStyle: {
+          {
+            name: `2019年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`75%`, `80%`],
+            center: [`40%`, `50%`],
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 180,
-            itemStyle: linearGradient1
-          },{
-            value: 120,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: '#062d67'
-              }
-            }
-          }]
-        },{
-          name: '2018年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['65%', '70%'],
-          center: ['40%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 300,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 180,
+                itemStyle: linearGradient1,
+              },
+              {
+                value: 120,
+                itemStyle: {
+                  normal: {
+                    color: `#062d67`,
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 300,
-            itemStyle: {
+          {
+            name: `2018年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`65%`, `70%`],
+            center: [`40%`, `50%`],
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 220,
-            itemStyle: linearGradient2
-          },{
-            value: 80,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: '#0c266a'
-              }
-            }
-          }]
-        },{
-          name: '2017年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['55%', '60%'],
-          center: ['40%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 300,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 220,
+                itemStyle: linearGradient2,
+              },
+              {
+                value: 80,
+                itemStyle: {
+                  normal: {
+                    color: `#0c266a`,
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 300,
-            itemStyle: {
+          {
+            name: `2017年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`55%`, `60%`],
+            center: [`40%`, `50%`],
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 210,
-            itemStyle: linearGradient3
-          },{
-            value: 90,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: '#03414f'
-              }
-            }
-          }]
-        },{
-          name: '2016年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['45%', '50%'],
-          center: ['40%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 300,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 210,
+                itemStyle: linearGradient3,
+              },
+              {
+                value: 90,
+                itemStyle: {
+                  normal: {
+                    color: `#03414f`,
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 300,
-            itemStyle: {
+          {
+            name: `2016年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`45%`, `50%`],
+            center: [`40%`, `50%`],
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 150,
-            itemStyle: linearGradient4
-          },{
-            value: 150,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: '#142868'
-              }
-            }
-          }]
-        },{
-          name: '2015年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['35%', '40%'],
-          center: ['40%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 300,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 150,
+                itemStyle: linearGradient4,
+              },
+              {
+                value: 150,
+                itemStyle: {
+                  normal: {
+                    color: `#142868`,
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 300,
-            itemStyle: {
+          {
+            name: `2015年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`35%`, `40%`],
+            center: [`40%`, `50%`],
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 150,
-            itemStyle: linearGradient5
-          },{
-            value: 150,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: '#373546'
-              }
-            }
-          }]
-        },{
-          name: '2014年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['25%', '30%'],
-          center: ['40%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 300,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 150,
+                itemStyle: linearGradient5,
+              },
+              {
+                value: 150,
+                itemStyle: {
+                  normal: {
+                    color: `#373546`,
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 300,
-            itemStyle: {
+          {
+            name: `2014年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`25%`, `30%`],
+            center: [`40%`, `50%`],
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 50,
-            itemStyle: linearGradient6
-          },{
-            value: 250,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: '#35483f'
-              }
-            }
-          }]
-        },{
-          name: '2013年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['15%', '20%'],
-          center: ['40%', '50%'],
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 300,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 50,
+                itemStyle: linearGradient6,
+              },
+              {
+                value: 250,
+                itemStyle: {
+                  normal: {
+                    color: `#35483f`,
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 300,
-            itemStyle: {
+          {
+            name: `2013年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`15%`, `20%`],
+            center: [`40%`, `50%`],
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 50,
-            itemStyle: linearGradient7
-          },{
-            value: 250,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: '#0f3541'
-              }
-            }
-          }]
-        }]
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 300,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 50,
+                itemStyle: linearGradient7,
+              },
+              {
+                value: 250,
+                itemStyle: {
+                  normal: {
+                    color: `#0f3541`,
+                  },
+                },
+              },
+            ],
+          },
+        ],
       }
 
-      myChart.setOption(this.option, true);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -459,7 +539,7 @@ export default {
   .definfo {
     position: absolute;
     top: 50%;
-    transform: translate(0%,-50%);
+    transform: translate(0%, -50%);
     white-space: nowrap;
     font-size: 14px;
     color: #fff;

src/components/rotateColorful/index.vue

@@ -5,156 +5,168 @@
 -->
 
 <template>
-  <div class="wrap-container sn-container"> 
-    <div class="sn-content"> 
-      <div class="sn-title">旋转多彩图</div> 
-      <div class="sn-body"> 
+  <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="pie"> 
-            <div class="pies pie1"></div> 
-            <div class="pies pie2"></div> 
-            <div class="pies pie3"></div> 
-            <div class="pie4"></div> 
-          </div> 
-          <div class="chartsdom" id="chart_rotate"></div> 
-        </div> 
-      </div> 
-    </div>   
+          <div class="pie">
+            <div class="pies pie1"></div>
+            <div class="pies pie2"></div>
+            <div class="pies pie3"></div>
+            <div class="pie4"></div>
+          </div>
+          <div class="chartsdom" id="chart_rotate"></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "rotateColorful",
+  name: `rotateColorful`,
   data() {
     return {
       option: null,
-      
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_rotate'));
+      let myChart = echarts.init(document.getElementById(`chart_rotate`))
       this.option = {
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
+          trigger: `item`,
+          formatter: `{a} <br/>{b} : {c} ({d}%)`,
         },
         legend: {
           show: true,
-          orient: 'vertical',
-          left: 'center',
-          top: 'middle',
-          data: ['内存', '存储'],
+          orient: `vertical`,
+          left: `center`,
+          top: `middle`,
+          data: [`内存`, `存储`],
           textStyle: {
-            color: '#4ce5ff',
+            color: `#4ce5ff`,
             fontSize: 14,
           },
           itemWidth: 20,
-          itemHeight: 10
+          itemHeight: 10,
         },
         label: {
           normal: {
-            show: false
+            show: false,
           },
         },
         labelLine: {
           normal: {
-            show: false
-          }
-        },
-        series: [{
-          name: '磁盘空间',
-          type: 'pie',
-          radius: [60, 110],
-          center: ['50%', '50%'],
-          roseType: 'area',
-          label: {
-            show: false
+            show: false,
           },
-          emphasis: {
+        },
+        series: [
+          {
+            name: `磁盘空间`,
+            type: `pie`,
+            radius: [60, 110],
+            center: [`50%`, `50%`],
+            roseType: `area`,
             label: {
-              show: false
-            }
+              show: false,
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 6.5,
+                name: `内存`,
+                itemStyle: {
+                  normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: `#387ed3`,
+                      },
+                      {
+                        offset: 1,
+                        color: `#bc8b68`,
+                      },
+                    ]),
+                  },
+                },
+              },
+              {
+                value: 3.5,
+                name: `存储`,
+                itemStyle: {
+                  normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: `#188bfd`,
+                      },
+                      {
+                        offset: 1,
+                        color: `#51eeff`,
+                      },
+                    ]),
+                  },
+                },
+              },
+              {
+                value: 0,
+                name: `其他`,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 0,
+                name: `其他1`,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 0,
+                name: `其他2`,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+              {
+                value: 0,
+                name: `其他3`,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+            ],
           },
-          data: [{
-            value: 6.5, 
-            name: '内存',
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0, 
-                  color: '#387ed3'
-                },{
-                  offset: 1, 
-                  color: '#bc8b68'
-                }])
-              }
-            }
-          },{
-            value: 3.5, 
-            name: '存储',
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0, 
-                  color: '#188bfd'
-                },{
-                  offset: 1, 
-                  color: '#51eeff'
-                }])
-              }
-            }
-          },{
-            value: 0, 
-            name: '其他',
-            itemStyle: {
-              normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 0, 
-            name: '其他1',
-            itemStyle: {
-              normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 0, 
-            name: '其他2',
-            itemStyle: {
-              normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          },{
-            value: 0, 
-            name: '其他3',
-            itemStyle: {
-              normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          }]
-        }]
+        ],
       }
 
-      myChart.setOption(this.option, true);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -201,12 +213,16 @@ export default {
       left: 36%;
       width: 76px;
       height: 1px;
-      background: linear-gradient(to right,rgb(31,38,103), rgb(90,250,253), rgb(31,38,103));
+      background: linear-gradient(
+        to right,
+        rgb(31, 38, 103),
+        rgb(90, 250, 253),
+        rgb(31, 38, 103)
+      );
     }
   }
 }
 
-
 @-webkit-keyframes mymove {
   0% {
     -webkit-transform-origin: center;

src/components/scanRadius/index.vue

@@ -5,11 +5,11 @@
 -->
 
 <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="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_scan"></div>
           <div class="box">
             <div class="nodetext text0">
@@ -28,303 +28,334 @@
               <span>移动互联网</span>
             </div>
           </div>
-        </div> 
-      </div> 
-
-    </div>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "scanRadius",
+  name: `scanRadius`,
   data() {
     return {
       option: null,
       option2: null,
-      val: 0
+      val: 0,
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_scan'));
-      let arrData = [{
-        value: 3, 
-        name: '区块链',
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0, 
-              color: '#4284dd'
-            },{
-              offset: 1, 
-              color: '#0c3371'
-            }])
-          }
-        }
-      },{
-        value: 4.5, 
-        name: '人工智能',
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0, 
-              color: '#5253d3'
-            },{
-              offset: 1, 
-              color: '#072559'
-            }])
-          }
-        }
-      },{
-        value: 3, 
-        name: '大数据',
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0, 
-              color: '#8b5c85'
-            },{
-              offset: 1, 
-              color: '#183571'
-            }])
-          }
-        }
-      },{
-        value: 5.5, 
-        name: '云计算',
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0, 
-              color: '#b4734f'
-            },{
-              offset: 1, 
-              color: '#443e5f'
-            }])
-          }
-        }
-      },{
-        value: 3, 
-        name: '移动互联网',
-        itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0, 
-              color: '#3ab1d9'
-            },{
-              offset: 1, 
-              color: '#124c94'
-            }])
-          }
-        }
-      }]
+      let myChart = echarts.init(document.getElementById(`chart_scan`))
+      let arrData = [
+        {
+          value: 3,
+          name: `区块链`,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: `#4284dd`,
+                },
+                {
+                  offset: 1,
+                  color: `#0c3371`,
+                },
+              ]),
+            },
+          },
+        },
+        {
+          value: 4.5,
+          name: `人工智能`,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: `#5253d3`,
+                },
+                {
+                  offset: 1,
+                  color: `#072559`,
+                },
+              ]),
+            },
+          },
+        },
+        {
+          value: 3,
+          name: `大数据`,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: `#8b5c85`,
+                },
+                {
+                  offset: 1,
+                  color: `#183571`,
+                },
+              ]),
+            },
+          },
+        },
+        {
+          value: 5.5,
+          name: `云计算`,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: `#b4734f`,
+                },
+                {
+                  offset: 1,
+                  color: `#443e5f`,
+                },
+              ]),
+            },
+          },
+        },
+        {
+          value: 3,
+          name: `移动互联网`,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: `#3ab1d9`,
+                },
+                {
+                  offset: 1,
+                  color: `#124c94`,
+                },
+              ]),
+            },
+          },
+        },
+      ]
 
       for (let i = 0; i < arrData.length; i++) {
-        this.val += arrData[i].value;
+        this.val += arrData[i].value
       }
 
       arrData.push({
-        value: this.val, 
-        name: '__other', 
+        value: this.val,
+        name: `__other`,
         itemStyle: {
           normal: {
-            color: 'rgba(0, 0, 0, 0)'
-          }
-        }
-      });
+            color: `rgba(0, 0, 0, 0)`,
+          },
+        },
+      })
 
-      let arrData2 = [{
-        value: 10,
-        itemStyle: {
-          normal: {
-            color: 'rgba(0, 0, 0, 0)',
-            borderColor: 'rgba(17, 93, 217, 0.4)',
-            borderWidth: 1
-          }
-        }
-      },{
-        value: 10,
-        itemStyle: {
-          normal: {
-            color: 'rgba(0, 0, 0, 0)'
-          }
-        }
-      }]
+      let arrData2 = [
+        {
+          value: 10,
+          itemStyle: {
+            normal: {
+              color: `rgba(0, 0, 0, 0)`,
+              borderColor: `rgba(17, 93, 217, 0.4)`,
+              borderWidth: 1,
+            },
+          },
+        },
+        {
+          value: 10,
+          itemStyle: {
+            normal: {
+              color: `rgba(0, 0, 0, 0)`,
+            },
+          },
+        },
+      ]
 
       let tooltip = {
-        formatter: ' ',
-        backgroundColor: 'rgba(0, 0, 0, 0)'
+        formatter: ` `,
+        backgroundColor: `rgba(0, 0, 0, 0)`,
       }
 
       this.option = {
         label: {
           normal: {
-            show: false
+            show: false,
           },
         },
         labelLine: {
           normal: {
-            show: false
-          }
+            show: false,
+          },
         },
         tooltip: {
-          trigger: 'item' 
+          trigger: `item`,
         },
-        series: [{
-          name: '现代技术',
-          type: 'pie',
-          startAngle: -180,
-          radius: '190%',
-          center: ['50%', '50%'],
-          roseType: 'radius',
-          z: 0,
-          tooltip: {
-            formatter: '{b0}: {c0} ({d0}%)' 
-          },
-          label: {
-            show: false
-          },
-          emphasis: {
+        series: [
+          {
+            name: `现代技术`,
+            type: `pie`,
+            startAngle: -180,
+            radius: `190%`,
+            center: [`50%`, `50%`],
+            roseType: `radius`,
+            z: 0,
+            tooltip: {
+              formatter: `{b0}: {c0} ({d0}%)`,
+            },
             label: {
-              show: false
-            }
-          },
-          data: arrData
-        },{
-          name: '2020年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['90%', '90%'],
-          center: ['50%', '50%'],
-          tooltip: tooltip,
-          label: {
-            normal: {
-              show: false
+              show: false,
             },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            data: arrData,
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: [{
-            value: 10,
-            itemStyle: {
+          {
+            name: `2020年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`90%`, `90%`],
+            center: [`50%`, `50%`],
+            tooltip: tooltip,
+            label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)',
-                borderColor: 'rgba(21, 103, 214, 1)',
-                borderWidth: 2,
-                borderType: 'dashed'
-              }
-            }
-          },{
-            value: 10,
-            itemStyle: {
+                show: false,
+              },
+            },
+            labelLine: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          }]
-        },{
-          name: '2019年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['70%', '70%'],
-          center: ['50%', '50%'],
-          tooltip: tooltip,
-          label: {
-            normal: {
-              show: false
+                show: false,
+              },
             },
+            data: [
+              {
+                value: 10,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                    borderColor: `rgba(21, 103, 214, 1)`,
+                    borderWidth: 2,
+                    borderType: `dashed`,
+                  },
+                },
+              },
+              {
+                value: 10,
+                itemStyle: {
+                  normal: {
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                },
+              },
+            ],
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: arrData2
-        },{
-          name: '2018年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['50%', '50%'],
-          center: ['50%', '50%'],
-          tooltip: tooltip,
-          label: {
-            normal: {
-              show: false
+          {
+            name: `2019年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`70%`, `70%`],
+            center: [`50%`, `50%`],
+            tooltip: tooltip,
+            label: {
+              normal: {
+                show: false,
+              },
             },
-          },
-          labelLine: {
-            normal: {
-              show: false
-            }
-          },
-          data: arrData2
-        },{
-          name: '2017年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['30%', '30%'],
-          center: ['50%', '50%'],
-          tooltip: tooltip,
-          label: {
-            normal: {
-              show: false
+            labelLine: {
+              normal: {
+                show: false,
+              },
             },
+            data: arrData2,
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
+          {
+            name: `2018年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`50%`, `50%`],
+            center: [`50%`, `50%`],
+            tooltip: tooltip,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: arrData2,
           },
-          data: arrData2
-        },{
-          name: '2016年',
-          type: 'pie',
-          clockWise: false,
-          startAngle: 0,
-          hoverAnimation: false,
-          radius: ['10%', '10%'],
-          center: ['50%', '50%'],
-          tooltip: tooltip,
-          label: {
-            normal: {
-              show: false
+          {
+            name: `2017年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`30%`, `30%`],
+            center: [`50%`, `50%`],
+            tooltip: tooltip,
+            label: {
+              normal: {
+                show: false,
+              },
             },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: arrData2,
           },
-          labelLine: {
-            normal: {
-              show: false
-            }
+          {
+            name: `2016年`,
+            type: `pie`,
+            clockWise: false,
+            startAngle: 0,
+            hoverAnimation: false,
+            radius: [`10%`, `10%`],
+            center: [`50%`, `50%`],
+            tooltip: tooltip,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: arrData2,
           },
-          data: arrData2
-        }]
+        ],
       }
 
-      myChart.setOption(this.option, true);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -341,7 +372,7 @@ export default {
 
   .box {
     overflow: hidden;
-    .nodetext{
+    .nodetext {
       position: absolute;
       left: 50%;
       top: 51%;
@@ -353,9 +384,9 @@ export default {
       transform: translate(0%, -60%);
       color: #00c2ff;
       font-size: 13px;
-      &.text0{
-        border-right: 2px rgba(29,122,248,0.54) solid;
-        border-bottom: 2px rgba(29,122,248,0.54) solid;
+      &.text0 {
+        border-right: 2px rgba(29, 122, 248, 0.54) solid;
+        border-bottom: 2px rgba(29, 122, 248, 0.54) solid;
         width: 70px;
         height: 50px;
         margin-left: -110px;
@@ -373,22 +404,52 @@ export default {
           -webkit-border-radius: 100%;
           -moz-border-radius: 100%;
           border-radius: 100%;
-          background: rgb(47,138,240);
+          background: rgb(47, 138, 240);
         }
       }
-      &.text1{
-        border-right: 2px rgba(29,122,248,0.54) solid;
-        border-bottom: 2px rgb(134,92,255) solid;
+      &.text1 {
+        border-right: 2px rgba(29, 122, 248, 0.54) solid;
+        border-bottom: 2px rgb(134, 92, 255) solid;
         width: 30px;
         height: 80px;
         margin-left: -50px;
         margin-top: 44px;
-        -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), to(rgb(134,92,255))) 2 2;
-        -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
-        -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
-        -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
-        border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), to(rgb(134,92,255))) 2 2;
-        border-image: linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
+        -webkit-border-image: -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from(rgba(29, 122, 248, 0.54)),
+            to(rgb(134, 92, 255))
+          )
+          2 2;
+        -webkit-border-image: -webkit-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgb(134, 92, 255)
+          )
+          2 2;
+        -moz-border-image: -moz-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgb(134, 92, 255)
+          )
+          2 2;
+        -o-border-image: -o-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgb(134, 92, 255)
+          )
+          2 2;
+        border-image: -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from(rgba(29, 122, 248, 0.54)),
+            to(rgb(134, 92, 255))
+          )
+          2 2;
+        border-image: linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgb(134, 92, 255)
+          )
+          2 2;
         span {
           position: absolute;
           margin-left: -50px;
@@ -403,21 +464,57 @@ export default {
           -webkit-border-radius: 100%;
           -moz-border-radius: 100%;
           border-radius: 100%;
-          background: rgb(117,94,255);
+          background: rgb(117, 94, 255);
         }
       }
-      &.text2{
-        border-right: 2px rgba(29,122,248,0.54) solid;
+      &.text2 {
+        border-right: 2px rgba(29, 122, 248, 0.54) solid;
         width: 30px;
         height: 93px;
         margin-top: 53px;
         margin-left: -31px;
-        -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgb(10,106,255)), color-stop(rgba(112,107,189,0.54)),to(rgb(214,108,123))) 2 2;
-        -webkit-border-image: -webkit-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
-        -moz-border-image: -moz-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
-        -o-border-image: -o-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
-        border-image: -webkit-gradient( linear, left top, left bottom, from(rgb(10,106,255)), color-stop(rgba(112,107,189,0.54)),to(rgb(214,108,123))) 2 2;
-        border-image: linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
+        -webkit-border-image: -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from(rgb(10, 106, 255)),
+            color-stop(rgba(112, 107, 189, 0.54)),
+            to(rgb(214, 108, 123))
+          )
+          2 2;
+        -webkit-border-image: -webkit-linear-gradient(
+            rgb(10, 106, 255),
+            rgba(112, 107, 189, 0.54),
+            rgb(214, 108, 123)
+          )
+          2 2;
+        -moz-border-image: -moz-linear-gradient(
+            rgb(10, 106, 255),
+            rgba(112, 107, 189, 0.54),
+            rgb(214, 108, 123)
+          )
+          2 2;
+        -o-border-image: -o-linear-gradient(
+            rgb(10, 106, 255),
+            rgba(112, 107, 189, 0.54),
+            rgb(214, 108, 123)
+          )
+          2 2;
+        border-image: -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from(rgb(10, 106, 255)),
+            color-stop(rgba(112, 107, 189, 0.54)),
+            to(rgb(214, 108, 123))
+          )
+          2 2;
+        border-image: linear-gradient(
+            rgb(10, 106, 255),
+            rgba(112, 107, 189, 0.54),
+            rgb(214, 108, 123)
+          )
+          2 2;
         span {
           position: absolute;
           display: block;
@@ -435,22 +532,58 @@ export default {
           -webkit-border-radius: 100%;
           -moz-border-radius: 100%;
           border-radius: 100%;
-          background: rgb(197,73,89);
+          background: rgb(197, 73, 89);
         }
       }
-      &.text3{
-        border-left: 2px rgba(29,122,248,0.54) solid;
-        border-bottom: 2px rgba(29,122,248,0.54) solid;
+      &.text3 {
+        border-left: 2px rgba(29, 122, 248, 0.54) solid;
+        border-bottom: 2px rgba(29, 122, 248, 0.54) solid;
         width: 30px;
         height: 80px;
         margin-left: 18px;
         margin-top: 44px;
-        -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(136,135,162,0.5)),to(rgb(249,161,77))) 2 2;
-        -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
-        -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
-        -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
-        border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(136,135,162,0.5)),to(rgb(249,161,77))) 2 2;
-        border-image: linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
+        -webkit-border-image: -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from(rgba(29, 122, 248, 0.54)),
+            color-stop(rgba(136, 135, 162, 0.5)),
+            to(rgb(249, 161, 77))
+          )
+          2 2;
+        -webkit-border-image: -webkit-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgba(136, 135, 162, 0.5),
+            rgb(249, 161, 77)
+          )
+          2 2;
+        -moz-border-image: -moz-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgba(136, 135, 162, 0.5),
+            rgb(249, 161, 77)
+          )
+          2 2;
+        -o-border-image: -o-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgba(136, 135, 162, 0.5),
+            rgb(249, 161, 77)
+          )
+          2 2;
+        border-image: -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from(rgba(29, 122, 248, 0.54)),
+            color-stop(rgba(136, 135, 162, 0.5)),
+            to(rgb(249, 161, 77))
+          )
+          2 2;
+        border-image: linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgba(136, 135, 162, 0.5),
+            rgb(249, 161, 77)
+          )
+          2 2;
         span {
           position: absolute;
           display: block;
@@ -468,22 +601,58 @@ export default {
           -webkit-border-radius: 100%;
           -moz-border-radius: 100%;
           border-radius: 100%;
-          background: rgb(230,137,50);
+          background: rgb(230, 137, 50);
         }
       }
-      &.text4{
-        border-left: 2px rgba(29,122,248,0.54) solid;
-        border-bottom: 2px rgba(29,122,248,0.54) solid;
+      &.text4 {
+        border-left: 2px rgba(29, 122, 248, 0.54) solid;
+        border-bottom: 2px rgba(29, 122, 248, 0.54) solid;
         width: 70px;
         height: 50px;
         margin-left: 40px;
         margin-top: 25px;
-        -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(51,181,255,0.64)),to(rgb(92,255,255))) 2 2;
-        -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
-        -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
-        -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
-        border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(51,181,255,0.64)),to(rgb(92,255,255))) 2 2;
-        border-image: linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
+        -webkit-border-image: -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from(rgba(29, 122, 248, 0.54)),
+            color-stop(rgba(51, 181, 255, 0.64)),
+            to(rgb(92, 255, 255))
+          )
+          2 2;
+        -webkit-border-image: -webkit-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgba(51, 181, 255, 0.64),
+            rgb(92, 255, 255)
+          )
+          2 2;
+        -moz-border-image: -moz-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgba(51, 181, 255, 0.64),
+            rgb(92, 255, 255)
+          )
+          2 2;
+        -o-border-image: -o-linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgba(51, 181, 255, 0.64),
+            rgb(92, 255, 255)
+          )
+          2 2;
+        border-image: -webkit-gradient(
+            linear,
+            left top,
+            left bottom,
+            from(rgba(29, 122, 248, 0.54)),
+            color-stop(rgba(51, 181, 255, 0.64)),
+            to(rgb(92, 255, 255))
+          )
+          2 2;
+        border-image: linear-gradient(
+            rgba(29, 122, 248, 0.54),
+            rgba(51, 181, 255, 0.64),
+            rgb(92, 255, 255)
+          )
+          2 2;
         span {
           position: absolute;
           display: block;
@@ -501,7 +670,7 @@ export default {
           -webkit-border-radius: 100%;
           -moz-border-radius: 100%;
           border-radius: 100%;
-          background:rgb(56,208,231);
+          background: rgb(56, 208, 231);
         }
       }
     }

src/components/scrollArc/index.vue

@@ -5,146 +5,154 @@
 -->
 
 <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="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_arc"></div>
-        </div> 
-      </div> 
-    </div>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "scrollArc",
+  name: `scrollArc`,
   data() {
     return {
       option: null,
       number: 0, // 播放所在下标
       timer: null,
       xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-      data: [54, 86, 46, 77, 96, 89, 88, 23, 38, 3, 66, 98]
+      data: [54, 86, 46, 77, 96, 89, 88, 23, 38, 3, 66, 98],
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_arc'));
+      let myChart = echarts.init(document.getElementById(`chart_arc`))
       this.option = {
         tooltip: {
-          trigger: 'axis',
+          trigger: `axis`,
           showContent: false,
-          axisPointer: { 
-            type: 'shadow',
+          axisPointer: {
+            type: `shadow`,
             shadowStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 1,
-                color: '#5d83ff'
-              },{
-                offset: 0,
-                color: 'rgba(255, 255, 255, 0)'
-              }])
-            }
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: `#5d83ff`,
+                },
+                {
+                  offset: 0,
+                  color: `rgba(255, 255, 255, 0)`,
+                },
+              ]),
+            },
           },
         },
-        color: ['#5d83ff'],
+        color: [`#5d83ff`],
         grid: {
           top: 30,
           left: 20,
           right: 20,
           bottom: 20,
-          containLabel: true //轴上的数值
+          containLabel: true, // 轴上的数值
         },
         xAxis: {
-          type: 'category',
+          type: `category`,
           data: this.xData,
           boundaryGap: false,
           axisTick: {
-            show: false
-          }, 
+            show: false,
+          },
           axisLabel: {
-            formatter: '{value} 月'
+            formatter: `{value} 月`,
           },
           axisLine: {
             lineStyle: {
-              color: '#999',
-            }
+              color: `#999`,
+            },
           },
         },
         yAxis: {
-          type: 'value',
+          type: `value`,
           axisLine: {
             show: false,
             lineStyle: {
-              color: '#999'
-            }
+              color: `#999`,
+            },
           },
         },
-        series: [{
-          name: '人数',
-          type: 'line',
-          data: this.data,
-          symbolSize: 10,
-          itemStyle: {
-            opacity: 0,
-          },
-          emphasis: {
-            label: {
-              show: true,
-              color: '#fff',
-              fontSize: 20
-            },
+        series: [
+          {
+            name: `人数`,
+            type: `line`,
+            data: this.data,
+            symbolSize: 10,
             itemStyle: {
-              color: '#5d83ff',
-              borderColor: '#fff',
-              borderWidth: 2,
-              opacity: 1
+              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, [
+                  {
+                    offset: 0,
+                    color: `#5d83ff`,
+                  },
+                  {
+                    offset: 1,
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                ]),
+              },
+            },
+            smooth: true,
           },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: '#5d83ff'
-              },{
-                offset: 1,
-                color: 'rgba(0, 0, 0, 0)'
-              }]),
-            }
-          },
-          smooth: true,
-        }]
-      };
-      myChart.setOption(this.option, true);
+        ],
+      }
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
 
       this.timer = setInterval(() => {
         myChart.dispatchAction({
-          type: 'showTip',
+          type: `showTip`,
           seriesIndex: 0,
-          dataIndex: this.number
-        });
+          dataIndex: this.number,
+        })
+
+        this.number++
 
-        this.number++;
-        
         if (this.number > this.data.length) {
-          this.number = 0;
+          this.number = 0
         }
-      }, 1000);
-    }
+      }, 1000)
+    },
   },
   beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
+    clearInterval(this.timer)
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/components/seamless/index.vue

@@ -5,14 +5,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 sn-container">
+    <div class="sn-content">
+      <div class="sn-title">新闻无缝滚动</div>
+      <div class="sn-body">
         <div class="wrap-container">
-
           <div class="table">
-            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
+            <table
+              border="0"
+              cellpadding="0"
+              cellspacing="0"
+              class="table-header"
+            >
               <tbody>
                 <tr>
                   <td width="60%">
@@ -28,7 +32,11 @@
               </tbody>
             </table>
 
-            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
+            <vue-seamless-scroll
+              :data="listData"
+              class="seamless-warp"
+              :class-option="optionSetting"
+            >
               <table border="0" cellpadding="0" cellspacing="0" class="item">
                 <tbody>
                   <tr v-for="(item, index) in listData" :key="index">
@@ -39,17 +47,22 @@
                       <span>{{ item.date }}</span>
                     </td>
                     <td width="20%">
-                      <span :class="{colorRed: item.hot > 4999, colorOrange: item.hot < 10}">{{ item.hot }}</span>
+                      <span
+                        :class="{
+                          colorRed: item.hot > 4999,
+                          colorOrange: item.hot < 10,
+                        }"
+                        >{{ item.hot }}</span
+                      >
                     </td>
                   </tr>
                 </tbody>
-            </table>
+              </table>
             </vue-seamless-scroll>
           </div>
-
-        </div> 
-      </div> 
-    </div>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -57,73 +70,88 @@
 import vueSeamlessScroll from 'vue-seamless-scroll'
 
 export default {
-  name: "seamless",
+  name: `seamless`,
   components: {
-    vueSeamlessScroll
+    vueSeamlessScroll,
   },
   data() {
     return {
-     listData: [{
-        title: '钱花哪了?一图带你读懂年轻人的消费观',
-        date: '2020-05-05',
-        hot: 2306
-     }, {
-        title: '“五一”假期前三天国内旅游收入超350亿元',
-        date: '2020-05-02',
-        hot: 5689
-     }, {
-        title: '滴滴、美团、哈啰交战，本地生活会是终局？',
-        date: '2020-05-02',
-        hot: 9
-     }, {
-        title: '“互联网+文化”逆势上行文娱消费云端真精彩',
-        date: '2020-04-25',
-        hot: 288
-     }, {
-        title: '乐观还是悲观？巴菲特是个现实主义者！',
-        date: '2020-04-21',
-        hot: 158
-     }, {
-        title: 'B站的后浪，会把爱优腾拍在沙滩上吗?',
-        date: '2020-04-20',
-        hot: 889
-     }, {
-        title: '华为如何做投资的：先给两亿订单一年上市',
-        date: '2020-04-01',
-        hot: 5800
-     }, {
-        title: '马斯克：特斯拉股价太高了，我要卖豪宅',
-        date: '2020-03-25',
-        hot: 6
-     }, {
-        title: '人民日报海外版：云模式巧解“就业难”',
-        date: '2020-03-16',
-        hot: 88
-     }, {
-        title: '刚刚港股"崩了"：狂跌近1000点！',
-        date: '2020-03-12',
-        hot: 88
-     }, {
-        title: '个人健康信息码国家标准发布',
-        date: '2020-02-28',
-        hot: 5
-     }, {
-        title: '传软银国际裁员约10%两名管理合伙人离职',
-        date: '2020-02-15',
-        hot: 258
-     }, {
-        title: '27万个岗位：区块链、人工智能等专场招聘',
-        date: '2020-02-10',
-        hot: 198
-     }, {
-        title: '一季度电商发展势头迅猛农村电商破1300万家',
-        date: '2020-02-08',
-        hot: 19
-     }]
+      listData: [
+        {
+          title: `钱花哪了?一图带你读懂年轻人的消费观`,
+          date: `2020-05-05`,
+          hot: 2306,
+        },
+        {
+          title: `“五一”假期前三天国内旅游收入超350亿元`,
+          date: `2020-05-02`,
+          hot: 5689,
+        },
+        {
+          title: `滴滴、美团、哈啰交战，本地生活会是终局？`,
+          date: `2020-05-02`,
+          hot: 9,
+        },
+        {
+          title: `“互联网+文化”逆势上行文娱消费云端真精彩`,
+          date: `2020-04-25`,
+          hot: 288,
+        },
+        {
+          title: `乐观还是悲观？巴菲特是个现实主义者！`,
+          date: `2020-04-21`,
+          hot: 158,
+        },
+        {
+          title: `B站的后浪，会把爱优腾拍在沙滩上吗?`,
+          date: `2020-04-20`,
+          hot: 889,
+        },
+        {
+          title: `华为如何做投资的：先给两亿订单一年上市`,
+          date: `2020-04-01`,
+          hot: 5800,
+        },
+        {
+          title: `马斯克：特斯拉股价太高了，我要卖豪宅`,
+          date: `2020-03-25`,
+          hot: 6,
+        },
+        {
+          title: `人民日报海外版：云模式巧解“就业难”`,
+          date: `2020-03-16`,
+          hot: 88,
+        },
+        {
+          title: `刚刚港股"崩了"：狂跌近1000点！`,
+          date: `2020-03-12`,
+          hot: 88,
+        },
+        {
+          title: `个人健康信息码国家标准发布`,
+          date: `2020-02-28`,
+          hot: 5,
+        },
+        {
+          title: `传软银国际裁员约10%两名管理合伙人离职`,
+          date: `2020-02-15`,
+          hot: 258,
+        },
+        {
+          title: `27万个岗位：区块链、人工智能等专场招聘`,
+          date: `2020-02-10`,
+          hot: 198,
+        },
+        {
+          title: `一季度电商发展势头迅猛农村电商破1300万家`,
+          date: `2020-02-08`,
+          hot: 19,
+        },
+      ],
     }
   },
   computed: {
-　　optionSetting () {
+    optionSetting() {
       return {
         step: 0.5, // 数值越大速度滚动越快
         limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
@@ -133,20 +161,14 @@ export default {
         openWatch: true, // 开启数据实时监控刷新dom
         singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
       }
-    }
-  },  
-  mounted() {
-    
+    },
   },
-  methods: {
-    
-  },
-  beforeDestroy() {
-    
-  }
-};
+  mounted() {},
+  methods: {},
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -164,7 +186,7 @@ export default {
         background-color: transparent;
         white-space: nowrap;
         overflow: hidden;
-        color: #E2E5FF;
+        color: #e2e5ff;
         font-size: 14px;
       }
     }
@@ -178,10 +200,10 @@ export default {
       overflow: hidden;
       visibility: visible;
       .colorRed {
-        color: #FF4669;
+        color: #ff4669;
       }
       .colorOrange {
-        color: #FFC956;
+        color: #ffc956;
       }
       .item {
         height: auto;

src/components/sinan/index.vue

@@ -5,128 +5,147 @@
 -->
 
 <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="pd-main"> 
-            <div id="chart1" class="chart-1"> 
-              <div class="compass"> 
-                <div class="compass-bg-1"></div> 
-                <div class="compass-bg-2"></div> 
-                <div class="compass-bg-3"></div> 
-                <div class="compass-bg-4"></div> 
-                <div class="compass-bg-5"></div> 
-                <div class="compass-bg-6"></div> 
+  <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="pd-main">
+            <div id="chart1" class="chart-1">
+              <div class="compass">
+                <div class="compass-bg-1"></div>
+                <div class="compass-bg-2"></div>
+                <div class="compass-bg-3"></div>
+                <div class="compass-bg-4"></div>
+                <div class="compass-bg-5"></div>
+                <div class="compass-bg-6"></div>
                 <div class="compass-bg-7"></div>
 
-                <div class="compass-bg-c-1"></div> 
-                <div class="compass-bg-c-2"></div> 
-                <div class="compass-bg-c-3"></div> 
+                <div class="compass-bg-c-1"></div>
+                <div class="compass-bg-c-2"></div>
+                <div class="compass-bg-c-3"></div>
                 <div class="compass-bg-c-4"></div>
 
-                <div class="compass-text" :class="[`compass-text-${index + 1}`, {show: number == index}]" v-for="(item, index) in arr" :key="index">
+                <div
+                  class="compass-text"
+                  :class="[
+                    `compass-text-${index + 1}`,
+                    { show: number == index },
+                  ]"
+                  v-for="(item, index) in arr"
+                  :key="index"
+                >
                   <span>事项数：{{ item.itemNum }}</span>
                   <span>数据项：{{ item.dataItem }}</span>
                   <span>数据量：{{ item.dataSize }}</span>
                 </div>
-                <div class="compass-number"> 
-                  <div :title="`${index + 1}`" :class="[`rank-${index + 1}`, {szscale: number == index}]" v-for="(item, index) in arr" :key="index">
-                   <span>{{ item.workUnit }}</span>
+                <div class="compass-number">
+                  <div
+                    :title="`${index + 1}`"
+                    :class="[`rank-${index + 1}`, { szscale: number == index }]"
+                    v-for="(item, index) in arr"
+                    :key="index"
+                  >
+                    <span>{{ item.workUnit }}</span>
                   </div>
-                </div> 
+                </div>
 
-                <div class="line-sx"> 
-                  <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 class="line-sx">
+                  <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>
             </div>
-          </div>  
-        </div> 
-      </div> 
-    </div>   
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "sinan",
+  name: `sinan`,
   data() {
     return {
       timer: null,
       number: null,
-      arr: [{
-        id: 1,
-        itemNum: 258,
-        dataItem: 1288,
-        dataSize: 12306,
-        workUnit: 'JS'
-      },{
-        id: 2,
-        itemNum: 568,
-        dataItem: 5623,
-        dataSize: 12306,
-        workUnit: 'Nodejs'
-      },{
-        id: 3,
-        itemNum: 208,
-        dataItem: 1755,
-        dataSize: 12043,
-        workUnit: 'Vuejs'
-      },{
-        id: 4,
-        itemNum: 358,
-        dataItem: 1812,
-        dataSize: 12306,
-        workUnit: 'CSS3'
-      },{
-        id: 5,
-        itemNum: 128,
-        dataItem: 4718,
-        dataSize: 12580,
-        workUnit: 'jQuery'
-      }]
+      arr: [
+        {
+          id: 1,
+          itemNum: 258,
+          dataItem: 1288,
+          dataSize: 12306,
+          workUnit: `JS`,
+        },
+        {
+          id: 2,
+          itemNum: 568,
+          dataItem: 5623,
+          dataSize: 12306,
+          workUnit: `Nodejs`,
+        },
+        {
+          id: 3,
+          itemNum: 208,
+          dataItem: 1755,
+          dataSize: 12043,
+          workUnit: `Vuejs`,
+        },
+        {
+          id: 4,
+          itemNum: 358,
+          dataItem: 1812,
+          dataSize: 12306,
+          workUnit: `CSS3`,
+        },
+        {
+          id: 5,
+          itemNum: 128,
+          dataItem: 4718,
+          dataSize: 12580,
+          workUnit: `jQuery`,
+        },
+      ],
     }
   },
   mounted() {
     setTimeout(() => {
-      this.number = 0;
-      this.initData();
+      this.number = 0
+      this.initData()
     }, 4000)
   },
   methods: {
     initData() {
-      this.number = this.number == this.arr.length ? 0 : this.number;
+      this.number = this.number == this.arr.length ? 0 : this.number
       this.timer = setTimeout(() => {
-        this.number++;
-        this.initData();
+        this.number++
+        this.initData()
       }, 5000)
-    }
+    },
   },
   beforeDestroy() {
-    clearTimeout(this.timer);
-  }
-};
+    clearTimeout(this.timer)
+  },
+}
 </script>
 
 <style lang="scss" scoped>
 .sn-container {
-  left: 50px; 
-  top: 110px; 
+  left: 50px;
+  top: 110px;
   .pd-main {
     position: absolute;
     height: 100%;
     width: 100%;
-    [class^=chart] {
+    [class^='chart'] {
       position: absolute;
       -webkit-transform-origin: left top;
       -moz-transform-origin: left top;
@@ -137,13 +156,13 @@ export default {
     .chart-1 {
       width: 500px;
       height: 410px;
-      top:55%;
-      left:50%;
-      -webkit-transform:translate(-50%,-50%);
-      -moz-transform:translate(-50%,-50%);
-      -ms-transform:translate(-50%,-50%);
-      -o-transform:translate(-50%,-50%);
-      transform:translate(-50%,-50%);
+      top: 55%;
+      left: 50%;
+      -webkit-transform: translate(-50%, -50%);
+      -moz-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+      -o-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
     }
 
     .compass {
@@ -154,7 +173,7 @@ export default {
       -ms-transform: scale(0.9);
       -o-transform: scale(0.9);
       transform: scale(0.9);
-      [class^=compass-bg-] {
+      [class^='compass-bg-'] {
         position: absolute;
         bottom: 0;
       }
@@ -173,10 +192,22 @@ export default {
         bottom: -200px;
         width: 500px;
         height: 500px;
-        background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-        background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-        background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-        background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
+        background: -webkit-repeating-radial-gradient(
+          transparent,
+          rgba(0, 138, 174, 0.2)
+        );
+        background: -moz-repeating-radial-gradient(
+          transparent,
+          rgba(0, 138, 174, 0.2)
+        );
+        background: -o-repeating-radial-gradient(
+          transparent,
+          rgba(0, 138, 174, 0.2)
+        );
+        background: repeating-radial-gradient(
+          transparent,
+          rgba(0, 138, 174, 0.2)
+        );
         display: none;
       }
       .compass-bg-2 {
@@ -185,10 +216,22 @@ export default {
         bottom: -170px;
         width: 440px;
         height: 440px;
-        background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-        background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-        background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-        background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
+        background: -webkit-repeating-radial-gradient(
+          transparent,
+          rgba(250, 118, 159, 0.2)
+        );
+        background: -moz-repeating-radial-gradient(
+          transparent,
+          rgba(250, 118, 159, 0.2)
+        );
+        background: -o-repeating-radial-gradient(
+          transparent,
+          rgba(250, 118, 159, 0.2)
+        );
+        background: repeating-radial-gradient(
+          transparent,
+          rgba(250, 118, 159, 0.2)
+        );
         display: none;
       }
       .compass-bg-3 {
@@ -197,10 +240,22 @@ export default {
         bottom: -140px;
         width: 380px;
         height: 380px;
-        background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-        background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-        background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-        background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
+        background: -webkit-repeating-radial-gradient(
+          transparent,
+          rgba(10, 58, 103, 0.2)
+        );
+        background: -moz-repeating-radial-gradient(
+          transparent,
+          rgba(10, 58, 103, 0.2)
+        );
+        background: -o-repeating-radial-gradient(
+          transparent,
+          rgba(10, 58, 103, 0.2)
+        );
+        background: repeating-radial-gradient(
+          transparent,
+          rgba(10, 58, 103, 0.2)
+        );
       }
       .compass-bg-4 {
         @extend %compass-bg;
@@ -208,10 +263,22 @@ export default {
         bottom: -110px;
         width: 320px;
         height: 320px;
-        background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-        background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-        background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-        background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
+        background: -webkit-repeating-radial-gradient(
+          transparent,
+          rgba(112, 67, 103, 0.2)
+        );
+        background: -moz-repeating-radial-gradient(
+          transparent,
+          rgba(112, 67, 103, 0.2)
+        );
+        background: -o-repeating-radial-gradient(
+          transparent,
+          rgba(112, 67, 103, 0.2)
+        );
+        background: repeating-radial-gradient(
+          transparent,
+          rgba(112, 67, 103, 0.2)
+        );
       }
       .compass-bg-5 {
         @extend %compass-bg;
@@ -229,10 +296,22 @@ export default {
         bottom: -50px;
         width: 200px;
         height: 200px;
-        background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-        background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-        background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-        background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
+        background: -webkit-repeating-radial-gradient(
+          transparent,
+          rgba(246, 116, 160, 0.2)
+        );
+        background: -moz-repeating-radial-gradient(
+          transparent,
+          rgba(246, 116, 160, 0.2)
+        );
+        background: -o-repeating-radial-gradient(
+          transparent,
+          rgba(246, 116, 160, 0.2)
+        );
+        background: repeating-radial-gradient(
+          transparent,
+          rgba(246, 116, 160, 0.2)
+        );
         display: none;
       }
       .compass-bg-7 {
@@ -241,11 +320,23 @@ export default {
         bottom: -20px;
         width: 140px;
         height: 140px;
-        background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-        background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-        background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-        background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-        -webkit-animation: bgshadow 3s linear infinite;     
+        background: -webkit-repeating-radial-gradient(
+          transparent,
+          rgba(102, 97, 70, 0.2)
+        );
+        background: -moz-repeating-radial-gradient(
+          transparent,
+          rgba(102, 97, 70, 0.2)
+        );
+        background: -o-repeating-radial-gradient(
+          transparent,
+          rgba(102, 97, 70, 0.2)
+        );
+        background: repeating-radial-gradient(
+          transparent,
+          rgba(102, 97, 70, 0.2)
+        );
+        -webkit-animation: bgshadow 3s linear infinite;
         -moz-animation: bgshadow 3s linear infinite;
         -o-animation: bgshadow 3s linear infinite;
         animation: bgshadow 3s linear infinite;
@@ -254,12 +345,14 @@ export default {
       .compass-bg-c-1 {
         width: 100%;
         height: 100%;
-        background: url(../../assets/img/chart1/compass-bg-1.png) no-repeat 50% 345px;
+        background: url(../../assets/img/chart1/compass-bg-1.png) no-repeat 50%
+          345px;
       }
       .compass-bg-c-2 {
         width: 100%;
         height: 100%;
-        background: url(../../assets/img/chart1/compass-bg-2.png) no-repeat 65% 146px;
+        background: url(../../assets/img/chart1/compass-bg-2.png) no-repeat 65%
+          146px;
         opacity: 0.8;
         -webkit-animation: fadebg 3s linear infinite;
         -moz-animation: fadebg 3s linear infinite;
@@ -269,12 +362,14 @@ export default {
       .compass-bg-c-3 {
         width: 100%;
         height: 100%;
-        background: url(../../assets/img/chart1/compass-bg-3.png) no-repeat 50% 227px;
+        background: url(../../assets/img/chart1/compass-bg-3.png) no-repeat 50%
+          227px;
       }
       .compass-bg-c-4 {
         width: 100%;
         height: 100%;
-        background: url(../../assets/img/chart1/compass-bg-4.png) no-repeat 50% 63px;
+        background: url(../../assets/img/chart1/compass-bg-4.png) no-repeat 50%
+          63px;
         -webkit-animation: numberfade 5s linear infinite;
         -moz-animation: numberfade 5s linear infinite;
         -o-animation: numberfade 5s linear infinite;
@@ -511,7 +606,7 @@ export default {
             border-radius: 100%;
           }
           &:before {
-            content: "";
+            content: '';
             position: absolute;
             height: 100%;
             border-left: 1px dashed currentColor;
@@ -521,12 +616,12 @@ export default {
             margin-left: -1px;
           }
           &:after {
-            content: "NO." attr(title);
+            content: 'NO.' attr(title);
             position: absolute;
             display: inline-block;
             top: -20px;
             width: 100%;
-            font-family: "DIGITALDREAMFAT";
+            font-family: 'DIGITALDREAMFAT';
             text-align: center;
           }
         }
@@ -669,13 +764,10 @@ export default {
           animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
         }
       }
-
     }
-
   }
 }
 
-
 @-webkit-keyframes fs {
   0% {
     background-position: 50% 150%;
@@ -726,7 +818,8 @@ export default {
 }
 
 @-webkit-keyframes bgshadow {
-  0%,100% {
+  0%,
+  100% {
     -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
     box-shadow: 0 0 0 rgba(255, 255, 255, 0);
   }
@@ -736,7 +829,8 @@ export default {
   }
 }
 @-moz-keyframes bgshadow {
-  0%,100% {
+  0%,
+  100% {
     -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
     box-shadow: 0 0 0 rgba(255, 255, 255, 0);
   }
@@ -746,7 +840,8 @@ export default {
   }
 }
 @-o-keyframes bgshadow {
-  0%,100% {
+  0%,
+  100% {
     box-shadow: 0 0 0 rgba(255, 255, 255, 0);
   }
   50% {
@@ -754,7 +849,8 @@ export default {
   }
 }
 @keyframes bgshadow {
-  0%,100% {
+  0%,
+  100% {
     -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
     -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
     box-shadow: 0 0 0 rgba(255, 255, 255, 0);
@@ -766,7 +862,6 @@ export default {
   }
 }
 
-
 @-webkit-keyframes sz {
   0% {
     height: 0;

src/components/staffMix/index.vue

@@ -5,91 +5,163 @@
 -->
 
 <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 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 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 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>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "staffMix",
+  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
-      }]
-      
+      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() {
-    
-  }
-};
+  mounted() {},
+  methods: {},
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>
@@ -98,12 +170,12 @@ export default {
   top: 1978px;
   width: 432px;
   height: 400px;
-  .person{
+  .person {
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
-    .pers{
+    .pers {
       width: 100%;
       height: 100%;
       position: absolute;
@@ -111,26 +183,26 @@ export default {
       left: 0;
       background-repeat: no-repeat;
       background-position: center center;
-      &.person1{
+      &.person1 {
         background-image: url(../../assets/img/online.png);
         transform: rotateX(64deg) rotateZ(0deg);
         top: 16%;
       }
-      &.person2{
+      &.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{
+      &.person3 {
         background-image: url(../../assets/img/person-1.png);
         top: 5%;
       }
     }
   }
 
-  .svgs{
+  .svgs {
     width: 270px;
     height: 260px;
     margin: auto;
@@ -140,14 +212,14 @@ export default {
     left: 0;
     bottom: 0;
   }
-  .text{
+  .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);
+    color: rgb(114, 198, 230);
     text-align: center;
     span {
       &:nth-child(1) {
@@ -163,42 +235,41 @@ export default {
         font-weight: bold;
       }
     }
-    &.per1{
+    &.per1 {
       top: 215px;
       left: 50px;
     }
-    &.per2{
+    &.per2 {
       top: 113px;
       left: 3px;
     }
-    &.per3{
+    &.per3 {
       top: 45px;
       left: 35px;
     }
-    &.per4{
+    &.per4 {
       left: 120px;
     }
-    &.per5{
+    &.per5 {
       top: 45px;
       left: 190px;
     }
-    &.per6{
+    &.per6 {
       top: 105px;
       left: 210px;
     }
-    &.per7{
+    &.per7 {
       top: 215px;
       left: 180px;
     }
   }
-
 }
 
 @-webkit-keyframes move {
-  0%  {
+  0% {
     transform: rotateX(-64deg) rotateZ(360deg);
   }
-  100%  {
+  100% {
     transform: rotateX(-64deg) rotateZ(0deg);
   }
 }

src/components/szBar/index.vue

@@ -5,21 +5,21 @@
 -->
 
 <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="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_bar"></div>
-        </div> 
-      </div> 
-    </div>   
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "szBar",
+  name: `szBar`,
   data() {
     return {
       option: null,
@@ -29,73 +29,73 @@ export default {
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_bar'));
-      let barWidth = '10%';
+      let myChart = echarts.init(document.getElementById(`chart_bar`))
+      let barWidth = `10%`
       let dataCoord = [
-        {coord: [0, 9]},
-        {coord: [1, 12]},
-        {coord: [2, 15]},
-        {coord: [3, 18]},
-        {coord: [4, 15]},
-        {coord: [5, 12]},
-        {coord: [6, 9]},
-        {coord: [7, 12]},
-        {coord: [8, 15]},
-        {coord: [9, 18]},
-        {coord: [10, 15]},
-        {coord: [11, 12]},
-      ];
+        { coord: [0, 9] },
+        { coord: [1, 12] },
+        { coord: [2, 15] },
+        { coord: [3, 18] },
+        { coord: [4, 15] },
+        { coord: [5, 12] },
+        { coord: [6, 9] },
+        { coord: [7, 12] },
+        { coord: [8, 15] },
+        { coord: [9, 18] },
+        { coord: [10, 15] },
+        { coord: [11, 12] },
+      ]
       let dataCoord2 = [
-        {coord: [0, -9]},
-        {coord: [1, -12]},
-        {coord: [2, -15]},
-        {coord: [3, -18]},
-        {coord: [4, -15]},
-        {coord: [5, -12]},
-        {coord: [6, -9]},
-        {coord: [7, -12]},
-        {coord: [8, -15]},
-        {coord: [9, -18]},
-        {coord: [10, -15]},
-        {coord: [11, -12]},
-      ];
+        { coord: [0, -9] },
+        { coord: [1, -12] },
+        { coord: [2, -15] },
+        { coord: [3, -18] },
+        { coord: [4, -15] },
+        { coord: [5, -12] },
+        { coord: [6, -9] },
+        { coord: [7, -12] },
+        { coord: [8, -15] },
+        { coord: [9, -18] },
+        { coord: [10, -15] },
+        { coord: [11, -12] },
+      ]
 
       this.option = {
         xAxis: {
           data: this.xAxisData,
           axisLabel: {
-            color: '#999',
-            formatter: '{value} 月'
+            color: `#999`,
+            formatter: `{value} 月`,
           },
           axisTick: {
-            show: false
-          }, 
+            show: false,
+          },
           axisLine: {
             show: true,
             lineStyle: {
-              color: 'rgba(40, 103, 168, 0.3)',
-            }
+              color: `rgba(40, 103, 168, 0.3)`,
+            },
           },
         },
         yAxis: {
           axisLabel: {
-            color: '#999'
+            color: `#999`,
           },
           axisTick: {
-            show: false
-          }, 
+            show: false,
+          },
           splitLine: {
-            show: false
+            show: false,
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: 'rgba(40, 103, 168, 0.3)'
-            }
+              color: `rgba(40, 103, 168, 0.3)`,
+            },
           },
         },
         grid: {
@@ -103,90 +103,96 @@ export default {
           left: 20,
           right: 20,
           bottom: 20,
-          containLabel: true
+          containLabel: true,
         },
         series: [
           {
-            name: '正值柱状图',
-            type: 'bar',
-            stack: 'one',
+            name: `正值柱状图`,
+            type: `bar`,
+            stack: `one`,
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 1, 
-                  color: 'rgba(0, 0, 0, 0)'
-                },{
-                  offset: 0.5, 
-                  color: '#466e71'
-                },{
-                  offset: 0, 
-                  color: '#eb9b44'
-                }])
-              }
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                  {
+                    offset: 0.5,
+                    color: `#466e71`,
+                  },
+                  {
+                    offset: 0,
+                    color: `#eb9b44`,
+                  },
+                ]),
+              },
             },
             barWidth: barWidth,
             markPoint: {
-              symbol: 'circle',
+              symbol: `circle`,
               itemStyle: {
                 normal: {
-                  color: '#eb9b44',
-                  shadowColor: '#eb9b44',
-                  shadowBlur: 20
-                }
+                  color: `#eb9b44`,
+                  shadowColor: `#eb9b44`,
+                  shadowBlur: 20,
+                },
               },
               symbolSize: [10, 10], // 容器大小
               symbolOffset: [0, 0], // 位置偏移
               data: dataCoord,
             },
-            data: this.yData1
+            data: this.yData1,
           },
           {
-            name: '负值柱状图',
-            type: 'bar',
-            stack: 'one',
+            name: `负值柱状图`,
+            type: `bar`,
+            stack: `one`,
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0, 
-                  color: 'rgba(0, 0, 0, 0)'
-                },{
-                  offset: 0.5, 
-                  color: '#774a75'
-                },{
-                  offset: 1, 
-                  color: '#b34d69'
-                }])
-              }
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: `rgba(0, 0, 0, 0)`,
+                  },
+                  {
+                    offset: 0.5,
+                    color: `#774a75`,
+                  },
+                  {
+                    offset: 1,
+                    color: `#b34d69`,
+                  },
+                ]),
+              },
             },
             barWidth: barWidth,
             markPoint: {
-              symbol: 'circle',
+              symbol: `circle`,
               itemStyle: {
                 normal: {
-                  color: '#b34d69',
-                  shadowColor: '#b34d69',
-                  shadowBlur: 20
-                }
+                  color: `#b34d69`,
+                  shadowColor: `#b34d69`,
+                  shadowBlur: 20,
+                },
               },
-              symbolSize: [10, 10], 
+              symbolSize: [10, 10],
               symbolOffset: [0, 0],
               data: dataCoord2,
             },
-            data: this.yData2
-          }
-        ]
-      };
-      myChart.setOption(this.option, true);
+            data: this.yData2,
+          },
+        ],
+      }
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>

src/components/toast/index.js

@@ -6,32 +6,32 @@
 
 import Vue from 'vue'
 import Toast from './index.vue'
-  
+
 const ToastMsg = Vue.extend(Toast)
-  
+
 Toast.install = (options, type) => {
-	if (options === undefined || options === null) {
-		options = {
-		  content: ''
-		}
-	} else if (typeof options === 'string' || typeof options === 'number') {
-		options = {
-			content: options
-		}
-		if (type !== undefined && options !== null) {
-			options.type = type
-		}
-	}
-	  
-	let instance = new ToastMsg({
-		data: options
-	}).$mount()
-	  
-	document.body.appendChild(instance.$el)
-	  
-	Vue.nextTick(() => {
-		instance.visible = true
-	})
+  if (options === undefined || options === null) {
+    options = {
+      content: ``,
+    }
+  } else if (typeof options === `string` || typeof options === `number`) {
+    options = {
+      content: options,
+    }
+    if (type !== undefined && options !== null) {
+      options.type = type
+    }
+  }
+
+  let instance = new ToastMsg({
+    data: options,
+  }).$mount()
+
+  document.body.appendChild(instance.$el)
+
+  Vue.nextTick(() => {
+    instance.visible = true
+  })
 }
-  
-export default Toast.install
+
+export default Toast.install

src/components/toast/index.vue

@@ -6,61 +6,66 @@
 
 <template>
   <transition name="fade">
-    <div class="toast-container" v-if="visible">  
+    <div class="toast-container" v-if="visible">
       <div class="toast" :class="type">
         <div class="content">
           <i class="iconfont" :class="'icon-' + type"></i>
           <span>{{ content }}</span>
         </div>
-        <i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i>
+        <i
+          v-if="hasClose"
+          class="iconfont icon-close close"
+          @click="visible = false"
+        ></i>
       </div>
     </div>
   </transition>
 </template>
- 
-<script>
 
+<script>
 export default {
-  name: 'Toast',
+  name: `Toast`,
   data() {
-    return {  
-      content: '',
+    return {
+      content: ``,
       time: 3000,
       visible: false,
-      type: 'error',  //四种类型：info, success, warning, error
-      hasClose: false,     
+      type: `error`, // 四种类型：info, success, warning, error
+      hasClose: false,
     }
   },
   mounted() {
-    this.close();
+    this.close()
+  },
+  methods: {
+    close() {
+      setTimeout(() => {
+        this.visible = false
+      }, this.time)
+    },
   },
-  methods: {    
-    close () {
-      setTimeout(() =>{
-        this.visible = false;
-      }, this.time);
-    }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 /* 动画效果 淡入淡出 */
-.fade-enter-active, .fade-leave-active{
-   transition: all 0.5s ease;
- }
- .fade-enter, .fade-leave-active{
-   opacity: 0;
- }
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s ease;
+}
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
 
 .toast-container {
-  position: fixed; 
-  top: 0; 
-  right: 0; 
-  bottom: 0; 
-  left: 0;  
-  display: flex; 
-  justify-content: center; 
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
   align-items: center;
   z-index: 99999;
   .toast {
@@ -70,7 +75,7 @@ export default {
     font-size: 16px;
     display: flex;
     justify-content: space-between;
-    align-items: center; 
+    align-items: center;
     .content {
       span {
         padding-left: 10px;
@@ -98,7 +103,7 @@ export default {
     }
     .close {
       cursor: pointer;
-      color: #909399
+      color: #909399;
     }
   }
 }

src/components/waterPolo/index.vue

@@ -5,65 +5,62 @@
 -->
 
 <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 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",
+  name: `waterPolo`,
   data() {
     return {
-      option: null
-      
+      option: null,
     }
   },
   mounted() {
-    this.getEchart();
+    this.getEchart()
   },
   methods: {
     getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_polo'));
+      let myChart = echarts.init(document.getElementById(`chart_polo`))
       this.option = {
-        series: [{
-          type: 'liquidFill',
-          data: [0.45],
-          radius: '70%', 
-          color: ['#00b9f5'],
-          backgroundStyle: {
-            color: 'rgba(0, 0, 0, 0.5)',
-            borderColor: '#007bff',
-            borderWidth: 3,
-            shadowColor: 'rgba(0, 123, 225, 0.4)',
-            shadowBlur: 20
+        series: [
+          {
+            type: `liquidFill`,
+            data: [0.45],
+            radius: `70%`,
+            color: [`#00b9f5`],
+            backgroundStyle: {
+              color: `rgba(0, 0, 0, 0.5)`,
+              borderColor: `#007bff`,
+              borderWidth: 3,
+              shadowColor: `rgba(0, 123, 225, 0.4)`,
+              shadowBlur: 20,
+            },
+            outline: {
+              show: false,
+            },
           },
-          outline: {
-            show: false,
-          }, 
-        }]
+        ],
       }
 
-      myChart.setOption(this.option, true);
+      myChart.setOption(this.option, true)
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
-  beforeDestroy() {
-    
-  }
-};
+  beforeDestroy() {},
+}
 </script>
 
 <style lang="scss" scoped>

src/http/index.js

@@ -1,7 +1,7 @@
 import config from '@/config.js'
 import util from '@/util/index.js'
 
-const api =  window.axios.create({
+const api = window.axios.create({
   timeout: 10000, // 请求超时
   baseURL: config.baseApi,
 })

src/main.js

@@ -19,16 +19,15 @@ Vue.config.productionTip = false
 
 Vue.prototype.$Toast = Toast
 
-
 router.beforeEach((to, from, next) => {
-	if (to.meta.title) {
-		document.title = to.meta.title;
-	}
-	next();
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
 })
 
 window.$this = new Vue({
-	router,
-	store,
-	render: h => h(App),
-}).$mount('#app')
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount(`#app`)

src/router/index.js

@@ -5,63 +5,63 @@ Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
-    name: 'Login',
-    component: () => import('@/views/Login.vue'),
+    path: `/`,
+    name: `Login`,
+    component: () => import(`@/views/Login.vue`),
     meta: {
-      title: '登录界面'
-    }
+      title: `登录界面`,
+    },
   },
   {
-    path: '/login',
-    redirect: '/'
+    path: `/login`,
+    redirect: `/`,
   },
   {
-    path: '/home',
-    name: 'Home',
-    component: () => import('@/views/Home.vue'),
+    path: `/home`,
+    name: `Home`,
+    component: () => import(`@/views/Home.vue`),
     meta: {
-      title: '酷屏首页统计图'
-    }
+      title: `酷屏首页统计图`,
+    },
   },
   {
-    path: '/brand',
-    name: 'Brand',
-    component: () => import('@/views/Brand.vue'),
+    path: `/brand`,
+    name: `Brand`,
+    component: () => import(`@/views/Brand.vue`),
     meta: {
-      title: '公司品牌介绍'
-    }
+      title: `公司品牌介绍`,
+    },
   },
   {
-    path: '/page1',
-    name: 'page1',
-    component: () => import('@/views/page1/index.vue'),
+    path: `/page1`,
+    name: `page1`,
+    component: () => import(`@/views/page1/index.vue`),
     meta: {
-      title: '综合问览'
-    }
+      title: `综合问览`,
+    },
   },
   {
-    path: '/page2',
-    name: 'page2',
-    component: () => import('@/views/page2/index.vue'),
+    path: `/page2`,
+    name: `page2`,
+    component: () => import(`@/views/page2/index.vue`),
     meta: {
-      title: '种植分析'
-    }
+      title: `种植分析`,
+    },
   },
   {
-    path: '/page3',
-    name: 'page3',
-    component: () => import('@/views/page3/index.vue'),
+    path: `/page3`,
+    name: `page3`,
+    component: () => import(`@/views/page3/index.vue`),
     meta: {
-      title: '种植分析详情'
-    }
+      title: `种植分析详情`,
+    },
   },
 ]
 
 const router = new VueRouter({
-  mode: 'hash',
+  mode: `hash`,
   base: process.env.BASE_URL,
-  routes
+  routes,
 })
 
 export default router

src/store/index.js

@@ -4,12 +4,8 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {},
 })

src/views/Brand.vue

@@ -6,11 +6,11 @@
 
 <template>
   <div class="brand-container">
-  	<div class="wrap">
+    <div class="wrap">
       <header>
         <div class="weather">
-          <img :src="imgSrc">
-          <span class="tem">{{ weatcherData.tem }}°C</span> 
+          <img :src="imgSrc" />
+          <span class="tem">{{ weatcherData.tem }}°C</span>
           <span class="wea">{{ weatcherData.wea }}</span>
         </div>
         <h2>区块链科技公司品牌概览</h2>
@@ -47,13 +47,28 @@
             <div class="resume-hd">
               <ul>
                 <li>
-                  <countTo :startVal='startVal' :endVal='490' :duration='6000' separator=""></countTo>
+                  <countTo
+                    :startVal="startVal"
+                    :endVal="490"
+                    :duration="6000"
+                    separator=""
+                  ></countTo>
                 </li>
                 <li>
-                  <countTo :startVal='startVal' :endVal='75' :duration='6000' separator=""></countTo>
+                  <countTo
+                    :startVal="startVal"
+                    :endVal="75"
+                    :duration="6000"
+                    separator=""
+                  ></countTo>
                 </li>
                 <li>
-                  <countTo :startVal='startVal' :endVal='3000' :duration='6000' separator=""></countTo>
+                  <countTo
+                    :startVal="startVal"
+                    :endVal="3000"
+                    :duration="6000"
+                    separator=""
+                  ></countTo>
                 </li>
               </ul>
             </div>
@@ -91,9 +106,7 @@
           </div>
         </div>
       </section>
-  
     </div>
-    
   </div>
 </template>
 
@@ -103,132 +116,149 @@ import '@/assets/js/china'
 import countTo from 'vue-count-to'
 
 export default {
-  name: 'Brand',
+  name: `Brand`,
   components: {
-    countTo
+    countTo,
   },
   data() {
-  	return {
-      nowTime: '',
-      week: '',
-      date: '',
+    return {
+      nowTime: ``,
+      week: ``,
+      date: ``,
       timer: null,
-      imgSrc: '',
+      imgSrc: ``,
       weatcherData: {},
       startVal: 0,
       geoCoordMap: {},
       XAData: [
-        [{ name: "长沙" }, { name: "北京", value: 100 }],
-        [{ name: "长沙" }, { name: "上海", value: 100 }],
-        [{ name: "长沙" }, { name: "广州", value: 100 }],
-        [{ name: "长沙" }, { name: "深圳", value: 100 }],
-        [{ name: "长沙" }, { name: "西安", value: 100 }]
+        [{ name: `长沙` }, { name: `北京`, value: 100 }],
+        [{ name: `长沙` }, { name: `上海`, value: 100 }],
+        [{ name: `长沙` }, { name: `广州`, value: 100 }],
+        [{ name: `长沙` }, { name: `深圳`, value: 100 }],
+        [{ name: `长沙` }, { name: `西安`, value: 100 }],
       ],
       XNData: [
-        [{ name: "长沙" }, { name: "西宁", value: 100 }],
-        [{ name: "长沙" }, { name: "拉萨", value: 100 }],
-        [{ name: "长沙" }, { name: "哈尔滨", value: 100 }],
-        [{ name: "长沙" }, { name: "成都", value: 100 }],
-        [{ name: "长沙" }, { name: "重庆", value: 100 }]
+        [{ name: `长沙` }, { name: `西宁`, value: 100 }],
+        [{ name: `长沙` }, { name: `拉萨`, value: 100 }],
+        [{ name: `长沙` }, { name: `哈尔滨`, value: 100 }],
+        [{ name: `长沙` }, { name: `成都`, value: 100 }],
+        [{ name: `长沙` }, { name: `重庆`, value: 100 }],
       ],
       YCData: [
-        [{ name: "北京" }, { name: "长沙", value: 100 }],
-        [{ name: "北京" }, { name: "贵阳", value: 100 }],
-        [{ name: "北京" }, { name: "杭州", value: 100 }]
-      ]
-
-  	}
-  },
-  computed: {
-  	
-  },
-  created() {
+        [{ name: `北京` }, { name: `长沙`, value: 100 }],
+        [{ name: `北京` }, { name: `贵阳`, value: 100 }],
+        [{ name: `北京` }, { name: `杭州`, value: 100 }],
+      ],
+    }
   },
+  computed: {},
+  created() {},
   mounted() {
-    this.getWeather();
+    this.getWeather()
     this.timer = setInterval(() => {
-      this.getWeather();
+      this.getWeather()
     }, 1000 * 60 * 60)
 
-    this.nowTimes();
-    this.getEchart();
+    this.nowTimes()
+    this.getEchart()
   },
   methods: {
-    timeFormate(timeStamp) { //显示当前时间
-      let newDate = new Date(timeStamp);
-      let year = newDate.getFullYear();
-      let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
-      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
-      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
-      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
-      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
-      let week = newDate.getDay();
-      let weeks = ['日', '一', '二', '三', '四', '五', '六'];
-      let getWeek = '星期' + weeks[week];
-      this.week = getWeek;
-      this.date = year + '.' + month + '.' + date;
-      this.nowTime = hh + ':' + mm + ':' + ss;
+    timeFormate(timeStamp) {
+      // 显示当前时间
+      let newDate = new Date(timeStamp)
+      let year = newDate.getFullYear()
+      let month =
+        newDate.getMonth() + 1 < 10
+          ? `0` + (newDate.getMonth() + 1)
+          : newDate.getMonth() + 1
+      let date =
+        newDate.getDate() < 10 ? `0` + newDate.getDate() : newDate.getDate()
+      let hh =
+        newDate.getHours() < 10 ? `0` + newDate.getHours() : newDate.getHours()
+      let mm =
+        newDate.getMinutes() < 10
+          ? `0` + newDate.getMinutes()
+          : newDate.getMinutes()
+      let ss =
+        newDate.getSeconds() < 10
+          ? `0` + newDate.getSeconds()
+          : newDate.getSeconds()
+      let week = newDate.getDay()
+      let weeks = [`日`, `一`, `二`, `三`, `四`, `五`, `六`]
+      let getWeek = `星期` + weeks[week]
+      this.week = getWeek
+      this.date = year + `.` + month + `.` + date
+      this.nowTime = hh + `:` + mm + `:` + ss
     },
     nowTimes() {
-      this.timeFormate(new Date());
-      setInterval(this.nowTimes, 1000);
-      this.clear();
+      this.timeFormate(new Date())
+      setInterval(this.nowTimes, 1000)
+      this.clear()
     },
     clear() {
       clearInterval(this.nowTimes)
-      this.nowTimes = null;
+      this.nowTimes = null
     },
-    getWeather() { // 第三方天气api接口
-      window.axios.get('https://www.tianqiapi.com/api/', {
-        params: {
-          appid: '26148275',
-          appsecret: '2id6H48Y',
-          version: 'v6'
-        }
-      }).then(res => {
-        if (res.data) {
-          if (res.data.wea_img == 'xue') {
-            this.imgSrc = require('../assets/img/brand/xue.png');
-          } else if (res.data.wea_img == 'yin') {
-            this.imgSrc = require('../assets/img/brand/yin.png');
-          } else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') {
-            this.imgSrc = require('../assets/img/brand/yu.png');
-          } else if (res.data.wea_img == 'yun') {
-            this.imgSrc = require('../assets/img/brand/yun.png');
-          } else if (res.data.wea_img == 'wu') {
-            this.imgSrc = require('../assets/img/brand/wu.png');
-          } else if (res.data.wea_img == 'shachen') {
-            this.imgSrc = require('../assets/img/brand/shachen.png');
-          } else if (res.data.wea_img == 'lei') {
-            this.imgSrc = require('../assets/img/brand/lei.png');
-          } else {
-            this.imgSrc = require('../assets/img/brand/qing.png');
+    getWeather() {
+      // 第三方天气api接口
+      window.axios
+        .get(`https://www.tianqiapi.com/api/`, {
+          params: {
+            appid: `26148275`,
+            appsecret: `2id6H48Y`,
+            version: `v6`,
+          },
+        })
+        .then((res) => {
+          if (res.data) {
+            if (res.data.wea_img == `xue`) {
+              this.imgSrc = require(`../assets/img/brand/xue.png`)
+            } else if (res.data.wea_img == `yin`) {
+              this.imgSrc = require(`../assets/img/brand/yin.png`)
+            } else if (
+              res.data.wea_img == `yu` ||
+              res.data.wea_img == `bingbao`
+            ) {
+              this.imgSrc = require(`../assets/img/brand/yu.png`)
+            } else if (res.data.wea_img == `yun`) {
+              this.imgSrc = require(`../assets/img/brand/yun.png`)
+            } else if (res.data.wea_img == `wu`) {
+              this.imgSrc = require(`../assets/img/brand/wu.png`)
+            } else if (res.data.wea_img == `shachen`) {
+              this.imgSrc = require(`../assets/img/brand/shachen.png`)
+            } else if (res.data.wea_img == `lei`) {
+              this.imgSrc = require(`../assets/img/brand/lei.png`)
+            } else {
+              this.imgSrc = require(`../assets/img/brand/qing.png`)
+            }
+            this.weatcherData = res.data
           }
-          this.weatcherData = res.data;
-        }
-      }).catch(err => {
-        console.log(err)
-      })
+        })
+        .catch((err) => {
+          console.log(err)
+        })
     },
-    convertData(data) { // 地图数据转换
-      let res = [];
+    convertData(data) {
+      // 地图数据转换
+      let res = []
       for (let i = 0; i < data.length; i++) {
-        let dataItem = data[i];
-        let fromCoord = this.geoCoordMap[dataItem[0].name];
-        let toCoord = this.geoCoordMap[dataItem[1].name];
+        let dataItem = data[i]
+        let fromCoord = this.geoCoordMap[dataItem[0].name]
+        let toCoord = this.geoCoordMap[dataItem[1].name]
         if (fromCoord && toCoord) {
           res.push({
             fromName: dataItem[0].name,
             toName: dataItem[1].name,
             coords: [fromCoord, toCoord],
-            value: dataItem[1].value
-          });
+            value: dataItem[1].value,
+          })
         }
       }
-      return res;
+      return res
     },
-    getEchart() { // 初始化地图数据
-      let myChart = echarts.init(document.getElementById('chart_map'));
+    getEchart() {
+      // 初始化地图数据
+      let myChart = echarts.init(document.getElementById(`chart_map`))
 
       this.geoCoordMap = {
         上海: [121.4648, 31.2891],
@@ -344,153 +374,155 @@ export default {
         长治: [112.8625, 36.4746],
         阳泉: [113.4778, 38.0951],
         青岛: [120.4651, 36.3373],
-        韶关: [113.7964, 24.7028]
-      };
+        韶关: [113.7964, 24.7028],
+      }
 
-      let planePath = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
+      let planePath = `path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z`
 
-      let color = ["#fff", "#fff", "#fff"]; //航线的颜色
-      let series = [];
+      let color = [`#fff`, `#fff`, `#fff`] // 航线的颜色
+      let series = []
 
-      [
-        ["长沙", this.XAData],
-        ["长沙", this.XNData],
-        ["北京", this.YCData]
+      ;[
+        [`长沙`, this.XAData],
+        [`长沙`, this.XNData],
+        [`北京`, this.YCData],
       ].forEach((item, i) => {
         series.push(
           {
-            name: item[0] + " Top3",
-            type: "lines",
+            name: item[0] + ` Top3`,
+            type: `lines`,
             zlevel: 1,
             effect: {
               show: true,
               period: 6,
               trailLength: 0.7,
-              color: "red", //arrow箭头的颜色
-              symbolSize: 3
+              color: `red`, // arrow箭头的颜色
+              symbolSize: 3,
             },
             lineStyle: {
               normal: {
                 color: color[i],
                 width: 0,
-                curveness: 0.2
-              }
+                curveness: 0.2,
+              },
             },
-            data: this.convertData(item[1])
+            data: this.convertData(item[1]),
           },
           {
-            name: item[0] + " Top3",
-            type: "lines",
+            name: item[0] + ` Top3`,
+            type: `lines`,
             zlevel: 2,
-            symbol: ["none", "arrow"],
+            symbol: [`none`, `arrow`],
             symbolSize: 10,
             effect: {
               show: true,
               period: 6,
               trailLength: 0,
               symbol: planePath,
-              symbolSize: 15
+              symbolSize: 15,
             },
             lineStyle: {
               normal: {
                 color: color[i],
                 width: 1,
                 opacity: 0.6,
-                curveness: 0.2
-              }
+                curveness: 0.2,
+              },
             },
-            data: this.convertData(item[1])
+            data: this.convertData(item[1]),
           },
           {
-            name: item[0] + " Top3",
-            type: "effectScatter",
-            coordinateSystem: "geo",
+            name: item[0] + ` Top3`,
+            type: `effectScatter`,
+            coordinateSystem: `geo`,
             zlevel: 2,
             rippleEffect: {
-              brushType: "stroke"
+              brushType: `stroke`,
             },
             label: {
               normal: {
                 show: true,
-                position: "right",
-                formatter: "{b}"
-              }
+                position: `right`,
+                formatter: `{b}`,
+              },
             },
             symbolSize: (val) => {
-              return val[2] / 8;
+              return val[2] / 8
             },
             itemStyle: {
               normal: {
-                color: color[i]
+                color: color[i],
               },
               emphasis: {
-                areaColor: "#2B91B7"
-              }
+                areaColor: `#2B91B7`,
+              },
             },
             data: item[1].map((dataItem) => {
               return {
                 name: dataItem[1].name,
-                value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
-              };
-            })
+                value: this.geoCoordMap[dataItem[1].name].concat([
+                  dataItem[1].value,
+                ]),
+              }
+            }),
           }
-        );
-      });
+        )
+      })
 
       let option = {
         tooltip: {
-          trigger: "item",
+          trigger: `item`,
           formatter: (params, ticket, callback) => {
-            if (params.seriesType == "effectScatter") {
-              return "线路：" + params.data.name + "" + params.data.value[2];
-            } else if (params.seriesType == "lines") {
+            if (params.seriesType == `effectScatter`) {
+              return `线路：` + params.data.name + `` + params.data.value[2]
+            } else if (params.seriesType == `lines`) {
               return (
                 params.data.fromName +
-                ">" +
+                `>` +
                 params.data.toName +
-                "<br />" +
+                `<br />` +
                 params.data.value
-              );
+              )
             } else {
-              return params.name;
+              return params.name
             }
-          }
+          },
         },
         geo: {
-          map: "china",
+          map: `china`,
           label: {
             emphasis: {
               show: true,
-              color: "#fff"
-            }
+              color: `#fff`,
+            },
           },
           roam: false,
           //   放大我们的地图
           zoom: 1,
           itemStyle: {
             normal: {
-              areaColor: "rgba(43, 196, 243, 0.42)",
-              borderColor: "rgba(43, 196, 243, 1)",
-              borderWidth: 1
+              areaColor: `rgba(43, 196, 243, 0.42)`,
+              borderColor: `rgba(43, 196, 243, 1)`,
+              borderWidth: 1,
             },
             emphasis: {
-              areaColor: "#2B91B7"
-            }
-          }
+              areaColor: `#2B91B7`,
+            },
+          },
         },
-        series: series
+        series: series,
       }
 
-      myChart.setOption(option, true);
+      myChart.setOption(option, true)
 
-      window.addEventListener("resize", () => {
-        myChart.resize();
-      });
-    }
+      window.addEventListener(`resize`, () => {
+        myChart.resize()
+      })
+    },
   },
   beforeDestroy() {
-    clearInterval(this.timer);
-  }
+    clearInterval(this.timer)
+  },
 }
 </script>
 
@@ -521,42 +553,42 @@ export default {
         left: 1.375rem;
         top: 0.35rem;
         font-size: 0.25rem;
-        color: rgba(126, 240, 255, .7);
+        color: rgba(126, 240, 255, 0.7);
         img {
-          width: .45rem;
+          width: 0.45rem;
         }
         span {
           display: inline-block;
         }
         .tem {
-          margin: 0 .1rem 0 .2rem;
+          margin: 0 0.1rem 0 0.2rem;
         }
       }
       .showTime {
         position: absolute;
         right: 1.375rem;
         top: 0.5rem;
-        color: rgba(126, 240, 255, .7);
+        color: rgba(126, 240, 255, 0.7);
         display: flex;
         .time {
-          font-size: .28rem;
-          margin-right: .18rem;
+          font-size: 0.28rem;
+          margin-right: 0.18rem;
         }
         .date {
           span {
             display: block;
             &:nth-child(1) {
-              font-size: .12rem;
+              font-size: 0.12rem;
               text-align: right;
             }
             &:nth-child(2) {
-              font-size: .14rem;
+              font-size: 0.14rem;
             }
           }
         }
       }
     }
-    
+
     .mainbox {
       min-width: 1024px;
       max-width: 1920px;
@@ -578,7 +610,7 @@ export default {
               ul {
                 display: flex;
                 %li-line {
-                  content: "";
+                  content: '';
                   position: absolute;
                   height: 50%;
                   width: 1px;
@@ -609,7 +641,7 @@ export default {
                 }
               }
               &:before {
-                content: "";
+                content: '';
                 position: absolute;
                 width: 30px;
                 height: 10px;
@@ -619,7 +651,7 @@ export default {
                 left: 0;
               }
               &:after {
-                content: "";
+                content: '';
                 position: absolute;
                 width: 30px;
                 height: 10px;
@@ -645,7 +677,7 @@ export default {
             }
           }
         }
-        
+
         %map-style {
           position: absolute;
           top: 50%;
@@ -694,14 +726,15 @@ export default {
           position: relative;
           height: 3.875rem;
           border: 1px solid rgba(25, 186, 139, 0.17);
-          background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
+          background: rgba(255, 255, 255, 0.04)
+            url(../assets/img/brand/line.png);
           padding: 0 0.1875rem 0;
           margin-bottom: 0.1875rem;
           &:before {
             position: absolute;
             top: 0;
             left: 0;
-            content: "";
+            content: '';
             width: 10px;
             height: 10px;
             border-top: 2px solid #02a6b5;
@@ -711,7 +744,7 @@ export default {
             position: absolute;
             top: 0;
             right: 0;
-            content: "";
+            content: '';
             width: 10px;
             height: 10px;
             border-top: 2px solid #02a6b5;
@@ -727,7 +760,7 @@ export default {
               position: absolute;
               bottom: 0;
               left: 0;
-              content: "";
+              content: '';
               width: 10px;
               height: 10px;
               border-bottom: 2px solid #02a6b5;
@@ -737,7 +770,7 @@ export default {
               position: absolute;
               bottom: 0;
               right: 0;
-              content: "";
+              content: '';
               width: 10px;
               height: 10px;
               border-bottom: 2px solid #02a6b5;
@@ -763,11 +796,8 @@ export default {
           }
         }
       }
-
     }
-
   }
-
 }
 
 @-webkit-keyframes rotate {
@@ -813,5 +843,5 @@ export default {
   html {
     font-size: 80px !important;
   }
-}	
+}
 </style>

src/views/Home.vue

@@ -6,9 +6,9 @@
 
 <template>
   <div class="home-container">
-  	<div class="wrap" ref="editor">
+    <div class="wrap" ref="editor">
       <div class="top"></div>
-      
+
       <sinan />
       <seamless />
       <pyramid />
@@ -40,9 +40,7 @@
       <circleNesting />
 
       <div class="divider"></div>
-
     </div>
-    
   </div>
 </template>
 
@@ -50,30 +48,23 @@
 import { screenSize } from '@/assets/js/utils'
 
 export default {
-  name: 'Home',
+  name: `Home`,
   components: {},
   data() {
-  	return {
-  		
-  	}
-  },
-  computed: {
-  	
-  },
-  created() {
+    return {}
   },
+  computed: {},
+  created() {},
   mounted() {
-    screenSize(this.$refs.editor);
+    screenSize(this.$refs.editor)
   },
-  methods: {
-    
-  }
+  methods: {},
 }
 </script>
 
 <style lang="scss" scoped>
 .home-container {
-	position: absolute;
+  position: absolute;
   left: 0;
   top: 0;
   width: 100%;
@@ -91,14 +82,14 @@ export default {
     overflow: auto;
     .top {
       position: absolute;
-      left: 0; 
-      top: 0; 
-      width: 100%; 
-      height: 80px; 
-      background-color: transparent; 
-      background: url(../assets/img/top_nav.png) no-repeat; 
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 80px;
+      background-color: transparent;
+      background: url(../assets/img/top_nav.png) no-repeat;
       background-position: 65% 0;
-      border: none; 
+      border: none;
       overflow: hidden;
     }
     .divider {
@@ -111,7 +102,6 @@ export default {
       border: none;
       background: transparent;
     }
-
   }
-}	
+}
 </style>

src/views/Login.vue

@@ -6,179 +6,171 @@
 
 <template>
   <div class="login-container">
-  	<div class="layer">
-  			<div class="some-space">
-        	<div class="form">
-						<h2>大数据可视化平台</h2>
-						<div class="item">
-							<i class="iconfont icon-user"></i>
-							<input
-	              autocomplete="off"
-	              type="text"
-	              class="input"
-	              v-model="userName"
-	              placeholder="请输入用户名"
-	            />
-            </div>
-            <div class="item">
-            	<i class="iconfont icon-password"></i>
-	            <input
-	              autocomplete="off"
-	              type="password"
-	              class="input"
-	              v-model="userPwd"
-	              maxlength="20"
-	              @keyup.enter="login"
-	              placeholder="请输入密码"
-	            />
-            </div>
-	          <button 
-	            class="loginBtn"
-	            :disabled="isLoginAble"
-	            @click.stop="login">
-	            立即登录
-	          </button>
-	          <div class="tip">
-							默认用户名：admin ，默认密码：123456
-	          </div>
-        	</div>
+    <div class="layer">
+      <div class="some-space">
+        <div class="form">
+          <h2>大数据可视化平台</h2>
+          <div class="item">
+            <i class="iconfont icon-user"></i>
+            <input
+              autocomplete="off"
+              type="text"
+              class="input"
+              v-model="userName"
+              placeholder="请输入用户名"
+            />
+          </div>
+          <div class="item">
+            <i class="iconfont icon-password"></i>
+            <input
+              autocomplete="off"
+              type="password"
+              class="input"
+              v-model="userPwd"
+              maxlength="20"
+              @keyup.enter="login"
+              placeholder="请输入密码"
+            />
+          </div>
+          <button class="loginBtn" :disabled="isLoginAble" @click.stop="login">
+            立即登录
+          </button>
+          <div class="tip">默认用户名：admin ，默认密码：123456</div>
         </div>
+      </div>
     </div>
 
-	    <vue-particles 
-	      color="#6495ED"
-	      :particleOpacity="0.7"
-	      :particlesNumber="80"
-	      shapeType="circle"
-	      :particleSize="4"
-	      linesColor="#6495ED"
-	      :linesWidth="1"
-	      :lineLinked="true"
-	      :lineOpacity="0.6"
-	      :linesDistance="150"
-	      :moveSpeed="3"
-	      :hoverEffect="true"
-	      hoverMode="grab"
-	      :clickEffect="true"
-	      clickMode="push"
-	    >
-	    </vue-particles>
+    <vue-particles
+      color="#6495ED"
+      :particleOpacity="0.7"
+      :particlesNumber="80"
+      shapeType="circle"
+      :particleSize="4"
+      linesColor="#6495ED"
+      :linesWidth="1"
+      :lineLinked="true"
+      :lineOpacity="0.6"
+      :linesDistance="150"
+      :moveSpeed="3"
+      :hoverEffect="true"
+      hoverMode="grab"
+      :clickEffect="true"
+      clickMode="push"
+    >
+    </vue-particles>
 
     <bgAnimation />
 
-    <modal 
-      title="提示" 
+    <modal
+      title="提示"
       :content="modalContent"
-      :visible.sync="visible" 
-      @confirm="confirm">
+      :visible.sync="visible"
+      @confirm="confirm"
+    >
     </modal>
-
   </div>
 </template>
 
 <script>
-
 export default {
-  name: 'Login',
+  name: `Login`,
   components: {},
   data() {
-  	return {
-  		userName: 'admin',
-  		userPwd: '123456',
+    return {
+      userName: `admin`,
+      userPwd: `123456`,
       visible: false,
-      modalContent: '这是一段自定义模态框消息'
-  	}
+      modalContent: `这是一段自定义模态框消息`,
+    }
   },
   computed: {
-  	isLoginAble() {
-  		return !(this.userName && this.userPwd);
-  	}
+    isLoginAble() {
+      return !(this.userName && this.userPwd)
+    },
   },
   created() {},
-  mounted() {
-
-  },
+  mounted() {},
   methods: {
-  	login () {
-  		if (this.userName == 'admin' && this.userPwd == '123456') {
-         this.$router.push({
-          path: '/home'
-         })
+    login() {
+      if (this.userName == `admin` && this.userPwd == `123456`) {
+        this.$router.push({
+          path: `/home`,
+        })
       } else {
         this.$Toast({
-          content: '请输入正确的用户名和密码',
-          type: 'error',
+          content: `请输入正确的用户名和密码`,
+          type: `error`,
           // hasClose: true
         })
       }
-  	},
-    confirm () {
-      this.visible = false;
-      console.log('点击确定')
-    }
-  }
+    },
+    confirm() {
+      this.visible = false
+      console.log(`点击确定`)
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .login-container {
-	.layer {
-	  position: absolute;
-	  height: 100%;
-	  width: 100%;
-	}
-	#particles-js {
-	  position: absolute;
-	  top: 0;
-	  left: 0;
-	  width: 100%;
-	  height: 100%;
+  .layer {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+  #particles-js {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     z-index: 1000;
-	}
-	.some-space {
-	  color: white;
-	  font-weight: 100;
-	  letter-spacing: 2px;
-	  position: absolute;
-	  top: 50%;
-	  left: 50%;
-	  z-index: 1001;
-	  -webkit-transform: translate3d(-50%, -50%, 0);
-	  transform: translate3d(-50%, -50%, 0);
+  }
+  .some-space {
+    color: white;
+    font-weight: 100;
+    letter-spacing: 2px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1001;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
 
-	  -ms-animation: cloud 2s 3s ease-in infinite alternate;
-	  -moz-animation: cloud 2s 3s ease-in infinite alternate;
-	  -webkit-animation: cloud 2s 3s ease-in infinite alternate;
-	  -o-animation: cloud 2s 3s ease-in infinite alternate;
-	  -webkit-animation: cloud 2s 3s ease-in infinite alternate;
-	  animation: cloud 2s 3s ease-in infinite alternate;
+    -ms-animation: cloud 2s 3s ease-in infinite alternate;
+    -moz-animation: cloud 2s 3s ease-in infinite alternate;
+    -webkit-animation: cloud 2s 3s ease-in infinite alternate;
+    -o-animation: cloud 2s 3s ease-in infinite alternate;
+    -webkit-animation: cloud 2s 3s ease-in infinite alternate;
+    animation: cloud 2s 3s ease-in infinite alternate;
 
-	  .form {
-	  	width: 460px;
-	  	height: auto;
-	  	background: rgba(36, 36, 85, .5);
-	  	margin: 0 auto;
-	  	padding: 35px 30px 25px;
-	  	box-shadow: 0 0 25px rgba(255, 255, 255, .5);
-	  	border-radius: 10px;
-	    .item {
-	    	display: flex;
-	    	align-items: center;
-				margin-bottom: 25px;
+    .form {
+      width: 460px;
+      height: auto;
+      background: rgba(36, 36, 85, 0.5);
+      margin: 0 auto;
+      padding: 35px 30px 25px;
+      box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
+      border-radius: 10px;
+      .item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 25px;
         border-bottom: 1px solid #d3d7f7;
-				i {
-					color: #d3d7f7;
-					margin-right: 10px;
-				}
-	    }
-	  	h2 {
-	  		text-align: center;
-	  		font-weight: normal;
-	  		font-size: 26px;
-	  		color: #d3d7f7;
-	  		padding-bottom: 35px;
-	  	}
-	  	.input {
+        i {
+          color: #d3d7f7;
+          margin-right: 10px;
+        }
+      }
+      h2 {
+        text-align: center;
+        font-weight: normal;
+        font-size: 26px;
+        color: #d3d7f7;
+        padding-bottom: 35px;
+      }
+      .input {
         font-size: 16px;
         line-height: 30px;
         width: 100%;
@@ -187,117 +179,115 @@ export default {
         border: none;
         background-color: rgba(0, 0, 0, 0);
         padding: 10px 0;
-	  	}
-	  	.loginBtn {
-	  		width: 100%;
-	  		padding: 12px 0;
-	  		border: 1px solid #d3d7f7;
+      }
+      .loginBtn {
+        width: 100%;
+        padding: 12px 0;
+        border: 1px solid #d3d7f7;
         font-size: 16px;
-    		color: #d3d7f7;
-    		cursor: pointer;
-    		background: transparent;
-    		border-radius: 4px;
+        color: #d3d7f7;
+        cursor: pointer;
+        background: transparent;
+        border-radius: 4px;
         margin-top: 10px;
-    		&:hover {
-    			color: #fff;
-    			background: #0090ff;
-    			border-color: #0090ff;
-    		}
-	  	}
-	  	.tip {
+        &:hover {
+          color: #fff;
+          background: #0090ff;
+          border-color: #0090ff;
+        }
+      }
+      .tip {
         font-size: 12px;
         padding-top: 20px;
-	  	}
-	  }
-
-
-	}
-
+      }
+    }
+  }
 }
 
 input::-webkit-input-placeholder {
-    color: #d3d7f7;
+  color: #d3d7f7;
 }
-input::-moz-placeholder {   /* Mozilla Firefox 19+ */
-    color: #d3d7f7;
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #d3d7f7;
 }
-input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */
-    color: #d3d7f7;
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: #d3d7f7;
 }
-input:-ms-input-placeholder {  /* Internet Explorer 10-11 */ 
-    color: #d3d7f7;
+input:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: #d3d7f7;
 }
 
-
-@-ms-keyframes cloud{
-    0%{
-        -ms-transform: translate(-50%, -50%);
-    }
-    40%{
-        opacity: 1;
-    }
-    60%{
-        opacity: 1;
-    }
-    100%{
-        -ms-transform: translate(-50%, -40%);
-    }
+@-ms-keyframes cloud {
+  0% {
+    -ms-transform: translate(-50%, -50%);
+  }
+  40% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    -ms-transform: translate(-50%, -40%);
+  }
 }
-@-moz-keyframes cloud{
-    0%{
-        -moz-transform: translate(-50%, -50%);
-    }
-    40%{
-        opacity: 1;
-    }
-    60%{
-        opacity: 1;
-    }
-    100%{
-        -moz-transform: translate(-50%, -40%);
-    }
+@-moz-keyframes cloud {
+  0% {
+    -moz-transform: translate(-50%, -50%);
+  }
+  40% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    -moz-transform: translate(-50%, -40%);
+  }
 }
-@-o-keyframes cloud{
-    0%{
-        -o-transform: translate(-50%, -50%);
-    }
-    40%{
-        opacity: 1;
-    }
-    60%{
-        opacity: 1;
-    }
-    100%{
-        -o-transform: translate(-50%, -40%);
-    }
+@-o-keyframes cloud {
+  0% {
+    -o-transform: translate(-50%, -50%);
+  }
+  40% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    -o-transform: translate(-50%, -40%);
+  }
 }
-@-webkit-keyframes cloud{
-    0%{
-        -webkit-transform: translate(-50%, -50%);
-    }
-    40%{
-        opacity: 1;
-    }
-    60%{
-        opacity: 1;
-    }
-    100%{
-        -webkit-transform: translate(-50%, -40%);
-    }
+@-webkit-keyframes cloud {
+  0% {
+    -webkit-transform: translate(-50%, -50%);
+  }
+  40% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate(-50%, -40%);
+  }
 }
-@keyframes cloud{
-    0%{
-        transform: translate(-50%, -50%);
-    }
-    40%{
-        opacity: 1;
-    }
-    60%{
-        opacity: 1;
-    }
-    100%{
-        transform: translate(-50%, -40%);
-    }
+@keyframes cloud {
+  0% {
+    transform: translate(-50%, -50%);
+  }
+  40% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -40%);
+  }
 }
-	
 </style>

src/views/page1/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { screenSize } from "@/assets/js/utils"
+import { screenSize } from '@/assets/js/utils'
 
 export default {
   name: `Home`,

src/views/page2/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { screenSize } from "@/assets/js/utils"
+import { screenSize } from '@/assets/js/utils'
 
 export default {
   name: `Home`,

src/views/page3/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { screenSize } from "@/assets/js/utils"
+import { screenSize } from '@/assets/js/utils'
 
 export default {
   name: `Home`,