新增气泡图，跑道图

src/assets/styles/base.scss

@@ -1,4 +1,9 @@
 @charset "utf-8";
+/*
+ *  描述: 基本样式
+ *  作者：Jack Chen
+ *  时间：2020-04-18
+ */
 
 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { 
   margin:0; padding:0; 
@@ -44,8 +49,8 @@ a {
   -webkit-backface-visibility: hidden;
 }
 ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 10px;
+  height: 10px;
 }
 ::-webkit-scrollbar-track-piece {
   background-color: rgba(0, 0, 0, 0.2);

src/assets/styles/common.scss

@@ -1,4 +1,10 @@
-/*动画组件通用样式*/
+@charset "utf-8";
+/*
+ *  描述: 动画组件通用样式
+ *  作者：Jack Chen
+ *  时间：2020-04-18
+ */
+
 .wrap-container {
   position: absolute;
   overflow: hidden;

src/components/bgAnimation/index.vue

@@ -1,3 +1,9 @@
+<!--
+ 描述: 登录界面背景图动画
+ 作者: Jack Chen
+ 日期: 2020-04-18
+-->
+
 <template>
   <ul class="slide-box">
     <li></li>

src/components/circleRunway/canvas.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="canvas" :class="classStyle">
+    <canvas :id="id" width="400" height="400"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      num: 0,
+      canvas: '',
+      context: '',
+      cirX: '',
+      cirY: '',
+      rad: '',
+      n: 1,
+      speed: 150,
+      r: 36,
+      timer3: null
+    }
+  },
+  props:[
+    'percent',
+    'id',
+    'color',
+    'classStyle',
+    'lineWidth'
+  ],
+  mounted () {
+    this.canvas = document.getElementById(this.id);
+    this.context = this.canvas.getContext('2d');
+    this.context.scale(4, 4);
+    this.cirX = 40, // this.canvas.width / 2
+    this.cirY = 40, // this.canvas.height / 2
+    this.rad = Math.PI * 2 / 100;
+    this.DreamLoading();
+
+    // this.timer3 = setInterval(() => {
+    //  this.DreamLoading();
+    // }, 6000)
+
+    document.addEventListener('visibilitychange', () => {
+      this.isHidden = document.hidden;
+      if (this.isHidden === false) {
+        this.timer3 = setInterval(() => {
+         this.DreamLoading();
+        }, 6000)
+      } else {
+        clearInterval(this.timer3);
+        this.timer3 = null;
+      }
+    })
+
+  },
+  created () {
+  },
+  methods: {
+    // 绘制最外层细圈
+    writeCircle() {
+      // save和restore可以保证样式属性只运用于该段canvas元素
+      this.context.save();        
+      // 开始路径
+      this.context.beginPath();    
+      // 设置边线的颜色
+      this.context.strokeStyle = "rgba(0, 114, 188, .2)";       
+      this.context.lineWidth = this.lineWidth;
+      // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
+      this.context.arc(this.cirX, this.cirY, this.r, 0, Math.PI * 2, true);
+       // 绘制边线
+      this.context.stroke();      
+      // this.context.restore();
+      this.context.closePath();
+    },
+    // 绘制文本
+    writeText(n) {
+      this.context.save();
+      this.context.font = "20px Arial";
+      this.context.fillStyle = "#49f"; // 字体颜色
+      this.context.fillText(n.toFixed(0) + "%", this.cirX - 20, this.cirY + 10); // 绘制实心
+      // context.strokeStyle = "#49f";
+      // context.strokeText(n.toFixed(0)+"%",cirX - 30 ,cirY +10); // 绘制空心
+      this.context.stroke();
+      this.context.restore();
+    },
+    // 绘制外圈
+    writeBlue(n) {
+      this.context.save();
+      this.context.strokeStyle = this.color;
+      this.context.lineWidth = this.lineWidth;
+      // this.context.lineCap = 'round';
+      this.context.beginPath();
+      this.context.arc(this.cirX, this.cirY, this.r, 90, Math.PI / 2 + this.rad * n, false);
+      this.context.stroke();
+      this.context.restore();
+    },
+    DreamLoading() {
+      // 清除所有，重新绘制
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+
+      this.writeCircle();
+      // this.writeText(this.n);
+      this.writeBlue(this.n)
+      // if(this.n < 100 && this.n <= 60) {
+      if (this.n <= this.percent) {
+          this.n = this.n + 0.4;
+      } else {
+        return this.n = 0;
+      }
+      // setTimeout(this.DreamLoading, this.speed);
+      requestAnimationFrame(this.DreamLoading);
+    }
+  }
+}
+</script>

src/components/circleRunway/index.vue

@@ -1,11 +1,25 @@
+<!--
+ 描述: 环形跑道图
+ 作者: Jack Chen
+ 日期: 2020-04-29
+-->
+
 <template>
-  <!-- 环形跑道图 -->
   <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">环形跑道图</div> 
       <div class="sn-body"> 
-        <div class="wrap-container" style="height: 90%"> 
-          <canvas width="496" height="455" style="width: 496px; height: 455px;"></canvas> 
+        <div class="wrap-container"> 
+          <div class="pd-canvas">
+              <canvas-circle v-for="(item, index) in cicleList" :key="index" :classStyle="item.classStyle" :color="item.color" :percent="item.ratio" :lineWidth="item.lineWidth" :id="index"></canvas-circle>
+          </div>
+          <!-- <div class="chartsdom" id="chart_run"></div> -->
+          <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>   
@@ -13,19 +27,168 @@
 </template>
 
 <script>
+import canvasCircle from './canvas'
+
 export default {
   name: "circleRunway",
+  components: {
+    canvasCircle
+  },
   data() {
     return {
-      
-      
+      timer: null,
+      option: null,
+      cicleList: [{
+        ratio: '50',
+        color: '#0772bb',
+        classStyle: 'canvasCircle1',
+        lineWidth: 2,
+      },{
+        ratio: '30',
+        color: '#00ffff',
+        classStyle: 'canvasCircle2',
+        lineWidth: 2,
+      },{
+        ratio: '20',
+        color: '#f48b3b',
+        classStyle: 'canvasCircle3',
+        lineWidth: 2,
+      }],
+      arrData: [{
+        name: '阿里云',
+        number: 725,
+        percentage: 41.50
+      },{
+        name: '腾讯云',
+        number: 460,
+        percentage: 30.95
+      },{
+        name: '华为云',
+        number: 382,
+        percentage: 22.48
+      }]
     }
   },
   mounted() {
-    
+    // this.getEchart();
   },
   methods: {
-    
+    getEchart() {
+      // 初始化echarts实例
+      // let myChart = echarts.init(document.getElementById('chart_run'));
+      // let itemStyle = {
+      //   normal: {
+      //     color: '#091f45',
+      //   }
+      // }
+
+      // this.option = {
+      //   animation: true,
+      //   color: ['#0772bb', '#00ffff', '#f48b3b'],
+      //   series: [{
+      //     name: '2020年',
+      //     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: {
+      //         normal: {
+      //           color: '#0772bb'
+      //         }
+      //       }
+      //     },{
+      //       value: 5,
+      //       name: '50%',
+      //       itemStyle: itemStyle
+      //     }]
+      //   },{
+      //     name: '2019年',
+      //     type: 'pie',
+      //     clockWise: false,
+      //     startAngle: 90,
+      //     hoverAnimation: false,
+      //     radius: ['66%', '70%'],
+      //     center: ['50%', '50%'],
+      //     label: {
+      //       normal: {
+      //         show: false
+      //       },
+      //     },
+      //     labelLine: {
+      //       normal: {
+      //         show: false
+      //       }
+      //     },
+      //     data: [{
+      //       value: 3,
+      //       name: '50%',
+      //       itemStyle: {
+      //         normal: {
+      //           color: '#00ffff'
+      //         }
+      //       }
+      //     },{
+      //       value: 7,
+      //       name: '50%',
+      //       itemStyle: itemStyle
+      //     }]
+      //   },{
+      //     name: '2018年',
+      //     type: 'pie',
+      //     clockWise: false,
+      //     startAngle: 90,
+      //     hoverAnimation: false,
+      //     radius: ['46%', '50%'],
+      //     center: ['50%', '50%'],
+      //     label: {
+      //       normal: {
+      //         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();
+      // });
+
+    },
   },
   beforeDestroy() {
     
@@ -35,7 +198,96 @@ export default {
 
 <style lang="scss" scoped>
 .sn-container {
-  left: 1370px;
-  top: 110px;
+  left: 974px;
+  top: 1120px;
+  width: 432px;
+  height: 400px;
+  .pd-canvas {
+    position: relative; 
+    overflow: hidden; 
+    width: 100%; 
+    height: 90%; 
+    padding: 0; 
+    margin: 0; 
+    border-width: 0; 
+    cursor: default;
+    .canvas {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      user-select: none; 
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
+      padding: 0; 
+      margin: 0; 
+      border-width: 0;
+      &.canvasCircle1 {
+        left: 66px;
+        top: 3px;
+      }
+      &.canvasCircle2 {
+        transform: scale(.8);
+        left: 106px;
+        top: -10px;
+      }
+      &.canvasCircle3 {
+        left: 154px;
+        top: 43px;
+      }
+    }
+  }
+  .pdt-info {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -1px;
+    transform: translate(0%, -50%);
+    white-space: nowrap;
+    &.info0 {
+      margin-top: -160.5px;
+      span {
+        &:nth-child(1) {
+          background-color: rgb(0, 114, 188);
+        }
+      }
+    }
+    &.info1 {
+      margin-top: -128.5px;
+      span {
+        &:nth-child(1) {
+          background-color: rgb(0, 255, 255);
+        }
+      }
+    }
+    &.info2 {
+      margin-top: -96.5px;
+      span {
+        &:nth-child(1) {
+          background-color: rgb(255, 146, 50);
+        }
+      }
+    }
+    > span {
+      font-size: 16px;
+      color: #0072bc;
+      vertical-align: middle;
+      &:nth-child(1) {
+        margin-right: 6px;
+        display: inline-block;
+        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);
+        text-decoration: underline;
+        cursor: pointer;
+        &:hover {
+          color: #00aeef;
+        }
+      }
+      &:nth-child(2) {
+        font-family: Arial;
+        color: #00aeef;
+      }
+    }
+  }
 }
 </style>

src/components/index.js

@@ -1,3 +1,9 @@
+/*
+ * 描述: 封装组件库
+ * 作者: Jack Chen
+ * 日期: 2020-04-18
+ */
+
 import bgAnimation from './bgAnimation' // 登录界面背景图动画
 import modal from './modal' // 自定义全局模态框
 import sinan from './sinan' // 司南排名图

src/components/modal/index.vue

@@ -1,3 +1,9 @@
+<!--
+ 描述: 自定义全局模态框
+ 作者: Jack Chen
+ 日期: 2020-04-18
+-->
+
 <template>
   <transition name="fade">
     <div class="modal-backdrop" v-if="visible">

src/components/pyramid/index.vue

@@ -1,5 +1,10 @@
+<!--
+ 描述: 金字塔动画
+ 作者: Jack Chen
+ 日期: 2020-04-19
+-->
+
 <template>
-  <!-- 金字塔数据 -->
   <div class="wrap-container trigle"> 
     <div class="back_img3"></div> 
     <div class="back_img"></div> 

src/components/rimian/index.vue

@@ -1,5 +1,10 @@
+<!--
+ 描述: 日冕排名图
+ 作者: Jack Chen
+ 日期: 2020-04-18
+-->
+
 <template>
-  <!-- 日冕排名图 -->
   <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">日冕排名图</div> 

src/components/ringPin/index.vue

@@ -1,11 +1,25 @@
+<!--
+ 描述: 环形气泡图
+ 作者: Jack Chen
+ 日期: 2020-04-29
+-->
+
 <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_pin"></div>
+          <div class="updef"></div>
+          <div class="definfo definfo0"><span>8个</span><span></span></div>
+          <div class="definfo definfo1"><span>10个</span><span></span></div>
+          <div class="definfo definfo2"><span>35个</span><span></span></div>
+          <div class="definfo definfo3"><span>38个</span><span></span></div>
+          <div class="definfo definfo4"><span>48个</span><span></span></div>
+          <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>   
@@ -27,104 +41,381 @@ export default {
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById('chart_pin'));
-      let BorderWidth = '5';
-      // 反方向剩下部分的样式
-      let placeHolderStyle = {
-        normal: {
-          label: {
-            show: false,
-            position: "center"
-          },
-          labelLine: {
-            show: false
-          },
-          // color: "rgba(0,0,0,0)",
-          // borderColor: "rgba(0,0,0,0)",
-          borderWidth: BorderWidth,
-          borderColor: '#bebebe'
-        }
+      let linearGradient0 = {
+        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'
+        }])
+      }
+      let linearGradient2 = {
+        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'
+        }])
+      }
+      let linearGradient4 = {
+        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'
+        }])
+      }
+      let linearGradient6 = {
+        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'
+        }])
       }
 
       this.option = {
-        color: ['#53f1f2', '#4ebefd'],
+        color: ['#05bbdf', '#1170e1', '#1b40e3', '#00c86c', '#5e51e3', '#ff9235', '#fef51e', '#399632'],
         legend: {
           show: true,
           orient: 'vertical',
-          left: 'left',
+          left: '80%',
           top: 'middle',
-          data: ['重要', '次要'],
+          data: ['2020年', '2019年', '2018年', '2017年', '2016年', '2015年', '2014年', '2013年'],
           textStyle: {
-            color:'#fff',
-            fontSize:16
-          }
+            color: '#fff',
+            fontSize: 14,
+          },
+          itemWidth: 20,
+          itemHeight: 10
         },
         series: [{
-          name: '重要',
+          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: {
+              normal: {
+                color: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          },{
+            value: 270,
+            itemStyle: linearGradient0
+          },{
+            value: 30,
+            itemStyle: {
+              normal: {
+                color: '#053f67'
+              }
+            }
+          }]
+        },{
+          name: '2019年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['75%', '80%'],
+          center: ['40%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 300,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          },{
+            value: 180,
+            itemStyle: linearGradient1
+          },{
+            value: 120,
+            itemStyle: {
+              normal: {
+                color: '#062d67'
+              }
+            }
+          }]
+        },{
+          name: '2018年',
           type: 'pie',
           clockWise: false,
-          startAngle: 180,
+          startAngle: 0,
           hoverAnimation: false,
-          radius: [100, 101],
-          itemStyle: {
-            normal: {
-              label: {
-                show: false,
-                position: 'outside'
-              },
-              labelLine: {
-                show: false,
-                length: 100,
-                smooth: 0.5
-              },
-              borderWidth: BorderWidth,
-              shadowBlur: 40,
-              borderColor: "#53f1f2",
-              shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+          radius: ['65%', '70%'],
+          center: ['40%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 300,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          },{
+            value: 220,
+            itemStyle: linearGradient2
+          },{
+            value: 80,
+            itemStyle: {
+              normal: {
+                color: '#0c266a'
+              }
+            }
+          }]
+        },{
+          name: '2017年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['55%', '60%'],
+          center: ['40%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
             }
           },
           data: [{
-            value: 2,
-            name: '20%'
-          },{
-            value: 3,
-            name: '',
-            itemStyle: placeHolderStyle
-          }, {
-            value: 0,
-            itemStyle: {normal:{color:'rgba(0,0,0,0)'}}
+            value: 300,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          },{
+            value: 210,
+            itemStyle: linearGradient3
+          },{
+            value: 90,
+            itemStyle: {
+              normal: {
+                color: '#03414f'
+              }
+            }
           }]
-        }, {
-          name: '次要',
+        },{
+          name: '2016年',
           type: 'pie',
           clockWise: false,
+          startAngle: 0,
           hoverAnimation: false,
-          radius: [80, 81],
-          itemStyle: {
-            normal: {
-              label: {
-                show: false
-              },
-              labelLine: {
-                show: false,
-                length: 100,
-                smooth: 0.5
-              },
-              borderWidth: BorderWidth,
-              shadowBlur: 40,
-              borderColor: "#4ebefd",
-              shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+          radius: ['45%', '50%'],
+          center: ['40%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
             }
           },
           data: [{
-            value: 3,
-            name: '30%'
-          }, {
-            value: 2,
-            name: '',
-            itemStyle: placeHolderStyle
-          }, {
-            value: 0,
-            itemStyle: {normal:{color:'rgba(0,0,0,0)'}}
+            value: 300,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          },{
+            value: 150,
+            itemStyle: linearGradient4
+          },{
+            value: 150,
+            itemStyle: {
+              normal: {
+                color: '#142868'
+              }
+            }
+          }]
+        },{
+          name: '2015年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['35%', '40%'],
+          center: ['40%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 300,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          },{
+            value: 150,
+            itemStyle: linearGradient5
+          },{
+            value: 150,
+            itemStyle: {
+              normal: {
+                color: '#373546'
+              }
+            }
+          }]
+        },{
+          name: '2014年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['25%', '30%'],
+          center: ['40%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 300,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          },{
+            value: 50,
+            itemStyle: linearGradient6
+          },{
+            value: 250,
+            itemStyle: {
+              normal: {
+                color: '#35483f'
+              }
+            }
+          }]
+        },{
+          name: '2013年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['15%', '20%'],
+          center: ['40%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 300,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 0, 0, 0)'
+              }
+            }
+          },{
+            value: 50,
+            itemStyle: linearGradient7
+          },{
+            value: 250,
+            itemStyle: {
+              normal: {
+                color: '#0f3541'
+              }
+            }
           }]
         }]
       }
@@ -151,8 +442,147 @@ export default {
   .chartsdom {
     left: 23px;
     top: 15px;
-    width: 90%;
+    width: 100%;
     height: 90%;
   }
+
+  .updef {
+    position: absolute;
+    width: 75%;
+    height: 12px;
+    left: 12px;
+    top: 42%;
+    background: rgba(6, 21, 104, 0.5);
+    border-radius: 4px;
+    box-shadow: 0px 0px 10px #066fe2 inset;
+  }
+  .definfo {
+    position: absolute;
+    top: 50%;
+    transform: translate(0%,-50%);
+    white-space: nowrap;
+    font-size: 14px;
+    color: #fff;
+    span {
+      &:nth-child(1) {
+        display: block;
+        width: 45px;
+        height: 45px;
+        line-height: 45px;
+        text-align: center;
+      }
+      &:nth-child(2) {
+        display: block;
+        position: absolute;
+        width: 0;
+        margin-left: 21px;
+      }
+    }
+
+    &.definfo0 {
+      margin-top: -83px;
+      margin-left: 34%;
+      span {
+        &:nth-child(1) {
+          background: url(../../assets/img/icon_ls.png) repeat 0 0 !important;
+        }
+        &:nth-child(2) {
+          height: 62px;
+          border: 1px dashed #3a962f;
+        }
+      }
+    }
+    &.definfo1 {
+      margin-top: -112px;
+      margin-left: 41%;
+      span {
+        &:nth-child(1) {
+          background: url(../../assets/img/icon_hs.png) repeat 0 0 !important;
+        }
+        &:nth-child(2) {
+          height: 100px;
+          border: 1px dashed #fff600;
+        }
+      }
+    }
+    &.definfo2 {
+      margin-top: -109px;
+      margin-left: 27%;
+      span {
+        &:nth-child(1) {
+          background: url(../../assets/img/icon_cs.png) repeat 0 0 !important;
+        }
+        &:nth-child(2) {
+          height: 112px;
+          border: 1px dashed #ff9232;
+        }
+      }
+    }
+    &.definfo3 {
+      margin-top: -58px;
+      margin-left: 23%;
+      span {
+        &:nth-child(1) {
+          background: url(../../assets/img/icon_zs.png) repeat 0 0 !important;
+        }
+        &:nth-child(2) {
+          height: 66px;
+          border: 1px dashed #5e50e5;
+        }
+      }
+    }
+    &.definfo4 {
+      margin-top: -92px;
+      margin-left: 18%;
+      span {
+        &:nth-child(1) {
+          background: url(../../assets/img/icon_ml.png) repeat 0 0 !important;
+        }
+        &:nth-child(2) {
+          height: 99px;
+          border: 1px dashed #00c172;
+        }
+      }
+    }
+    &.definfo5 {
+      margin-top: -65px;
+      margin-left: 45%;
+      span {
+        &:nth-child(1) {
+          background: url(../../assets/img/icon_sl.png) repeat 0 0 !important;
+        }
+        &:nth-child(2) {
+          height: 118px;
+          border: 1px dashed #1342f1;
+        }
+      }
+    }
+    &.definfo6 {
+      margin-top: -88px;
+      margin-left: 52%;
+      span {
+        &:nth-child(1) {
+          background: url(../../assets/img/icon_ql.png) repeat 0 0 !important;
+        }
+        &:nth-child(2) {
+          height: 141px;
+          border: 1px dashed #0681fd;
+        }
+      }
+    }
+    &.definfo7 {
+      margin-top: -70px;
+      margin-left: 59%;
+      span {
+        &:nth-child(1) {
+          background: url(../../assets/img/icon_qql.png) repeat 0 0 !important;
+        }
+        &:nth-child(2) {
+          height: 117px;
+          border: 1px dashed #2bcbe6;
+        }
+      }
+    }
+  }
 }
 </style>

src/components/rotateColorful/index.vue

@@ -1,5 +1,10 @@
+<!--
+ 描述: 旋转多彩图
+ 作者: Jack Chen
+ 日期: 2020-04-19
+-->
+
 <template>
-  <!-- 旋转多彩图 -->
   <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">旋转多彩图</div> 

src/components/scanRadius/index.vue

@@ -1,5 +1,10 @@
+<!--
+ 描述: 扫描半径图
+ 作者: Jack Chen
+ 日期: 2020-04-19
+-->
+
 <template>
-  <!-- 扫描半径图 -->
   <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">扫描半径图</div> 

src/components/scrollArc/index.vue

@@ -1,5 +1,10 @@
+<!--
+ 描述: 滚动弧形线
+ 作者: Jack Chen
+ 日期: 2020-04-20
+-->
+
 <template>
-  <!-- 滚动弧形线 -->
   <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">滚动弧形线</div> 
@@ -40,8 +45,8 @@ export default {
                 offset: 1,
                 color: '#5d83ff'
               },{
-                  offset: 0,
-                  color: 'rgba(255, 255, 255, 0)'
+                offset: 0,
+                color: 'rgba(255, 255, 255, 0)'
               }])
             }
           },
@@ -85,8 +90,8 @@ export default {
                 offset: 0,
                 color: '#5d83ff'
               },{
-                  offset: 1,
-                  color: 'rgba(0, 0, 0, 0)'
+                offset: 1,
+                color: 'rgba(0, 0, 0, 0)'
               }]),
             }
           },

src/components/sinan/index.vue

@@ -1,5 +1,10 @@
+<!--
+ 描述: 司南排名图
+ 作者: Jack Chen
+ 日期: 2020-04-18
+-->
+
 <template>
-  <!-- 司南排名图 -->
   <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">司南排名图</div> 

src/components/szBar/index.vue

@@ -1,5 +1,10 @@
+<!--
+ 描述: 双轴柱状图
+ 作者: Jack Chen
+ 日期: 2020-04-27
+-->
+
 <template>
-  <!-- 双轴柱状图 -->
   <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">双轴柱状图</div> 
@@ -44,6 +49,20 @@ export default {
         {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]},
+      ];
 
       this.option = {
         xAxis: {
@@ -79,14 +98,16 @@ export default {
             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,
@@ -94,7 +115,9 @@ export default {
               symbol: 'circle',
               itemStyle: {
                 normal: {
-                  color: '#eb9b44'
+                  color: '#eb9b44',
+                  shadowColor: '#eb9b44',
+                  shadowBlur: 20
                 }
               },
               symbolSize: [10, 10], // 容器大小
@@ -109,14 +132,16 @@ export default {
             stack: 'one',
             itemStyle: {
               normal: {
-                color: new echarts.graphic.LinearGradient(
-                  0, 0, 0, 1,
-                  [
-                    {offset: 0, color: 'rgba(255,255,255,0)'},
-                    {offset: 0.5, color: '#774a75'},
-                    {offset: 1, color: '#b34d69'},
-                  ]
-                )
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0, 
+                  color: 'rgba(255,255,255,0)'
+                },{
+                  offset: 0.5, 
+                  color: '#774a75'
+                },{
+                  offset: 1, 
+                  color: '#b34d69'
+                }])
               }
             },
             barWidth: barWidth,
@@ -124,12 +149,14 @@ export default {
               symbol: 'circle',
               itemStyle: {
                 normal: {
-                  color: '#b34d69'
+                  color: '#b34d69',
+                  shadowColor: '#b34d69',
+                  shadowBlur: 20
                 }
               },
               symbolSize: [8, 8], 
               symbolOffset: [0, 0],
-              data: dataCoord,
+              data: dataCoord2,
             },
             data: this.yData2
           }

src/components/toast/index.js

@@ -1,3 +1,9 @@
+/*
+ * 描述: 消息提示框组件封装
+ * 作者: Jack Chen
+ * 日期: 2020-04-18
+ */
+
 import Vue from 'vue'
 import Toast from './index.vue'
   

src/components/toast/index.vue

@@ -1,3 +1,9 @@
+<!--
+ 描述: 消息提示框模板
+ 作者: Jack Chen
+ 日期: 2020-04-18
+-->
+
 <template>
   <transition name="fade">
     <div class="toast-container" v-if="visible">  

src/main.js

@@ -6,7 +6,6 @@ import store from './store'
 import vueParticles from 'vue-particles'
 import Vcomp from './components/index'
 import Toast from './components/toast'
-// import $ from 'jquery'
 
 import '@/assets/styles/base.scss'
 import '@/assets/styles/common.scss'

src/views/Home.vue

@@ -1,3 +1,9 @@
+<!--
+ 描述: 酷屏首页模板
+ 作者: Jack Chen
+ 日期: 2020-04-29
+-->
+
 <template>
   <div class="home-container">
   	<div class="wrap" ref="editor">
@@ -11,6 +17,9 @@
       <szBar />
 
       <ringPin />
+      <circleRunway />
+
+      <div class="divider"></div>
 
     </div>
     
@@ -72,6 +81,13 @@ export default {
       border: none; 
       overflow: hidden;
     }
+    .divider {
+      position: absolute;
+      left: 50px;
+      top: 2000px;
+      width: 90%;
+      height: 50px;
+    }
 
   }
 }	

src/views/Login.vue

@@ -1,3 +1,9 @@
+<!--
+ 描述: 登录模板
+ 作者: Jack Chen
+ 日期: 2020-04-18
+-->
+
 <template>
   <div class="login-container">
   	<div class="layer">