feat: 新建电商可视化

README.md

@@ -135,7 +135,7 @@ yarn build
 
 
 ```
-│  vue.config.js                     // webpack配置              
+│  vue.config.js                     // webpack配置
 ├─public
 │      favicon.ico                   // ico图标
 │      index.html                    // 入口html文件
@@ -143,52 +143,52 @@ yarn build
     │  App.vue                       // 根组件
     │  main.js                       // 程序入口文件
     ├─assets
-    │  ├─iconfont                     // 引用阿里巴巴矢量图标库   
-    │  ├─img                          // 存放公共图片文件夹      
+    │  ├─iconfont                     // 引用阿里巴巴矢量图标库
+    │  ├─img                          // 存放公共图片文件夹
     │  ├─js
     │  │      utils.js                // 封装工具类方法
     │  └─styles
     │      │  base.scss               // 基础样式文件
     │      │  common.scss             // 公用样式文件
-    │      └─fonts                    // 字体库文件        
+    │      └─fonts                    // 字体库文件
     ├─components
     │  │  index.js                    // 封装组件库
     │  ├─bar3d                        // 3D立体柱状图
-    │  ├─bgAnimation                  // 登录界面背景图动画      
-    │  ├─cakeLinkage                  // 柱饼组合联动    
-    │  ├─circleNesting                // 圆环套圆环   
-    │  ├─circleRunway                 // 环形跑道图   
-    │  ├─colorfulArea                 // 多彩轮播面积     
-    │  ├─colorfulRadar                // 多彩雷达 
+    │  ├─bgAnimation                  // 登录界面背景图动画
+    │  ├─cakeLinkage                  // 柱饼组合联动
+    │  ├─circleNesting                // 圆环套圆环
+    │  ├─circleRunway                 // 环形跑道图
+    │  ├─colorfulArea                 // 多彩轮播面积
+    │  ├─colorfulRadar                // 多彩雷达
     │  ├─companySummary
     │  │      business.vue            // 业务范围
     │  │      distrbution.vue         // 客户分布
     │  │      history.vue             // 发展历程
     │  │      income.vue              // 营业收入
     │  │      talent.vue              // 人才队伍
-    │  │      wordCloud.vue           // 产品热词    
-    │  ├─dynamicLine                  // 动态轮播折线图   
-    │  ├─dynamicList                  // 动态列表动画   
-    │  ├─flashCloud                   // 闪动云  
-    │  ├─gauge                        // 仪表盘   
-    │  ├─modal                        // 自定义全局模态框   
-    │  ├─pyramid                      // 金字塔动画   
-    │  ├─pyramidTrend                 // 金字塔趋势  
-    │  ├─rainbow                      // 彩虹轨道图    
-    │  ├─ringPie                      // 环形饼图    
-    │  ├─ringPin                      // 环形气泡图   
-    │  ├─rotateColorful               // 旋转多彩图   
-    │  ├─scanRadius                   // 扫描半径图 
-    │  ├─scrollArc                    // 滚动弧形线  
-    │  ├─seamless                     // 新闻无缝滚动 
-    │  ├─sinan                        // 司南排名图  
-    │  ├─staffMix                     // 人员占比   
-    │  ├─szBar                        // 双轴柱状图 
-    │  ├─toast 
+    │  │      wordCloud.vue           // 产品热词
+    │  ├─dynamicLine                  // 动态轮播折线图
+    │  ├─dynamicList                  // 动态列表动画
+    │  ├─flashCloud                   // 闪动云
+    │  ├─gauge                        // 仪表盘
+    │  ├─modal                        // 自定义全局模态框
+    │  ├─pyramid                      // 金字塔动画
+    │  ├─pyramidTrend                 // 金字塔趋势
+    │  ├─rainbow                      // 彩虹轨道图
+    │  ├─ringPie                      // 环形饼图
+    │  ├─ringPin                      // 环形气泡图
+    │  ├─rotateColorful               // 旋转多彩图
+    │  ├─scanRadius                   // 扫描半径图
+    │  ├─scrollArc                    // 滚动弧形线
+    │  ├─seamless                     // 新闻无缝滚动
+    │  ├─sinan                        // 司南排名图
+    │  ├─staffMix                     // 人员占比
+    │  ├─szBar                        // 双轴柱状图
+    │  ├─toast
     │  │      index.js                // 注册全局消息提示框组件
     │  │      index.vue               // 自定义消息提示框模板
     │  └─waterPolo
-    │          index.vue              // 水球图、水波图   
+    │          index.vue              // 水球图、水波图
     ├─router
     │      index.js                   // 单页面路由注册组件
     ├─store

package.json

@@ -40,9 +40,7 @@
     "less": "^4.2.0",
     "less-loader": "6.x",
     "mockm": "^1.1.27-alpha.10",
-    "node-sass": "^4.13.1",
     "prettier": "^2.2.1",
-    "sass-loader": "^8.0.2",
     "unocss": "^0.57.6",
     "vue-count-to": "^1.0.13",
     "vue-particles": "^1.0.9",

src/components/Customize/map/index.vue

@@ -402,7 +402,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .chartsdom {
   width: 980px;
   height: 760px;

src/components/bar3d/index.vue

@@ -1,195 +0,0 @@
-<!--
- 描述: 3D立体柱状图
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
-<template>
-  <div class="wrap-container trigle">
-    <div class="bar bar-img"></div>
-    <div class="bar bar-img1"></div>
-    <div class="bar bar-img2"></div>
-
-    <div class="chartsdom" id="chart_3d"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `bar3d`,
-  data() {
-    return {
-      option: null,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_3d`))
-      let xData = [`20-25`, `25-30`, `30-35`, `35-40`, `40-45`, `45-50`]
-      let days = [`1`, `2`, `3`, `4`, `5`, `6`]
-      let sex = [`女`, `男`]
-      let data = [
-        [0, 0, 3, sex[0], xData[0], 500, 25],
-        [0, 1, 2.5, sex[0], xData[3], 1000, 35],
-        [0, 2, 1.5, sex[1], xData[4], 3000, 5],
-        [0, 3, 1, sex[1], xData[1], 300, 15],
-        [0, 4, 2, sex[0], xData[2], 500, 55],
-        [0, 5, 3, sex[0], xData[3], 1500, 45],
-
-        [1, 5, 6, sex[1], xData[0], 300, 25],
-        [1, 1, 4, sex[0], xData[1], 500, 22],
-        [1, 2, 2, sex[0], xData[2], 1500, 38],
-        [1, 3, 1.5, sex[1], xData[3], 2500, 25],
-        [1, 4, 3, sex[0], xData[4], 3500, 49],
-        [1, 0, 4, sex[1], xData[5], 5500, 15],
-
-        [2, 2, 3, sex[1], xData[0], 300, 25],
-        [2, 1, 2, sex[0], xData[4], 1300, 25],
-        [2, 2, 5, sex[0], xData[2], 900, 25],
-        [2, 5, 1, sex[1], xData[3], 2000, 25],
-        [2, 0, 3, sex[1], xData[1], 2300, 25],
-        [2, 0, 10, sex[1], xData[5], 3500, 25],
-
-        [3, 2, 3, sex[0], xData[5], 500, 35],
-        [3, 3, 2, sex[0], xData[4], 2300, 55],
-        [3, 2, 1, sex[1], xData[3], 3300, 15],
-        [3, 5, 5, sex[1], xData[2], 500, 10],
-        [3, 1, 2, sex[1], xData[1], 1000, 35],
-        [3, 0, 1, sex[0], xData[0], 300, 45],
-
-        [4, 2, 3, sex[1], xData[1], 600, 25],
-        [4, 0, 5, sex[0], xData[0], 500, 15],
-        [4, 1, 3.5, sex[1], xData[3], 4000, 5],
-        [4, 4, 7, sex[0], xData[0], 300, 75],
-        [4, 1, 0, sex[1], xData[5], 3000, 85],
-        [3, 1, 3, sex[0], xData[2], 2500, 65],
-
-        [5, 2, 3, sex[0], xData[2], 500, 15],
-        [5, 1, 2, sex[1], xData[3], 3300, 52],
-        [5, 1, 5, sex[0], xData[4], 1000, 88],
-        [5, 5, 8, sex[1], xData[0], 200, 12],
-        [5, 2, 7, sex[0], xData[0], 300, 45],
-        [3, 2, 2, sex[1], xData[1], 5000, 51],
-      ]
-
-      this.option = {
-        tooltip: {
-          borderColor: `#8a704e`,
-          borderWidth: 1,
-          padding: 15,
-          formatter: (params) => {
-            let html = `${params.seriesName} <br> <span style="color: #fff;">性别：${params.value[3]} <br> 年龄：${params.value[4]}岁<br> 贷款金额：${params.value[5]} <br> 总人数：${params.value[6]}</span>`
-            return html
-          },
-          textStyle: {
-            color: `#8a704e`,
-            fontSize: 16,
-          },
-        },
-        xAxis3D: {
-          type: `category`,
-          data: xData,
-        },
-        yAxis3D: {
-          type: `category`,
-          data: days,
-        },
-        zAxis3D: {
-          type: `value`,
-        },
-        grid3D: {
-          show: false,
-          boxWidth: 160,
-          boxDepth: 80,
-          viewControl: {
-            alpha: 10,
-            beta: 15,
-          },
-        },
-        series: [
-          {
-            type: `bar3D`,
-            name: `当前值`,
-            data: data.map((item) => {
-              return {
-                value: [
-                  item[1],
-                  item[0],
-                  item[2],
-                  item[3],
-                  item[4],
-                  item[5],
-                  item[6],
-                ],
-              }
-            }),
-            shading: `lambert`,
-            label: {
-              show: false,
-            },
-            itemStyle: {
-              color: `#0084ff`,
-              opacity: 0.8,
-            },
-            emphasis: {
-              label: {
-                show: false,
-              },
-              itemStyle: {
-                color: `#0084ff`,
-              },
-            },
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.trigle {
-  left: 644px;
-  top: 2409px;
-  width: 620px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-
-  .bar {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    &.bar-img {
-      bottom: 0;
-      background: url(../../assets/img/bk_circle.png) no-repeat center 97%;
-      background-size: 100%;
-      filter: hue-rotate(180deg);
-    }
-    &.bar-img1 {
-      bottom: 30%;
-      background: url(../../assets/img/bk_circle1.png) no-repeat center 97%;
-      background-size: 75%;
-      filter: hue-rotate(180deg);
-    }
-    &.bar-img2 {
-      bottom: 60%;
-      background: url(../../assets/img/bk_circle2.png) no-repeat center 97%;
-      background-size: 50%;
-      filter: hue-rotate(180deg);
-    }
-  }
-}
-</style>

src/components/bgAnimation/index.vue

@@ -19,7 +19,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="less">
 .slide-box {
   position: fixed;
   width: 100%;

src/components/bgBox/index.vue

@@ -34,19 +34,6 @@
           <div class="time font-size-22px">{{ dateBox.time }}</div>
           <div class="date font-size-16px">{{ dateBox.date }}</div>
         </div>
-        <div class="line"></div>
-        <div class="weather">
-          <i :class="[`iconfont`, weather.天气图标]"></i>
-        </div>
-        <div class="temperature">
-          <img class="pl-20px" src="@/assets/img2/综合总览/编组 6.png" alt="" />
-          <span class="font-size-30px pl-20px">{{ weather.温度 }}</span>
-          <img src="@/assets/img2/综合总览/编组 8.png" alt="" />
-        </div>
-        <div class="line"></div>
-        <div class="headPortrait">
-          <img src="@/assets/img2/综合总览/编组 58.png" class="w-44px" alt="" />
-        </div>
       </div>
     </div>
     <div class="box">
@@ -72,11 +59,6 @@ export default {
         time: ``,
         date: ``,
       },
-      weather: {
-        温度: ``,
-        天气: ``,
-        天气图标: ``,
-      },
     }
   },
   props: {
@@ -106,10 +88,10 @@ export default {
           time: 1000,
           fn: this.currentTime,
         },
-        {
-          time: 1000 * 900,
-          fn: this.currentWeather,
-        },
+        // {
+        //   time: 1000 * 900,
+        //   fn: this.currentWeather,
+        // },
       ],
       this
     )
@@ -118,16 +100,6 @@ export default {
     screenSize(this.$refs.editor)
   },
   methods: {
-    async currentWeather() {
-      const data = await this.$http.get(`/api/currentWeather`, {
-        params: {
-          adcode: `520600`,
-        },
-      })
-      const item = getWeather(data.天气)
-      this.weather = data
-      this.weather.天气图标 = item.icon || `icon-duoyun`
-    },
     async currentTime() {
       const data = {
         date: dayjs(Date.now()).format(`YYYY/MM/DD`),
@@ -152,6 +124,7 @@ export default {
     display: flex;
     width: 100%;
     z-index: 10;
+    //background-image: url("~@/assets/img2/top_nav.png");
     .line {
       width: 0px;
       height: 41px;
@@ -210,11 +183,6 @@ export default {
           color: rgba(255, 255, 255, 0.6);
         }
       }
-      .weather {
-        i {
-          font-size: 44px;
-        }
-      }
       .temperature {
         // img {
         //   padding: 0 20px;

src/components/cakeLinkage/index.vue

@@ -1,531 +0,0 @@
-<!--
- 描述: 柱饼组合联动
- 作者: Jack Chen
- 日期: 2020-04-30
--->
-
-<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>
-</template>
-
-<script>
-export default {
-  name: `cakeLinkage`,
-  data() {
-    return {
-      option: null,
-      dataMap: {},
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    dataFormatter(obj) {
-      let pList = [`金融类`, `政务类`, `医疗类`, `互联网类`]
-      let temp
-      for (let y = 2016; y <= 2020; 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]
-          obj[y][i] = {
-            name: pList[i],
-            value: temp[i],
-          }
-        }
-        obj[y + `max`] = Math.floor(max / 100) * 100
-        obj[y + `sum`] = sum
-      }
-      return obj
-    },
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_bp`))
-      let itemStyleJR = {
-        color: `#d6d638`,
-      }
-      let itemStyleZW = {
-        color: `#00c86c`,
-      }
-      let itemStyleYL = {
-        color: `#07d8ff`,
-      }
-      let itemStyleIT = {
-        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],
-      })
-
-      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],
-      })
-
-      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],
-      })
-
-      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],
-      })
-
-      this.option = {
-        baseOption: {
-          timeline: {
-            axisType: `category`,
-            autoPlay: true,
-            playInterval: 2000,
-            data: [
-              `2016-01-01`,
-              `2017-01-01`,
-              `2018-01-01`,
-              `2019-01-01`,
-              `2020-01-01`,
-            ],
-            lineStyle: {
-              color: `#179bf1`,
-            },
-            left: 30,
-            right: 30,
-            label: {
-              color: `#2867a8`,
-              formatter(s) {
-                return new Date(s).getFullYear()
-              },
-            },
-            checkpointStyle: {
-              color: `#01d8ff`,
-              symbolSize: 10,
-              borderColor: `rgba(1, 216, 255, 0.5)`,
-              borderWidth: 5,
-            },
-            controlStyle: {
-              showPlayBtn: false,
-              borderColor: `#01bde6`,
-              itemGap: 20,
-            },
-            itemStyle: {
-              // color: '#004b85',
-              borderColor: `#004b85`,
-              borderWidth: 1,
-              shadowColor: `rgba(1, 216, 225, 0.5)`,
-              shadowBlur: 5,
-            },
-            emphasis: {
-              label: {
-                color: `#01d8ff`,
-                show: false,
-              },
-              checkpointStyle: {
-                color: `#01d8ff`,
-                borderColor: `rgba(1, 216, 255, 0.5)`,
-                borderWidth: 5,
-              },
-              controlStyle: {
-                borderColor: `rgba(1, 216, 255, 0.5)`,
-              },
-              itemStyle: {
-                color: `#01d8ff`,
-                borderColor: `rgba(1, 216, 225, 0.5)`,
-                borderWidth: 5,
-              },
-            },
-          },
-          // tooltip: {
-          //   trigger: 'item'
-          // },
-          grid: {
-            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,
-                  },
-                },
-                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,
-                  },
-                ],
-              },
-              {
-                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)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 50px;
-  top: 1548px;
-  width: 586px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/components/circleNesting/index.vue

@@ -1,314 +0,0 @@
-<!--
- 描述: 圆环套圆环
- 作者: Jack Chen
- 日期: 2020-05-03
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">圆环套圆环</div>
-      <div class="sn-body">
-        <div class="defelement">
-          <div class="wrap-container">
-            <div class="chartsdom" id="chart_circle"></div>
-
-            <div class="svg-dom">
-              <svg
-                width="100%"
-                height="100%"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <path
-                  id="svg_2"
-                  d="m117,210c0,-51.65746 41.61878,-93.5 93,-93.5c51.38122,0 93,41.84254 93,93.5c0,51.65746 -41.61878,93.5 -93,93.5c-51.38122,0 -93,-41.84254 -93,-93.5z"
-                  stroke="#bfbfbf"
-                  fill="none"
-                  stroke-dasharray="3,3"
-                  xmlns="http://www.w3.org/2000/svg"
-                ></path>
-                <path
-                  id="svg_3"
-                  d="m134,210c0,-41.71271 34.01105,-75.5 76,-75.5c41.98895,0 76,33.78729 76,75.5c0,41.71271 -34.01105,75.5 -76,75.5c-41.98895,0 -76,-33.78729 -76,-75.5z"
-                  stroke="#bfbfbf"
-                  fill="none"
-                  stroke-dasharray="3,3"
-                  xmlns="http://www.w3.org/2000/svg"
-                ></path>
-              </svg>
-            </div>
-
-            <div class="cir-arrow cir-arrow1"></div>
-            <div class="cir-arrow cir-arrow2"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `circleNesting`,
-  data() {
-    return {
-      option: null,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_circle`))
-      let itemStyle = {
-        normal: {
-          color: `rgba(0, 0, 0, 0)`,
-        },
-      }
-
-      this.option = {
-        color: [`#5d8ef8`, `#638bfd`, `#1dd1c1`],
-        series: [
-          {
-            // name: '2020年',
-            type: `pie`,
-            clockWise: false,
-            startAngle: 90,
-            hoverAnimation: false,
-            radius: [`68%`, `70%`],
-            center: [`50%`, `50%`],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            data: [
-              {
-                value: 10,
-                name: `100%`,
-                itemStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 1,
-                        color: `#628cfd`,
-                      },
-                      {
-                        offset: 0,
-                        color: `#20cdc4`,
-                      },
-                    ]),
-                  },
-                },
-              },
-            ],
-          },
-          {
-            // name: '交易占比'
-            type: `pie`,
-            clockWise: false,
-            startAngle: 90,
-            hoverAnimation: false,
-            radius: [`53%`, `56%`],
-            center: [`50%`, `50%`],
-            label: {
-              normal: {
-                show: true,
-                fontSize: 16,
-                lineHeight: 22,
-                formatter: (param) => {
-                  return param.name + `\n` + param.value + `%`
-                },
-              },
-            },
-            labelLine: {
-              smooth: true,
-              normal: {
-                show: true,
-                length: 20,
-                length2: 20,
-                lineStyle: {
-                  type: `dotted`,
-                },
-              },
-            },
-            data: [
-              {
-                value: 64,
-                name: `交易比`,
-                itemStyle: {
-                  normal: {
-                    color: `#638bfd`,
-                  },
-                },
-              },
-              {
-                value: 36,
-                name: ``,
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            // name: '通道占比'
-            type: `pie`,
-            clockWise: false,
-            startAngle: 0,
-            hoverAnimation: false,
-            radius: [`43%`, `46%`],
-            center: [`50%`, `50%`],
-            label: {
-              normal: {
-                show: true,
-                fontSize: 16,
-                lineHeight: 22,
-                formatter: (param) => {
-                  return param.name + `\n` + param.value + `%`
-                },
-              },
-            },
-            labelLine: {
-              smooth: true,
-              normal: {
-                show: true,
-                length: 20,
-                length2: 50,
-                lineStyle: {
-                  type: `dotted`,
-                },
-              },
-            },
-            data: [
-              {
-                value: 36,
-                name: `通道比`,
-                itemStyle: {
-                  normal: {
-                    color: `#1dd1c1`,
-                  },
-                },
-              },
-              {
-                value: 64,
-                name: ``,
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 1436px;
-  top: 2837px;
-  width: 432px;
-  height: 400px;
-  .defelement {
-    position: absolute;
-    height: 420px;
-    border: none;
-    top: -40px;
-    left: 6px;
-    width: 420px;
-    overflow: hidden;
-  }
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-
-  .svg-dom {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-  }
-  .cir-arrow {
-    width: 17px;
-    height: 17px;
-    offset-distance: 0%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    &.cir-arrow1 {
-      background: url(../../assets/img/icon_circle1.png) no-repeat 50% 50%;
-      -webkit-animation: cir-arrow1 5s linear infinite;
-      animation: cir-arrow1 5s linear infinite;
-      offset-path: path(
-        'm117,210c0,-51.65746 41.61878,-93.5 93,-93.5c51.38122,0 93,41.84254 93,93.5c0,51.65746 -41.61878,93.5 -93,93.5c-51.38122,0 -93,-41.84254 -93,-93.5z'
-      );
-    }
-    &.cir-arrow2 {
-      background: url(../../assets/img/icon_circle2.png) no-repeat 50% 50%;
-      -webkit-animation: cir-arrow2 5s linear infinite;
-      animation: cir-arrow2 5s linear infinite;
-      offset-path: path(
-        'm134,210c0,-41.71271 34.01105,-75.5 76,-75.5c41.98895,0 76,33.78729 76,75.5c0,41.71271 -34.01105,75.5 -76,75.5c-41.98895,0 -76,-33.78729 -76,-75.5z'
-      );
-    }
-  }
-}
-
-@-webkit-keyframes cir-arrow1 {
-  0% {
-    offset-distance: 0%;
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 100%;
-    opacity: 1;
-  }
-}
-@keyframes cir-arrow1 {
-  0% {
-    offset-distance: 0%;
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 100%;
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes cir-arrow2 {
-  0% {
-    offset-distance: 100%;
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 0%;
-    opacity: 1;
-  }
-}
-@keyframes cir-arrow2 {
-  0% {
-    offset-distance: 100%;
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 0%;
-    opacity: 1;
-  }
-}
-</style>

src/components/circleRunway/index.vue

@@ -1,259 +0,0 @@
-<!--
- 描述: 环形跑道图
- 作者: 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_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>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `circleRunway`,
-  data() {
-    return {
-      option: null,
-      arrData: [
-        {
-          name: `联盟链`,
-          number: 725,
-          percentage: 41.5,
-        },
-        {
-          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 = {
-        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: {
-                  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,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            data: [
-              {
-                value: 3,
-                name: `50%`,
-                itemStyle: {
-                  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,
-              },
-            },
-            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() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 974px;
-  top: 1120px;
-  width: 432px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 90%;
-  }
-
-  .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/colorfulArea/index.vue

@@ -1,318 +0,0 @@
-<!--
- 描述: 多彩轮播面积
- 作者: Jack Chen
- 日期: 2020-05-03
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">多彩轮播面积</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="chart_cra"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `colorfulArea`,
-  data() {
-    return {
-      option: null,
-      dataMap: {},
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    dataFormatter(obj) {
-      let pList = [
-        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
-        20, 21, 22, 23, 24,
-      ]
-      let temp
-      for (let x = 1; x <= 5; x++) {
-        let max = 0
-        let sum = 0
-        temp = obj[x]
-        for (let i = 0, l = temp.length; i < l; i++) {
-          max = Math.max(max, temp[i])
-          sum += temp[i]
-          obj[x][i] = {
-            name: pList[i],
-            value: temp[i],
-          }
-        }
-        obj[x + `max`] = Math.floor(max / 100) * 100
-        obj[x + `sum`] = sum
-      }
-      return obj
-    },
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_cra`))
-      let itemStyle = {
-        barBorderRadius: [15, 0],
-        color: `#0084ff`,
-      }
-
-      this.dataMap.dataType = this.dataFormatter({
-        5: [
-          96, 96, 96, 96, 96, 96, 96, 96, 96, 96, 96, 96, 85, 85, 85, 85, 85,
-          85, 98, 54, 50, 54, 54, 54, 54,
-        ],
-        4: [
-          86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 85, 95, 85, 85, 85,
-          85, 64, 64, 60, 64, 64, 64, 64,
-        ],
-        3: [
-          90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 95, 90, 91, 91, 91, 91, 91,
-          91, 54, 54, 50, 54, 54, 54, 54,
-        ],
-        2: [
-          76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 95, 95, 95, 95, 95,
-          95, 54, 54, 50, 54, 54, 54, 54,
-        ],
-        1: [
-          66, 66, 66, 66, 66, 66, 66, 66, 66, 96, 66, 66, 85, 85, 85, 85, 85,
-          85, 55, 55, 50, 55, 55, 55, 55,
-        ],
-      })
-
-      this.option = {
-        baseOption: {
-          timeline: {
-            axisType: `category`,
-            autoPlay: true,
-            playInterval: 1000,
-            data: [`5.1`, `5.2`, `5.3`, `5.4`, `5.5`],
-            left: 50,
-            right: 50,
-            top: 5,
-            lineStyle: {
-              color: `#122e96`,
-            },
-            label: {
-              color: `#fff`,
-            },
-            checkpointStyle: {
-              color: `#ef8c2f`,
-              symbolSize: 10,
-              borderColor: `rgba(239, 140, 47, 0.5)`,
-              borderWidth: 5,
-            },
-            controlStyle: {
-              showPlayBtn: false,
-              borderColor: `#122e96`,
-              itemGap: 20,
-            },
-            itemStyle: {
-              borderColor: `#122e96`,
-              borderWidth: 5,
-              // shadowColor: 'rgba(239, 140, 47, 0.5)',
-              // shadowBlur: 5
-            },
-            emphasis: {
-              label: {
-                color: `#ef8c2f`,
-                show: false,
-              },
-              checkpointStyle: {
-                color: `#ef8c2f`,
-                borderColor: `rgba(239, 140, 47, 0.5)`,
-                borderWidth: 5,
-              },
-              controlStyle: {
-                borderColor: `#122e96`,
-              },
-              itemStyle: {
-                color: `#ef8c2f`,
-                borderColor: `rgba(239, 140, 47, 0.5)`,
-                borderWidth: 5,
-              },
-            },
-          },
-          calculable: true,
-          grid: {
-            top: `25%`,
-            bottom: `12%`,
-          },
-          xAxis: [
-            {
-              type: `category`,
-              axisLabel: {
-                interval: 5,
-              },
-              data: [
-                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
-                18, 19, 20, 21, 22, 23, 24,
-              ],
-              splitLine: {
-                show: false,
-              },
-              offset: 10,
-              axisTick: {
-                show: true,
-                alignWithLabel: true,
-                interval: 5,
-                length: 10,
-                lineStyle: {
-                  color: `#59aec8`,
-                  width: 3,
-                },
-              },
-              axisLine: {
-                show: false,
-                lineStyle: {
-                  color: `#2867a8`,
-                },
-              },
-            },
-          ],
-          yAxis: [
-            {
-              type: `value`,
-              splitLine: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              axisLine: {
-                show: false,
-                lineStyle: {
-                  color: `#2867a8`,
-                },
-              },
-            },
-          ],
-          series: [
-            {
-              name: `多彩轮播面积`,
-              type: `line`,
-              markPoint: {
-                symbol: `pin`,
-                symbolSize: 40,
-                itemStyle: {
-                  normal: {
-                    color: `#ef8c2f`,
-                    shadowColor: `#ef8c2f`,
-                    shadowBlur: 15,
-                  },
-                },
-                data: [{ type: `max`, name: `最大值` }],
-              },
-              itemStyle: {
-                borderColor: `#1374e7`,
-                borderWidth: 10,
-                shadowBlur: 10,
-                shadowColor: `#1374e7`,
-                opacity: 0,
-              },
-              label: {
-                show: false,
-                // position: 'top',
-                // color: '#fff'
-              },
-              lineStyle: {
-                width: 2,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: `#17418d`,
-                  },
-                  {
-                    offset: 1,
-                    color: `#a56d42`,
-                  },
-                ]),
-              },
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                      offset: 0,
-                      color: `#1e4b4b`,
-                    },
-                    {
-                      offset: 1,
-                      color: `rgba(0, 0, 0, 0)`,
-                    },
-                  ]),
-                },
-              },
-              smooth: true,
-            },
-          ],
-        },
-        options: [
-          {
-            series: [
-              {
-                data: this.dataMap.dataType[`1`],
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            series: [
-              {
-                data: this.dataMap.dataType[`2`],
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            series: [
-              {
-                data: this.dataMap.dataType[`3`],
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            series: [
-              {
-                data: this.dataMap.dataType[`4`],
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            series: [
-              {
-                data: this.dataMap.dataType[`5`],
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 1306px;
-  top: 2408px;
-  width: 560px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/components/colorfulRadar/index.vue

@@ -1,163 +0,0 @@
-<!--
- 描述: 多彩雷达
- 作者: Jack Chen
- 日期: 2020-05-02
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">多彩雷达</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="chart_radar"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `colorfulRadar`,
-  data() {
-    return {
-      option: null,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_radar`))
-      this.option = {
-        tooltip: {
-          trigger: `axis`,
-        },
-        radar: [
-          {
-            indicator: [
-              { text: `外观`, max: 100 },
-              { text: `拍照`, max: 100 },
-              { text: `系统`, max: 100 },
-              { text: `性能`, max: 100 },
-              { text: `屏幕`, max: 100 },
-              { text: `折叠`, max: 100 },
-            ],
-            radius: `75%`,
-            center: [`50%`, `50%`],
-            name: {
-              textStyle: {
-                color: `#1883ff`,
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-            axisLine: {
-              show: true,
-              symbol: `arrow`,
-              symbolSize: [5, 7.5],
-              lineStyle: {
-                color: `#1883ff`,
-                type: `dashed`,
-              },
-            },
-            splitArea: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-          },
-        ],
-        series: [
-          {
-            type: `radar`,
-            areaStyle: {},
-            symbol: `none`,
-            itemStyle: {
-              normal: {
-                areaStyle: {
-                  type: `default`,
-                },
-              },
-            },
-            lineStyle: {
-              opacity: 0,
-            },
-            data: [
-              {
-                value: [35, 50, 30, 30, 40, 45],
-                name: `智能手机`,
-                itemStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: `#9c6b4e`,
-                      },
-                      {
-                        offset: 1,
-                        color: `#2a59ac`,
-                      },
-                    ]),
-                    lineStyle: {
-                      color: `#2a59ac`,
-                    },
-                  },
-                },
-              },
-              {
-                value: [70, 40, 55, 55, 30, 55],
-                name: `5G手机`,
-                itemStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: `#0855ca`,
-                      },
-                      {
-                        offset: 1,
-                        color: `#36a6c7`,
-                      },
-                    ]),
-                    lineStyle: {
-                      color: `#36a6c7`,
-                    },
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 1436px;
-  top: 1978px;
-  width: 432px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/components/companySummary/business.vue

@@ -1,214 +0,0 @@
-<!--
- 描述: 业务范围
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="business-container">
-    <div class="chart" id="chart_left1"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `business`,
-  data() {
-    return {}
-  },
-  mounted() {
-    this.getEchartLeft1()
-  },
-  methods: {
-    getEchartLeft1() {
-      // 实例化对象
-      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 lineY = []
-      for (let i = 0; i < charts.cityList.length; i++) {
-        let x = i
-        if (x > color.length - 1) {
-          x = color.length - 1
-        }
-        let data = {
-          name: charts.cityList[i],
-          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,
-            },
-            emphasis: {
-              shadowBlur: 15,
-              shadowColor: `rgba(0, 0, 0, 0.1)`,
-            },
-          },
-        }
-        lineY.push(data)
-      }
-
-      // 指定配置和数据
-      let option = {
-        color: color,
-        tooltip: {
-          trigger: `item`,
-        },
-        grid: {
-          borderWidth: 0,
-          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,
-              },
-            },
-            data: top10CityList,
-          },
-          {
-            type: `category`,
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: true,
-              inside: false,
-              textStyle: {
-                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
-                },
-              },
-            },
-          },
-        ],
-      }
-
-      // 把配置给实例对象
-      myChart.setOption(option, true)
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.business-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

src/components/companySummary/distribution.vue

@@ -1,230 +0,0 @@
-<!--
- 描述: 客户分布
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="distribution-container">
-    <div class="chart" id="chart_right2"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `distribution`,
-  data() {
-    return {}
-  },
-  mounted() {
-    this.getEchartRight2()
-  },
-  methods: {
-    getEchartRight2() {
-      let myChart = echarts.init(document.getElementById(`chart_right2`))
-      let option = {
-        color: [
-          `#EAEA26`,
-          `#906BF9`,
-          `#FE5656`,
-          `#01E17E`,
-          `#3DD1F9`,
-          `#FFAD05`,
-          `#4465fc`,
-        ],
-        tooltip: {
-          trigger: `item`,
-          formatter: `{b} : {c} ({d}%)`,
-        },
-        polar: {},
-        angleAxis: {
-          interval: 1,
-          type: `category`,
-          data: [],
-          z: 10,
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: `#0B4A6B`,
-              width: 5,
-              type: `solid`,
-            },
-          },
-          axisLabel: {
-            interval: 0,
-            show: true,
-            color: `#0B4A6B`,
-            margin: 8,
-            fontSize: 16,
-          },
-        },
-        radiusAxis: {
-          min: 40,
-          max: 120,
-          interval: 20,
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: `#0B3E5E`,
-              width: 1,
-              type: `solid`,
-            },
-          },
-          axisLabel: {
-            formatter: `{value} %`,
-            show: false,
-            padding: [0, 0, 20, 0],
-            color: `#0B3E5E`,
-            fontSize: 16,
-          },
-          splitLine: {
-            lineStyle: {
-              color: `#0B3E5E`,
-              width: 2,
-              type: `solid`,
-            },
-          },
-        },
-        calculable: true,
-        series: [
-          {
-            type: `pie`,
-            radius: [`6%`, `10%`],
-            hoverAnimation: false,
-            labelLine: {
-              normal: {
-                show: false,
-                length: 30,
-                length2: 50,
-              },
-              emphasis: {
-                show: false,
-              },
-            },
-            tooltip: {
-              show: false,
-            },
-            data: [
-              {
-                name: ``,
-                value: 0,
-                itemStyle: {
-                  normal: {
-                    color: `#0B4A6B`,
-                  },
-                },
-              },
-            ],
-          },
-          {
-            type: `pie`,
-            radius: [`90%`, `95%`],
-            hoverAnimation: false,
-            labelLine: {
-              normal: {
-                show: false,
-                length: 30,
-                length2: 50,
-              },
-              emphasis: {
-                show: false,
-              },
-            },
-            tooltip: {
-              show: false,
-            },
-            data: [
-              {
-                name: ``,
-                value: 0,
-                itemStyle: {
-                  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`,
-              },
-              emphasis: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: true,
-                length: 15,
-                length2: 50,
-                lineStyle: {
-                  type: `dotted`,
-                },
-              },
-              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: `湖北`,
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(option, true)
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.distribution-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

src/components/companySummary/history.vue

@@ -1,197 +0,0 @@
-<!--
- 描述: 发展历程
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <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 }"
-        >
-          {{ itemTit }}
-        </li>
-      </ul>
-      <div class="indicatorDots">
-        <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="(v, i) in itemCon" :key="i" class="content">
-            {{ v }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `history`,
-  data() {
-    return {
-      timer: null,
-      tabTitle: [`2015`, `2016`, `2017`, `2018`, `2019`, `2020`],
-      tabCon: [
-        [
-          `2015.10，公司成立，正式布局区块链、大数据方向`,
-          `2015.11，与国家超算吕梁云计算中心签订战略合作协议`,
-          `2015.12，建设高性能计算服务平台，基于区块链技术打造文创基础云平台`,
-        ],
-        [
-          `2016.03，公司提供的高性能计算服务得到中科院认可，就此达成合作`,
-          `2016.07，与国家超算广州中心签订战略合作协议，启动区块链底层公链开发技术论证`,
-          `2016.10，启动区块链底层公链开发，开拓数字资产管理业务`,
-          `2016.11，与国家超级计算长沙中心签订战略合作协议`,
-        ],
-        [
-          `2017.03，与国家级长沙经开区共建博士创新创业园`,
-          `2017.07，开发GBI区块链资讯信息平台`,
-          `2017.09，打造区块链信息服务平台，开拓区块链安全业务`,
-          `2017.12，区块链底层公链测试链上线运行，启动链上DAPP开发`,
-        ],
-        [
-          `2018.05，与长沙经开区共建区块链产业园，区块链底层公链上线运行`,
-          `2018.08，公链分布式存储网络正式运行`,
-          `2018.10，区块链安全技术检测中心正式运行，公链多侧链技术落地，链上应用上线`,
-          `2018.12，被评为中国区块链百强企业`,
-        ],
-        [
-          `2019.03，上线分布式存储系统UDFS，更新优壹号V2.0.0版，完成Ulord V2.0版白皮书全部规划`,
-          `2019.07，文创版权公共服务平台优版权正式上线`,
-          `2019.08，承担国家网信办区块链相关课题研究`,
-        ],
-        [
-          `2020.03，完成分布式计算框架和贡献证明算法的设计和开发`,
-          `2020.05，完成分布式计算资源动态调度和管理开发`,
-          `2020.10，推出链云计算生态，完成计算平台和API接口开发，完成优壹号对计算Dapp支持`,
-        ],
-      ],
-      cur: 0, // 默认选中第一个tab
-    }
-  },
-  mounted() {
-    this.getTimer()
-  },
-  methods: {
-    getTimer() {
-      this.timer = setInterval(() => {
-        this.cur++
-        if (this.cur == this.tabTitle.length) {
-          this.cur = 0
-        }
-      }, 2000)
-    },
-    handleMouseOver(index) {
-      this.cur = index
-      clearInterval(this.timer)
-    },
-    handleMouseOut() {
-      this.getTimer()
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.history-container {
-  margin: 0 0.125rem;
-
-  .tabs {
-    display: flex;
-
-    .tab-tilte {
-      li {
-        color: #fff;
-        background-color: rgba(36, 196, 255, 0.5);
-        text-align: center;
-        cursor: pointer;
-        font-size: 0.125rem;
-        width: 1rem;
-        height: 0.35rem;
-        line-height: 0.35rem;
-        margin-bottom: 0.175rem;
-        -webkit-border-radius: 5px;
-        -ms-border-radius: 5px;
-        -o-border-radius: 5px;
-        -moz-border-radius: 5px;
-        border-radius: 5px;
-
-        &.active {
-          background: linear-gradient(to right, #1b81bc, 20%, #24c4ff);
-          color: #fff;
-        }
-      }
-    }
-
-    .indicatorDots {
-      background-color: rgba(36, 196, 255, 0.5);
-      width: 1px;
-      height: 2.8rem;
-      margin: 0.0625rem 0 0 0.375rem;
-
-      span {
-        display: block;
-        height: 0.525rem;
-        margin-left: -0.0875rem;
-
-        &:after {
-          content: '';
-          display: block;
-          width: 0.125rem;
-          height: 0.125rem;
-          background: #ddd;
-          -webkit-border-radius: 50%;
-          -ms-border-radius: 50%;
-          -o-border-radius: 50%;
-          -moz-border-radius: 50%;
-          border-radius: 50%;
-          border: 2px solid #1b81bc;
-        }
-
-        &.active {
-          &:after {
-            background: #24c4ff;
-            -webkit-box-shadow: 0 0 0.125rem #1b81bc;
-            box-shadow: 0 0 0.125rem #1b81bc;
-          }
-        }
-      }
-    }
-
-    .tab-content {
-      display: flex;
-      align-items: center;
-
-      div {
-        margin-left: 0.1875rem;
-        color: #fff;
-
-        .content {
-          font-size: 0.175rem;
-          line-height: 0.275rem;
-          padding: 0.1rem 0;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/companySummary/income.vue

@@ -1,202 +0,0 @@
-<!--
- 描述: 营业收入
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="income-container">
-    <div class="chart" id="chart_left3"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `income`,
-  data() {
-    return {}
-  },
-  mounted() {
-    this.getEchartLeft3()
-  },
-  methods: {
-    getEchartLeft3() {
-      let myChart = echarts.init(document.getElementById(`chart_left3`))
-      let data = {
-        city: [`2015`, `2016`, `2017`, `2018`, `2019`, `2020`],
-        num: [`555`, `896`, `1935`, `2922`, `4508`, `5000`],
-      }
-
-      let option = {
-        tooltip: {
-          trigger: `axis`,
-          axisPointer: {
-            lineStyle: {
-              color: {
-                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
-              },
-            },
-          },
-          formatter: (value) => {
-            return value[0].name + `年营业收入：<br>` + value[0].value + `万元`
-          },
-        },
-        grid: {
-          top: `5%`,
-          left: `2%`,
-          right: `2%`,
-          bottom: `0%`,
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: `category`,
-            boundaryGap: true,
-            axisLine: {
-              // 坐标轴轴线相关设置。数学上的x轴
-              show: false,
-              lineStyle: {
-                color: `#092b5d`,
-              },
-            },
-            axisLabel: {
-              // 坐标轴刻度标签的相关设置
-              textStyle: {
-                color: `#24c4ff`,
-                margin: 15,
-              },
-              formatter: (data) => {
-                return data.substr(2) + `年`
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            data: data.city,
-          },
-        ],
-        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,
-            },
-          },
-        ],
-        series: [
-          {
-            name: ``,
-            type: `line`,
-            symbol: `circle`, // 默认是空心圆（中间是白色的），改成实心圆
-            showAllSymbol: true,
-            symbolSize: 8,
-            lineStyle: {
-              normal: {
-                color: `#7c80f4`, // 线条颜色
-              },
-              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`,
-                  },
-                },
-              },
-            },
-            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,
-          },
-        ],
-      }
-
-      myChart.setOption(option, true)
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.income-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

src/components/companySummary/talent.vue

@@ -1,162 +0,0 @@
-<!--
- 描述: 人才队伍
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="talent-container">
-    <div class="chart" id="chart_left2"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `talent`,
-  data() {
-    return {}
-  },
-  mounted() {
-    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 rich = {
-        white: {
-          color: `#ddd`,
-          align: `center`,
-          padding: [3, 0],
-        },
-      }
-      let placeHolderStyle = {
-        normal: {
-          label: {
-            show: false,
-          },
-          labelLine: {
-            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`,
-      ]
-      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],
-              },
-            },
-          },
-          {
-            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 ``
-                    }
-                  },
-                  rich: rich,
-                },
-                labelLine: {
-                  length: 10,
-                  length2: 30,
-                  show: true,
-                  color: `#00ffff`,
-                },
-              },
-            },
-            data: data,
-          },
-        ],
-      }
-
-      myChart.setOption(option, true)
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.talent-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

src/components/companySummary/wordCloud.vue

@@ -1,232 +0,0 @@
-<!--
- 描述: 产品热词
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="word-container">
-    <div class="chart" id="chart_right1"></div>
-  </div>
-</template>
-
-<script>
-import '@/assets/js/echarts-wordcloud.min'
-
-export default {
-  name: `wordCloud`,
-  data() {
-    return {
-      timer: null,
-    }
-  },
-  mounted() {
-    this.getEchartRight1()
-    this.timer = setInterval(() => {
-      this.getEchartRight1()
-    }, 5000)
-  },
-  methods: {
-    getEchartRight1() {
-      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(`,`) +
-                    `)`
-                  )
-                },
-              },
-              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,
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(option, true)
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.word-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

src/components/dynamicLine/index.vue

@@ -1,177 +0,0 @@
-<!--
- 描述: 动态轮播折线图
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">动态折线图</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="chart_dt"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `dynamicLine`,
-  data() {
-    return {
-      option: null,
-      timer: null,
-      xData: [],
-      now: +new Date(2019, 1, 1),
-      value: Math.random() * 1000,
-      oneDay: 24 * 3600 * 1000,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    randomData() {
-      this.now = new Date(+this.now + this.oneDay)
-      this.value = this.value + Math.random() * 25 - 10
-      return {
-        name: this.now.toString(),
-        value: [
-          [
-            this.now.getFullYear(),
-            this.now.getMonth() + 1,
-            this.now.getDate(),
-          ].join(`/`),
-          Math.round(this.value),
-        ],
-      }
-    },
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_dt`))
-      for (let i = 0; i < 1000; i++) {
-        this.xData.push(this.randomData())
-      }
-
-      this.option = {
-        tooltip: {
-          trigger: `axis`,
-          axisPointer: {
-            type: `cross`,
-            axisPointer: {
-              type: `cross`,
-              label: {
-                backgroundColor: `#283b56`,
-              },
-            },
-          },
-        },
-        grid: {
-          top: `10%`,
-          left: `3%`,
-          right: `12%`,
-          bottom: `3%`,
-          containLabel: true,
-        },
-        color: [`#b54c5d`],
-        calculable: true,
-        xAxis: {
-          type: `time`,
-          name: `年-月-日`,
-          boundaryGap: false,
-          splitNumber: 5,
-          axisLabel: {
-            formatter(value) {
-              let date = new Date(value)
-              return (
-                date.getFullYear() +
-                `-` +
-                (date.getMonth() + 1) +
-                `-` +
-                date.getDate()
-              )
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: `#2867a8`,
-            },
-          },
-          splitLine: {
-            show: false,
-          },
-        },
-        yAxis: {
-          type: `value`,
-          scale: true,
-          name: `比特币（美元）`,
-          min: 0,
-          boundaryGap: false,
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: `#2867a8`,
-            },
-          },
-          splitLine: {
-            show: false,
-          },
-        },
-        series: [
-          {
-            name: `实时交易`,
-            type: `line`,
-            xAxisIndex: 0,
-            yAxisIndex: 0,
-            itemStyle: {
-              opacity: 0,
-            },
-            data: this.xData,
-            smooth: true,
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-
-      this.timer = setInterval(() => {
-        for (let i = 0; i < 5; i++) {
-          this.xData.shift()
-          this.xData.push(this.randomData())
-        }
-
-        myChart.setOption(this.option, true)
-      }, 2000)
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 1282px;
-  top: 1548px;
-  width: 586px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/components/dynamicList/index.vue

@@ -1,602 +0,0 @@
-<!--
- 描述: 动态列表动画
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">动态列表</div>
-      <div class="sn-body">
-        <div class="wrap-container pd-info">
-          <div class="pd-info-center">
-            <div class="y-center">
-              <div class="info-1-0 animated infinite rotateF"></div>
-              <div class="info-1-1 animated infinite rotateF"></div>
-              <div class="info-1-2 animated infinite rotate"></div>
-              <div class="info-1-3 animated infinite rotate"></div>
-              <div class="info-1-4 animated infinite flashPD"></div>
-            </div>
-
-            <div class="y-number y-number-1 animated fadeInLeft">
-              <div class="y-number-bg animated infinite rotate"></div>
-              <div class="y-number-icon"></div>
-              <div class="y-number-text">
-                <span>区块链</span>
-                <span id="number1" class="odometer odometer-theme-digital">
-                  <div class="odometer-inside">
-                    <span class="odometer-digit">
-                      <span class="odometer-digit-spacer">8</span>
-                      <span class="odometer-digit-inner">
-                        <span class="odometer-ribbon">
-                          <span class="odometer-ribbon-inner">
-                            <span class="odometer-value">
-                              <countTo
-                                :startVal="startVal"
-                                :endVal="12356"
-                                :duration="6000"
-                                separator=""
-                              ></countTo>
-                            </span>
-                          </span>
-                        </span>
-                      </span>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-
-            <div class="y-number y-number-2 animated fadeInLeft">
-              <div class="y-number-bg animated infinite rotateF"></div>
-              <div class="y-number-icon"></div>
-              <div class="y-number-text">
-                <span>大数据</span>
-                <span id="number2" class="odometer odometer-theme-digital">
-                  <div class="odometer-inside">
-                    <span class="odometer-digit">
-                      <span class="odometer-digit-spacer">8</span>
-                      <span class="odometer-digit-inner">
-                        <span class="odometer-ribbon">
-                          <span class="odometer-ribbon-inner">
-                            <span class="odometer-value">
-                              <countTo
-                                :startVal="startVal"
-                                :endVal="65321"
-                                :duration="6000"
-                                separator=""
-                              ></countTo>
-                            </span>
-                          </span>
-                        </span>
-                      </span>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-
-            <div class="y-number y-number-3 animated fadeInLeft">
-              <div class="y-number-bg animated infinite rotateF"></div>
-              <div class="y-number-icon"></div>
-              <div class="y-number-text">
-                <span>云计算</span>
-                <span id="number3" class="odometer odometer-theme-digital">
-                  <div class="odometer-inside">
-                    <span class="odometer-digit">
-                      <span class="odometer-digit-spacer">8</span>
-                      <span class="odometer-digit-inner">
-                        <span class="odometer-ribbon">
-                          <span class="odometer-ribbon-inner">
-                            <span class="odometer-value">
-                              <countTo
-                                :startVal="startVal"
-                                :endVal="8686"
-                                :duration="6000"
-                                separator=""
-                              ></countTo>
-                            </span>
-                          </span>
-                        </span>
-                      </span>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-
-            <div class="y-number y-number-4 animated fadeInLeft">
-              <div class="y-number-bg animated infinite rotate"></div>
-              <div class="y-number-icon"></div>
-              <div class="y-number-text">
-                <span>人工智能</span>
-                <span id="number4" class="odometer odometer-theme-digital">
-                  <div class="odometer-inside">
-                    <span class="odometer-digit">
-                      <span class="odometer-digit-spacer">8</span>
-                      <span class="odometer-digit-inner">
-                        <span class="odometer-ribbon">
-                          <span class="odometer-ribbon-inner">
-                            <span class="odometer-value">
-                              <countTo
-                                :startVal="startVal"
-                                :endVal="258"
-                                :duration="6000"
-                                separator=""
-                              ></countTo>
-                            </span>
-                          </span>
-                        </span>
-                      </span>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import countTo from 'vue-count-to'
-
-export default {
-  name: `dynamicList`,
-  components: {
-    countTo,
-  },
-  data() {
-    return {
-      startVal: 0,
-    }
-  },
-  mounted() {},
-  methods: {},
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 50px;
-  top: 2408px;
-  width: 560px;
-  height: 400px;
-  .pd-info {
-    left: 0;
-    top: 35px;
-    width: 100%;
-    height: 80%;
-  }
-  .pd-info-center {
-    width: 100%;
-    height: 100%;
-    .y-center {
-      position: absolute;
-      top: 16px;
-      left: 30px;
-      width: 234px;
-      height: 234px;
-      > [class^='info-1'] {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-repeat: no-repeat;
-        background-position: center center;
-      }
-      .info-1-0 {
-        background-image: url(../../assets/img/dynamic/info-1-0.png);
-        -webkit-animation-duration: 20s;
-        -moz-animation-duration: 20s;
-        -o-animation-duration: 20s;
-        animation-duration: 20s;
-      }
-      .info-1-1 {
-        background-image: url(../../assets/img/dynamic/info-1-1.png);
-        -webkit-animation-duration: 20s;
-        -moz-animation-duration: 20s;
-        -o-animation-duration: 20s;
-        animation-duration: 20s;
-        -webkit-animation-delay: 3s;
-        -moz-animation-delay: 3s;
-        -o-animation-delay: 3s;
-        animation-delay: 3s;
-      }
-      .info-1-2 {
-        background-image: url(../../assets/img/dynamic/info-1-2.png);
-        -webkit-animation-duration: 20s;
-        -moz-animation-duration: 20s;
-        -o-animation-duration: 20s;
-        animation-duration: 20s;
-        -webkit-animation-delay: 8s;
-        -moz-animation-delay: 8s;
-        -o-animation-delay: 8s;
-        animation-delay: 8s;
-      }
-      .info-1-3 {
-        background-image: url(../../assets/img/dynamic/info-1-3.png);
-        -webkit-animation-duration: 10s;
-        -moz-animation-duration: 10s;
-        -o-animation-duration: 10s;
-        animation-duration: 10s;
-        -webkit-animation-delay: 5s;
-        -moz-animation-delay: 5s;
-        -o-animation-delay: 5s;
-        animation-delay: 5s;
-      }
-      .info-1-4 {
-        background-image: url(../../assets/img/dynamic/info-1-4.png);
-        -webkit-animation-duration: 5s;
-        -moz-animation-duration: 5s;
-        -o-animation-duration: 5s;
-        animation-duration: 5s;
-      }
-    }
-
-    .y-number {
-      position: absolute;
-      left: 0;
-      padding-left: 290px;
-      -webkit-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-      -moz-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-      -o-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-      animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-      .y-number-bg {
-        width: 54px;
-        height: 54px;
-        position: absolute;
-        top: 5px;
-        -webkit-animation-duration: 5s;
-        -moz-animation-duration: 5s;
-        -o-animation-duration: 5s;
-        animation-duration: 5s;
-      }
-      .y-number-icon {
-        width: 54px;
-        height: 54px;
-        position: absolute;
-        top: 5px;
-      }
-      .y-number-text {
-        display: inline-block;
-        color: #0072bc;
-        font-size: 18px;
-        padding: 10px 0 0 60px;
-        > span {
-          display: block;
-          &:nth-child(2) {
-            font-size: 22px;
-            color: #00aeef;
-            line-height: 28px;
-            padding: 0;
-            background: transparent;
-          }
-        }
-      }
-
-      &.y-number-1 {
-        -webkit-animation-delay: 1s;
-        -moz-animation-delay: 1s;
-        -o-animation-delay: 1s;
-        animation-delay: 1s;
-        background: url(../../assets/img/dynamic/info-line-01.png) no-repeat
-          180px center;
-        height: 60px;
-        top: 15px;
-        .y-number-bg {
-          -webkit-animation-delay: 2s;
-          -moz-animation-delay: 2s;
-          -o-animation-delay: 2s;
-          animation-delay: 2s;
-          background: url(../../assets/img/dynamic/info-bg-01.png) no-repeat 50%
-            50%;
-        }
-        .y-number-icon {
-          background: url(../../assets/img/dynamic/info-icon-1.png) no-repeat
-            50% 50%;
-        }
-      }
-      &.y-number-2 {
-        -webkit-animation-delay: 1.25s;
-        -moz-animation-delay: 1.25s;
-        -o-animation-delay: 1.25s;
-        animation-delay: 1.25s;
-        background: url(../../assets/img/dynamic/info-line-02.png) no-repeat
-          180px center;
-        height: 60px;
-        top: 70px;
-        padding-left: 350px;
-        .y-number-bg {
-          -webkit-animation-delay: 2.5s;
-          -moz-animation-delay: 2.5s;
-          -o-animation-delay: 2.5s;
-          animation-delay: 2.5s;
-          background: url(../../assets/img/dynamic/info-bg-02.png) no-repeat 50%
-            50%;
-        }
-        .y-number-icon {
-          background: url(../../assets/img/dynamic/info-icon-2.png) no-repeat
-            50% 50%;
-        }
-      }
-      &.y-number-3 {
-        -webkit-animation-delay: 1.5s;
-        -moz-animation-delay: 1.5s;
-        -o-animation-delay: 1.5s;
-        animation-delay: 1.5s;
-        background: url(../../assets/img/dynamic/info-line-02.png) no-repeat
-          180px center;
-        height: 60px;
-        top: 135px;
-        padding-left: 350px;
-        .y-number-bg {
-          -webkit-animation-delay: 3s;
-          -moz-animation-delay: 3s;
-          -o-animation-delay: 3s;
-          animation-delay: 3s;
-          background: url(../../assets/img/dynamic/info-bg-03.png) no-repeat 50%
-            50%;
-        }
-        .y-number-icon {
-          background: url(../../assets/img/dynamic/info-icon-3.png) no-repeat
-            50% 50%;
-        }
-      }
-      &.y-number-4 {
-        -webkit-animation-delay: 1.75s;
-        -moz-animation-delay: 1.75s;
-        -o-animation-delay: 1.75s;
-        animation-delay: 1.75s;
-        background: url(../../assets/img/dynamic/info-line-01.png) no-repeat
-          180px center;
-        height: 60px;
-        top: 190px;
-        .y-number-bg {
-          -webkit-animation-delay: 3.5s;
-          -moz-animation-delay: 3.5s;
-          -o-animation-delay: 3.5s;
-          animation-delay: 3.5s;
-          background: url(../../assets/img/dynamic/info-bg-04.png) no-repeat 50%
-            50%;
-        }
-        .y-number-icon {
-          background: url(../../assets/img/dynamic/info-icon-4.png) no-repeat
-            50% 50%;
-        }
-      }
-    }
-  }
-}
-
-.animated {
-  -webkit-animation-duration: 1s;
-  -moz-animation-duration: 1s;
-  -o-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both;
-  -o-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-.animated.infinite {
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation-iteration-count: infinite;
-  -o-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-
-@-webkit-keyframes rotate {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@-moz-keyframes rotate {
-  0% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@-o-keyframes rotate {
-  0% {
-    -webkit-transform-origin: center;
-    -o-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    -o-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes rotate {
-  0% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-    -o-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-    -o-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-.rotate {
-  -webkit-animation-name: rotate;
-  -moz-animation-name: rotate;
-  -o-animation-name: rotate;
-  animation-name: rotate;
-  -webkit-animation-timing-function: linear;
-  -moz-animation-timing-function: linear;
-  -o-animation-timing-function: linear;
-  animation-timing-function: linear;
-}
-
-@-webkit-keyframes rotateF {
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-
-@-moz-keyframes rotateF {
-  100% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    -moz-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-
-@-o-keyframes rotateF {
-  100% {
-    -webkit-transform-origin: center;
-    -o-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    -o-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-
-@keyframes rotateF {
-  100% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-    -o-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    -moz-transform: rotate(-360deg);
-    -o-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-
-.rotateF {
-  -webkit-animation-name: rotateF;
-  -moz-animation-name: rotateF;
-  -o-animation-name: rotateF;
-  animation-name: rotateF;
-  -webkit-animation-timing-function: linear;
-  -moz-animation-timing-function: linear;
-  -o-animation-timing-function: linear;
-  animation-timing-function: linear;
-}
-
-@-webkit-keyframes flashPD {
-  0%,
-  90% {
-    opacity: 1;
-  }
-  92%,
-  98% {
-    opacity: 0;
-  }
-  96%,
-  100% {
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes flashPD {
-  0%,
-  90% {
-    opacity: 1;
-  }
-  92%,
-  98% {
-    opacity: 0;
-  }
-  96%,
-  100% {
-    opacity: 1;
-  }
-}
-
-@-o-keyframes flashPD {
-  0%,
-  90% {
-    opacity: 1;
-  }
-  92%,
-  98% {
-    opacity: 0;
-  }
-  96%,
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes flashPD {
-  0%,
-  90% {
-    opacity: 1;
-  }
-  92%,
-  98% {
-    opacity: 0;
-  }
-  96%,
-  100% {
-    opacity: 1;
-  }
-}
-
-.flashPD {
-  -webkit-animation-name: flashPD;
-  -moz-animation-name: flashPD;
-  -o-animation-name: flashPD;
-  animation-name: flashPD;
-}
-</style>

src/components/flashCloud/index.vue

@@ -1,490 +0,0 @@
-<!--
- 描述: 闪动云
- 作者: Jack Chen
- 日期: 2020-05-02
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">闪动云</div>
-      <div class="sn-body">
-        <div class="wrap-container cloud">
-          <div class="pd-main-left">
-            <div class="yun-container">
-              <div class="yun-tree"></div>
-              <div class="line-fs"></div>
-              <div class="line-fs"></div>
-              <div class="line-fs"></div>
-              <div class="line-fs"></div>
-              <div class="line-fs"></div>
-              <div class="line-fs"></div>
-              <div class="line-fs"></div>
-              <div class="line-fs"></div>
-              <div class="line-fs"></div>
-            </div>
-
-            <div id="yunText" class="yun-text">
-              <div
-                :id="`yunText-${index + 1}`"
-                :class="{ 'span-flash': number == index }"
-                v-for="(item, index) in arrData"
-                :key="index"
-              >
-                <span :title="item.title">{{ item.title }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `flashCloud`,
-  data() {
-    return {
-      number: 0,
-      arrData: [
-        {
-          title: `JavaScript`,
-        },
-        {
-          title: `Vue.js`,
-        },
-        {
-          title: `React.js`,
-        },
-        {
-          title: `Node.js`,
-        },
-        {
-          title: `Angular`,
-        },
-        {
-          title: `HTML5`,
-        },
-        {
-          title: `CSS3`,
-        },
-        {
-          title: `jQuery`,
-        },
-        {
-          title: `Typescript`,
-        },
-        {
-          title: `Bootstrap`,
-        },
-        {
-          title: `WebApp`,
-        },
-        {
-          title: `小程序`,
-        },
-        {
-          title: `HTTP`,
-        },
-        {
-          title: `Sass/Less`,
-        },
-        {
-          title: `Webpack`,
-        },
-        {
-          title: `ES6`,
-        },
-      ],
-    }
-  },
-  mounted() {
-    let len = 5
-    this.timer = setInterval(() => {
-      this.number = parseInt(Math.random() * 15, 10)
-      if (len == 0) {
-        len = 5
-        return this.arrData.sort(() => Math.random() - 0.5)
-      } else {
-        len--
-      }
-    }, 2000)
-  },
-  methods: {},
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 512px;
-  top: 1978px;
-  width: 432px;
-  height: 400px;
-  .cloud {
-    left: 55px;
-    top: 0;
-    width: 80%;
-    height: 100%;
-  }
-
-  .pd-main-left {
-    position: relative;
-    width: 310px;
-    height: 335px;
-    .yun-container {
-      width: 100%;
-      height: 100%;
-      > div {
-        &:nth-child(2) {
-          height: 90%;
-          -webkit-animation-duration: 2s;
-          -moz-animation-duration: 2s;
-          -o-animation-duration: 2s;
-          animation-duration: 2s;
-          -webkit-animation-delay: 1.5s;
-          -moz-animation-delay: 1.5s;
-          -o-animation-delay: 1.5s;
-          animation-delay: 1.5s;
-          bottom: 0;
-          left: 51px;
-        }
-        &:nth-child(3) {
-          height: 100%;
-          -webkit-animation-duration: 3s;
-          -moz-animation-duration: 3s;
-          -o-animation-duration: 3s;
-          animation-duration: 3s;
-          -webkit-animation-delay: 0s;
-          -moz-animation-delay: 0s;
-          -o-animation-delay: 0s;
-          animation-delay: 0s;
-          bottom: 32px;
-          left: 89px;
-        }
-        &:nth-child(4) {
-          height: 100%;
-          -webkit-animation-duration: 2.5s;
-          -moz-animation-duration: 2.5s;
-          -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-          -webkit-animation-delay: 1s;
-          -moz-animation-delay: 1s;
-          -o-animation-delay: 1s;
-          animation-delay: 1s;
-          bottom: 3px;
-          left: 179px;
-          -webkit-filter: hue-rotate(180deg);
-          filter: hue-rotate(180deg);
-        }
-        &:nth-child(5) {
-          height: 90%;
-          -webkit-animation-duration: 2s;
-          -moz-animation-duration: 2s;
-          -o-animation-duration: 2s;
-          animation-duration: 2s;
-          -webkit-animation-delay: 2s;
-          -moz-animation-delay: 2s;
-          -o-animation-delay: 2s;
-          animation-delay: 2s;
-          bottom: 42px;
-          left: 229px;
-        }
-        &:nth-child(6) {
-          height: 100%;
-          -webkit-animation-duration: 2.5s;
-          -moz-animation-duration: 2.5s;
-          -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-          -webkit-animation-delay: 0.5s;
-          -moz-animation-delay: 0.5s;
-          -o-animation-delay: 0.5s;
-          animation-delay: 0.5s;
-          bottom: 11px;
-          right: 48px;
-        }
-        &:nth-child(7) {
-          height: 90%;
-          -webkit-animation-duration: 3s;
-          -moz-animation-duration: 3s;
-          -o-animation-duration: 3s;
-          animation-duration: 3s;
-          -webkit-animation-delay: 2.5s;
-          -moz-animation-delay: 2.5s;
-          -o-animation-delay: 2.5s;
-          animation-delay: 2.5s;
-          bottom: -22px;
-          right: 174px;
-          -webkit-filter: hue-rotate(180deg);
-          filter: hue-rotate(180deg);
-        }
-        &:nth-child(8) {
-          height: 90%;
-          -webkit-animation-duration: 3s;
-          -moz-animation-duration: 3s;
-          -o-animation-duration: 3s;
-          animation-duration: 3s;
-          -webkit-animation-delay: 1.5s;
-          -moz-animation-delay: 1.5s;
-          -o-animation-delay: 1.5s;
-          animation-delay: 1.5s;
-          bottom: -22px;
-          right: 100px;
-        }
-        &:nth-child(9) {
-          height: 100%;
-          -webkit-animation-duration: 2.5s;
-          -moz-animation-duration: 2.5s;
-          -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-          -webkit-animation-delay: 2s;
-          -moz-animation-delay: 2s;
-          -o-animation-delay: 2s;
-          animation-delay: 2s;
-          bottom: -10px;
-          right: 220px;
-        }
-        &:nth-child(10) {
-          height: 95%;
-          -webkit-animation-duration: 2s;
-          -moz-animation-duration: 2s;
-          -o-animation-duration: 2s;
-          animation-duration: 2s;
-          -webkit-animation-delay: 1s;
-          -moz-animation-delay: 1s;
-          -o-animation-delay: 1s;
-          animation-delay: 1s;
-          bottom: -41px;
-          right: 182px;
-        }
-      }
-      background: url(../../assets/img/pd-main-left-bg-2.png) no-repeat 50% 50%;
-      .yun-tree {
-        width: 100%;
-        height: 100%;
-        background: url(../../assets/img/pd-main-left-bg-tree.png) no-repeat 50%
-          bottom;
-        mix-blend-mode: screen;
-      }
-      .line-fs {
-        width: 14px;
-        height: 100%;
-        background-image: url(../../assets/img/line-fs.png);
-        background-repeat: no-repeat;
-        background-position: 50% 150%;
-        position: absolute;
-        z-index: -1;
-        -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-        -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-        -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-        animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-      }
-    }
-
-    .yun-text {
-      position: absolute;
-      width: 318px;
-      height: 195px;
-      top: 0;
-      left: 50%;
-      margin-left: -161px;
-      z-index: 2;
-      .span-flash {
-        color: #00f6ff;
-        font-size: 12px;
-        -webkit-animation-name: yun-flash;
-        -moz-animation-name: yun-flash;
-        -o-animation-name: yun-flash;
-        animation-name: yun-flash;
-        -webkit-animation-duration: 1s;
-        -moz-animation-duration: 1s;
-        -o-animation-duration: 1s;
-        animation-duration: 1s;
-        -webkit-animation-iteration-count: 1;
-        -moz-animation-iteration-count: 1;
-        -o-animation-iteration-count: 1;
-        animation-iteration-count: 1;
-      }
-      div {
-        position: absolute;
-        white-space: nowrap;
-        overflow: hidden;
-        -o-text-overflow: ellipsis;
-        text-overflow: ellipsis;
-        width: 70px;
-        height: 36px;
-        line-height: 36px;
-        word-wrap: break-word;
-        word-break: break-all;
-        opacity: 0.8;
-        color: #00f6ff;
-        span {
-          font-size: 12px;
-          cursor: pointer;
-        }
-        &:nth-child(1) {
-          top: 84px;
-          left: 26px;
-        }
-        &:nth-child(2) {
-          top: 13px;
-          left: 157px;
-        }
-        &:nth-child(3) {
-          top: 105px;
-          left: 35px;
-        }
-        &:nth-child(4) {
-          top: 38px;
-          left: 89px;
-        }
-        &:nth-child(5) {
-          top: 43px;
-          left: 178px;
-        }
-        &:nth-child(6) {
-          top: 76px;
-          left: 227px;
-        }
-        &:nth-child(7) {
-          top: 63px;
-          left: 66px;
-        }
-        &:nth-child(8) {
-          top: 156px;
-          left: 43px;
-        }
-        &:nth-child(9) {
-          top: 130px;
-          left: 16px;
-        }
-        &:nth-child(10) {
-          top: 93px;
-          left: 128px;
-        }
-        &:nth-child(11) {
-          top: 106px;
-          left: 241px;
-        }
-        &:nth-child(12) {
-          top: 121px;
-          left: 112px;
-        }
-        &:nth-child(13) {
-          top: 67px;
-          left: 153px;
-        }
-        &:nth-child(14) {
-          top: 157px;
-          left: 207px;
-        }
-        &:nth-child(15) {
-          top: 132px;
-          left: 206px;
-        }
-        &:nth-child(16) {
-          top: 150px;
-          left: 117px;
-        }
-      }
-    }
-  }
-}
-
-@-webkit-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@-moz-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@-o-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-
-@-webkit-keyframes yun-flash {
-  from,
-  50%,
-  to {
-    opacity: 1;
-  }
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-@-moz-keyframes yun-flash {
-  from,
-  50%,
-  to {
-    opacity: 1;
-  }
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-@-o-keyframes yun-flash {
-  from,
-  50%,
-  to {
-    opacity: 1;
-  }
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-@keyframes yun-flash {
-  from,
-  50%,
-  to {
-    opacity: 1;
-  }
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-</style>

src/components/gauge/index.vue

@@ -1,159 +0,0 @@
-<!--
- 描述: 仪表盘
- 作者: Jack Chen
- 日期: 2020-05-03
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">仪表盘</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="chart_gauge"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `gauge`,
-  data() {
-    return {
-      option: null,
-      timer: null,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_gauge`))
-      this.option = {
-        tooltip: {
-          formatter: `{a} <br/>{c} {b}`,
-        },
-        series: [
-          {
-            name: `速度`,
-            type: `gauge`,
-            min: 0,
-            max: 220,
-            splitNumber: 11,
-            // radius: '50%',
-            axisLine: {
-              // 坐标轴线
-              lineStyle: {
-                // 属性lineStyle控制线条样式
-                color: [
-                  [0.09, `lime`],
-                  [0.82, `#1e90ff`],
-                  [1, `#ff4500`],
-                ],
-                width: 3,
-                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,
-              },
-            },
-            splitLine: {
-              // 分隔线
-              length: 25, // 属性length控制线长
-              lineStyle: {
-                // 属性lineStyle（详见lineStyle）控制线条样式
-                width: 3,
-                color: `#fff`,
-                shadowColor: `#fff`, // 默认透明
-                shadowBlur: 10,
-              },
-            },
-            pointer: {
-              // 分隔线
-              shadowColor: `#fff`, // 默认透明
-              shadowBlur: 5,
-            },
-            title: {
-              textStyle: {
-                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: `bolder`,
-                fontSize: 20,
-                fontStyle: `italic`,
-                color: `#fff`,
-                shadowColor: `#fff`, // 默认透明
-                shadowBlur: 10,
-              },
-            },
-            detail: {
-              // backgroundColor: 'rgba(30,144,255,0.8)',
-              // borderWidth: 1,
-              // borderColor: '#fff',
-              // shadowColor: '#fff', //默认透明
-              // shadowBlur: 5,
-              offsetCenter: [0, `50%`], // x, y，单位px
-              textStyle: {
-                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                fontWeight: `bolder`,
-                fontSize: 25,
-                color: `#fff`,
-              },
-            },
-            data: [
-              {
-                value: 40,
-                name: `km/h`,
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      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)
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 512px;
-  top: 2838px;
-  width: 432px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/components/index.js

@@ -6,70 +6,10 @@
 
 import bgAnimation from './bgAnimation' // 登录界面背景图动画
 import modal from './modal' // 自定义全局模态框
-import sinan from './sinan' // 司南排名图
-import seamless from './seamless' // 新闻无缝滚动
-import pyramid from './pyramid' // 金字塔动画
-import scrollArc from './scrollArc' // 滚动弧形线
-import szBar from './szBar' // 双轴柱状图
-import ringPin from './ringPin' // 环形气泡图
-import rotateColorful from './rotateColorful' // 旋转多彩图
-import circleRunway from './circleRunway' // 环形跑道图
-import scanRadius from './scanRadius' // 扫描半径图
-import cakeLinkage from './cakeLinkage' // 柱饼组合联动
-import dynamicLine from './dynamicLine' // 动态轮播折线图
-import pyramidTrend from './pyramidTrend' // 金字塔趋势
-import staffMix from './staffMix' // 人员占比
-import flashCloud from './flashCloud' // 闪动云
-import ringPie from './ringPie' // 环形饼图
-import colorfulRadar from './colorfulRadar' // 多彩雷达
-import dynamicList from './dynamicList' // 动态列表动画
-import bar3d from './bar3d' // 3D立体柱状图
-import colorfulArea from './colorfulArea' // 多彩轮播面积
-import rainbow from './rainbow' // 彩虹轨道图
-import gauge from './gauge' // 仪表盘
-import waterPolo from './waterPolo' // 水球图
-import circleNesting from './circleNesting' // 圆环套圆环
-
-import business from './companySummary/business' // 业务范围
-import talent from './companySummary/talent' // 人才队伍
-import income from './companySummary/income' // 营业收入
-import wordCloud from './companySummary/wordCloud' // 产品热词
-import distribution from './companySummary/distribution' // 客户分布
-import history from './companySummary/history' // 发展历程
 
 const components = {
   bgAnimation,
   modal,
-  sinan,
-  seamless,
-  pyramid,
-  scrollArc,
-  szBar,
-  ringPin,
-  rotateColorful,
-  circleRunway,
-  scanRadius,
-  cakeLinkage,
-  dynamicLine,
-  pyramidTrend,
-  staffMix,
-  flashCloud,
-  ringPie,
-  colorfulRadar,
-  dynamicList,
-  bar3d,
-  colorfulArea,
-  rainbow,
-  gauge,
-  waterPolo,
-  circleNesting,
-
-  business,
-  talent,
-  income,
-  wordCloud,
-  distribution,
-  history,
 }
 
 const install = (Vue = {}) => {

src/components/modal/index.vue

@@ -88,7 +88,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 /* 动画效果 淡入淡出 */
 .fade-enter-active,
 .fade-leave-active {

src/components/pyramid/index.vue

@@ -1,873 +0,0 @@
-<!--
- 描述: 金字塔动画
- 作者: Jack Chen
- 日期: 2020-04-19
--->
-
-<template>
-  <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"
-    >
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <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>
-        </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>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  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`],
-      totalNum: [],
-      sum: 0,
-    }
-  },
-  mounted() {
-    this.arrData.forEach((v, i) => {
-      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)
-    })
-  },
-  methods: {
-    getEchart(dom, data) {
-      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}%`,
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              {
-                value: sum,
-                name: ``,
-                label: {
-                  normal: {
-                    show: true,
-                  },
-                },
-              },
-              {
-                value: 100 - sum,
-                name: ``,
-                label: {
-                  normal: {
-                    show: false,
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      }
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.trigle {
-  left: 600px;
-  top: 150px;
-  width: 720px;
-  height: 500px;
-  .back_img {
-    position: absolute;
-    top: 195px;
-    width: 100%;
-    height: 300px;
-    background: url(../../assets/img/chart2/icon_db02.png) no-repeat center;
-    transform: rotateX(0deg);
-    background-size: 80% 84%;
-  }
-  .back_img1 {
-    position: absolute;
-    left: 0;
-    top: 18%;
-    width: 100%;
-    height: 100%;
-    background: url(../../assets/img/chart2/icon_db03.png) no-repeat center;
-    transform: rotateX(65deg);
-    background-size: 62%;
-    animation: trigle_move 10s linear infinite;
-    -webkit-animation: trigle_move 10s linear infinite;
-  }
-  .back_img2 {
-    position: absolute;
-    top: 190px;
-    width: 100%;
-    height: 300px;
-    background: url(../../assets/img/chart2/icon_db04.png) no-repeat center;
-    transform: rotateX(66deg);
-    background-size: 39%;
-    animation: trigle_move1 10s linear infinite;
-    -webkit-animation: trigle_move1 10s linear infinite;
-  }
-  .back_img3 {
-    position: absolute;
-    top: 247px;
-    width: 100%;
-    height: 300px;
-    background: url(../../assets/img/chart2/icon_db01.png) no-repeat center;
-    transform: rotateX(50deg);
-    background-size: 65% 100%;
-  }
-
-  .first {
-    list-style-type: none;
-    left: 240px;
-    top: 100px;
-    width: 240px;
-    height: 240px;
-    position: absolute;
-    transform-style: preserve-3d;
-    transform: rotateX(70deg) rotateZ(45deg);
-    perspective: 2000px;
-    perspective-origin: 50% 100%;
-    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));
-      opacity: 0.8;
-      &:nth-child(1) {
-        transform: rotateX(0deg) translateZ(-35px) scale(0.79);
-      }
-      &:nth-child(2) {
-        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%);
-      }
-      &:nth-child(3) {
-        transform: rotateX(-180deg) translateZ(100px);
-      }
-      &:nth-child(4) {
-        height: 70px;
-        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%);
-      }
-      &: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));
-      }
-      &: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
-        );
-      }
-    }
-  }
-
-  .second {
-    list-style-type: none;
-    left: 261px;
-    top: 65px;
-    width: 200px;
-    height: 195px;
-    text-align: center;
-    position: absolute;
-    transform-style: preserve-3d;
-    transform: rotateX(70deg) rotateZ(45deg);
-    perspective: 2000px;
-    perspective-origin: 50% 100%;
-    animation: trigle_down2 2s linear;
-    -webkit-animation: trigle_down2 2s linear;
-    li {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      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);
-        height: 55px;
-        line-height: 55px;
-        transform-origin: 0 100%;
-        clip-path: polygon(18px 0%, calc(100% - 18px) 0%, 100% 100%, 0% 100%);
-      }
-      &:nth-child(3) {
-        transform: rotateX(-180deg) translateZ(100px);
-      }
-      &:nth-child(4) {
-        height: 55px;
-        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%);
-      }
-      &: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));
-      }
-      &: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));
-      }
-    }
-  }
-
-  .third {
-    list-style-type: none;
-    left: 292px;
-    top: 20px;
-    width: 140px;
-    height: 140px;
-    text-align: center;
-    position: absolute;
-    transform-style: preserve-3d;
-    transform: rotateX(70deg) rotateZ(45deg);
-    perspective: 2000px;
-    perspective-origin: 50% 100%;
-    animation: trigle_down3 3s linear;
-    -webkit-animation: trigle_down3 3s linear;
-    li {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      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);
-        height: 55px;
-        line-height: 55px;
-        transform-origin: 0 100%;
-        clip-path: polygon(18px 0%, calc(100% - 18px) 0%, 100% 100%, 0% 100%);
-      }
-      &:nth-child(3) {
-        transform: rotateX(-180deg) translateZ(100px);
-      }
-      &:nth-child(4) {
-        height: 55px;
-        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%);
-      }
-      &: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));
-      }
-      &: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));
-      }
-    }
-  }
-
-  .four {
-    list-style-type: none;
-    left: 310px;
-    top: -8px;
-    width: 105px;
-    height: 106px;
-    text-align: center;
-    position: absolute;
-    transform-style: preserve-3d;
-    transform: rotateX(70deg) rotateZ(45deg);
-    perspective: 2000px;
-    perspective-origin: 50% 100%;
-    animation: trigle_down4 4s linear;
-    -webkit-animation: trigle_down4 4s linear;
-    li {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background-image: linear-gradient(rgba(112, 245, 100, 0.8) 9%, #dbfe73);
-      opacity: 0.7;
-      &:nth-child(1) {
-        display: none;
-        transform: rotateX(0deg) translateZ(-48px) scale(0.75);
-      }
-      &:nth-child(2) {
-        transform: translateZ(-100px) translateY(-48px) rotateX(-70deg);
-        height: 152px;
-        transform-origin: 0 100%;
-        clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
-      }
-      &:nth-child(3) {
-        transform: rotateX(-180deg) translateZ(100px);
-      }
-      &:nth-child(4) {
-        height: 150px;
-        transform-origin: 0 100%;
-        transform: translateZ(-100px) translateY(-150px) rotateX(-110deg);
-        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%);
-      }
-      &: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%);
-      }
-    }
-  }
-
-  .detail {
-    width: 240px;
-    height: 60px;
-    position: absolute;
-    &.detail_1 {
-      left: 2px;
-      top: 245px;
-    }
-    &.detail_2 {
-      left: 430px;
-      top: 194px;
-      width: 290px;
-    }
-    &.detail_3 {
-      left: 67px;
-      top: 117px;
-    }
-    &.detail_4 {
-      left: 379px;
-      top: 60px;
-    }
-    .detail_txt {
-      display: inline-block;
-      width: calc(100% - 80px);
-      height: 100%;
-      .txt_right {
-        padding: 10px 0;
-        display: inline-block;
-        float: right;
-        height: 60px;
-        width: calc(100% - 65px);
-        %arrow_icon {
-          content: '';
-          width: 12px;
-          height: 18px;
-          display: block;
-          float: right;
-        }
-        .f_div {
-          color: #84a9ef;
-          font-size: 16px;
-          &.aharrow_down {
-            &:before {
-              @extend %arrow_icon;
-              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;
-            }
-          }
-        }
-        .s_div {
-          font-size: 16px;
-          font-weight: bold;
-        }
-        .s_div1 {
-          color: #01ddb2;
-        }
-        .s_div2 {
-          color: #5d83ff;
-        }
-        .s_div3 {
-          color: #e59138;
-        }
-        .s_div4 {
-          color: #77f364;
-        }
-      }
-      &.detail_txt1 {
-        animation: opacity_path 3s linear;
-        -webkit-animation: opacity_path 3s linear;
-      }
-      &.detail_txt2 {
-        animation: opacity_path2 4s linear;
-        -webkit-animation: opacity_path2 4s linear;
-        float: right;
-      }
-      &.detail_txt3 {
-        animation: opacity_path3 5s linear;
-        -webkit-animation: opacity_path3 5s linear;
-      }
-      &.detail_txt4 {
-        animation: opacity_path4 6s linear;
-        -webkit-animation: opacity_path4 6s linear;
-        float: right;
-      }
-      .precent_txt {
-        width: 50px;
-        height: 50px;
-        display: inline-block;
-        border-radius: 50%;
-        margin: 5px;
-        &.precent_txt1 {
-          background: url(../../assets/img/chart2/icon_xfq04.png) no-repeat
-            center;
-        }
-        &.precent_txt2 {
-          background: url(../../assets/img/chart2/icon_xfq03.png) no-repeat
-            center;
-        }
-        &.precent_txt3 {
-          background: url(../../assets/img/chart2/icon_xfq01.png) no-repeat
-            center;
-        }
-        &.precent_txt4 {
-          background: url(../../assets/img/chart2/icon_xfq02.png) no-repeat
-            center;
-        }
-      }
-    }
-  }
-
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-
-  .arrow_contain {
-    width: 80px;
-    height: 100%;
-    display: inline-block;
-    &.arrow_contain1 {
-      animation: clip_line 2s linear;
-      -webkit-animation: clip_line 2s linear;
-      float: right;
-    }
-    &.arrow_contain2 {
-      animation: clip_line2 3s linear;
-      -webkit-animation: clip_line2 3s linear;
-      float: left;
-    }
-    &.arrow_contain3 {
-      animation: clip_line3 4s linear;
-      -webkit-animation: clip_line3 4s linear;
-      float: right;
-    }
-    &.arrow_contain4 {
-      animation: clip_line4 5s linear;
-      -webkit-animation: clip_line4 5s linear;
-      float: left;
-    }
-    .arrow {
-      &.arrow_1 {
-        width: 20px;
-        height: 1px;
-        background: #01ddb2;
-        transform: rotate(30deg);
-        display: inline-block;
-        margin-top: 40px;
-        &:before {
-          content: '';
-          width: 50px;
-          height: 1px;
-          background: #01ddb2;
-          display: inline-block;
-          transform: rotate(-30deg);
-          position: absolute;
-          left: 17px;
-          top: -13px;
-        }
-        &:after {
-          content: '';
-          width: 5px;
-          height: 5px;
-          background: #01ddb2;
-          display: inline-block;
-          border-radius: 50%;
-          position: absolute;
-          top: -2px;
-          box-shadow: 0px 0px 5px 1px #01ddb2;
-          left: -2px;
-        }
-      }
-      &.arrow_2 {
-        width: 20px;
-        height: 1px;
-        background: #84a9ef;
-        transform: rotate(-30deg);
-        display: inline-block;
-        margin-top: 40px;
-        float: right;
-        &:before {
-          content: '';
-          width: 50px;
-          height: 1px;
-          background: #84a9ef;
-          display: inline-block;
-          transform: rotate(30deg);
-          position: absolute;
-          left: -47px;
-          top: -13px;
-        }
-        &:after {
-          content: '';
-          width: 5px;
-          height: 5px;
-          background: #84a9ef;
-          display: inline-block;
-          border-radius: 50%;
-          position: absolute;
-          top: -2px;
-          box-shadow: 0px 0px 5px 1px #84a9ef;
-          left: 17px;
-        }
-      }
-      &.arrow_3 {
-        width: 20px;
-        height: 1px;
-        background: #ff9232;
-        transform: rotate(30deg);
-        display: inline-block;
-        margin-top: 40px;
-        &:before {
-          content: '';
-          width: 50px;
-          height: 1px;
-          background: #ff9232;
-          display: inline-block;
-          transform: rotate(-30deg);
-          position: absolute;
-          left: 17px;
-          top: -13px;
-        }
-        &:after {
-          content: '';
-          width: 5px;
-          height: 5px;
-          background: #ff9232;
-          display: inline-block;
-          border-radius: 50%;
-          position: absolute;
-          top: -2px;
-          box-shadow: 0px 0px 5px 1px #ff9232;
-          left: -2px;
-        }
-      }
-      &.arrow_4 {
-        width: 20px;
-        height: 1px;
-        background: #77f364;
-        transform: rotate(-30deg);
-        display: inline-block;
-        margin-top: 40px;
-        float: right;
-        &:before {
-          content: '';
-          width: 50px;
-          height: 1px;
-          background: #77f364;
-          display: inline-block;
-          transform: rotate(30deg);
-          position: absolute;
-          left: -47px;
-          top: -13px;
-        }
-        &:after {
-          content: '';
-          width: 5px;
-          height: 5px;
-          background: #77f364;
-          display: inline-block;
-          border-radius: 50%;
-          position: absolute;
-          top: -2px;
-          box-shadow: 0px 0px 5px 1px #77f364;
-          left: 17px;
-        }
-      }
-    }
-  }
-}
-
-@keyframes clip_line {
-  0% {
-    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
-  }
-  75% {
-    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
-  }
-  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);
-  }
-  66.66% {
-    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
-  }
-  83% {
-    clip-path: polygon(0% 0, 50% 0%, 50% 50%, 0% 50%);
-  }
-  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);
-  }
-  75% {
-    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
-  }
-  93% {
-    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
-  }
-  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);
-  }
-  70% {
-    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
-  }
-  85% {
-    clip-path: polygon(0% 0, 50% 0%, 50% 50%, 0% 50%);
-  }
-  100% {
-    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
-  }
-}
-
-@keyframes opacity_path {
-  0% {
-    opacity: 0;
-  }
-  66.7% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes opacity_path2 {
-  0% {
-    opacity: 0;
-  }
-  75% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes opacity_path3 {
-  0% {
-    opacity: 0;
-  }
-  80% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes opacity_path4 {
-  0% {
-    opacity: 0;
-  }
-  83.33% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes trigle_down1 {
-  0% {
-    top: -250px;
-  }
-  100% {
-    top: 80px;
-  }
-}
-@keyframes trigle_down2 {
-  0% {
-    top: -300px;
-  }
-  50% {
-    top: -300px;
-  }
-  100% {
-    top: 45px;
-  }
-}
-@keyframes trigle_down3 {
-  0% {
-    top: -250px;
-  }
-  66.66% {
-    top: -250px;
-  }
-  100% {
-    top: 0;
-  }
-}
-@keyframes trigle_down4 {
-  0% {
-    top: -250px;
-  }
-  75% {
-    top: -250px;
-  }
-  100% {
-    top: -28px;
-  }
-}
-
-@keyframes trigle_move {
-  0% {
-    transform: rotateX(65deg) rotateZ(360deg);
-  }
-  100% {
-    transform: rotateX(65deg) rotateZ(0deg);
-  }
-}
-@keyframes trigle_move1 {
-  0% {
-    transform: rotateX(66deg) rotateZ(0deg);
-  }
-  100% {
-    transform: rotateX(66deg) rotateZ(360deg);
-  }
-}
-</style>

src/components/pyramidTrend/index.vue

@@ -1,252 +0,0 @@
-<!--
- 描述: 金字塔趋势
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">金字塔趋势</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="chart_ptrend"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `pyramidTrend`,
-  data() {
-    return {
-      option: null,
-      dataMap: {},
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    dataFormatter(obj) {
-      let pList = [
-        `长沙`,
-        `湘潭`,
-        `株洲`,
-        `岳阳`,
-        `邵阳`,
-        `衡阳`,
-        `益阳`,
-        `娄底`,
-        `怀化`,
-        `湘西`,
-        `张家界`,
-        `郴州`,
-        `常德`,
-        `永州`,
-      ]
-      let temp
-      for (let x = 0; x < 3; x++) {
-        let max = 0
-        let sum = 0
-        temp = obj[x]
-        for (let i = 0, l = temp.length; i < l; i++) {
-          max = Math.max(max, temp[i])
-          sum += temp[i]
-          obj[x][i] = {
-            name: pList[i],
-            value: temp[i],
-          }
-        }
-        obj[x + `max`] = Math.floor(max / 100) * 100
-        obj[x + `sum`] = sum
-      }
-      return obj
-    },
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_ptrend`))
-      let itemStyle = {
-        barBorderRadius: [15, 0],
-        color: `#0084ff`,
-      }
-
-      this.dataMap.dataType = this.dataFormatter({
-        2: [124, 145, 261, 54, 195, 131, 150, 39, 11, 40, 23, 51, 45, 88],
-        1: [136, 159, 205, 41, 306, 7, 77, 101, 24, 34, 8, 15, 14, 9],
-        0: [118, 128, 220, 47, 92, 14, 9, 11, 113, 61, 11, 22, 33, 5],
-      })
-
-      this.option = {
-        baseOption: {
-          timeline: {
-            axisType: `category`,
-            autoPlay: true,
-            playInterval: 1000,
-            data: [`一类`, `二类`, `三类`],
-            left: 80,
-            right: 80,
-            bottom: 10,
-            lineStyle: {
-              color: `#179bf1`,
-            },
-            label: {
-              color: `#fff`,
-            },
-            checkpointStyle: {
-              color: `#01d8ff`,
-              symbolSize: 10,
-              borderColor: `rgba(1, 216, 255, 0.5)`,
-              borderWidth: 5,
-            },
-            controlStyle: {
-              show: false,
-            },
-            itemStyle: {
-              borderColor: `#004b85`,
-              borderWidth: 1,
-              shadowColor: `rgba(1, 216, 225, 0.5)`,
-              shadowBlur: 5,
-            },
-            emphasis: {
-              label: {
-                color: `#01d8ff`,
-                show: false,
-              },
-              checkpointStyle: {
-                color: `#01d8ff`,
-                borderColor: `rgba(1, 216, 255, 0.5)`,
-                borderWidth: 5,
-              },
-              itemStyle: {
-                color: `#01d8ff`,
-                borderColor: `rgba(1, 216, 225, 0.5)`,
-                borderWidth: 5,
-              },
-            },
-          },
-          calculable: true,
-          grid: {
-            top: `10%`,
-            bottom: `25%`,
-          },
-          xAxis: [
-            {
-              type: `category`,
-              axisLabel: {
-                interval: 0,
-              },
-              data: [
-                `长沙`,
-                `湘潭`,
-                `株洲`,
-                `岳阳`,
-                `邵阳`,
-                `衡阳`,
-                `益阳`,
-                `娄底`,
-                `怀化`,
-                `湘西`,
-                `张家界`,
-                `郴州`,
-                `常德`,
-                `永州`,
-              ],
-              splitLine: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: `#2867a8`,
-                },
-              },
-            },
-          ],
-          yAxis: [
-            {
-              type: `value`,
-              name: `家`,
-              splitLine: {
-                show: false,
-              },
-              axisTick: {
-                show: false,
-              },
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: `#2867a8`,
-                },
-              },
-            },
-          ],
-          series: [
-            {
-              name: `一类`,
-              type: `bar`,
-              barWidth: 15,
-              legendHoverLink: true,
-              label: {
-                show: true,
-                position: `top`,
-                color: `#fff`,
-              },
-            },
-          ],
-        },
-        options: [
-          {
-            series: [
-              {
-                data: this.dataMap.dataType[`0`],
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            series: [
-              {
-                data: this.dataMap.dataType[`1`],
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            series: [
-              {
-                data: this.dataMap.dataType[`2`],
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 666px;
-  top: 1548px;
-  width: 586px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/components/rainbow/index.vue

@@ -1,440 +0,0 @@
-<!--
- 描述: 彩虹轨道图
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">彩虹轨道</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="chart_rbt"></div>
-
-          <div
-            class="preinfo"
-            :class="`preinfo${index}`"
-            v-for="(item, index) in arrData"
-            :key="index"
-          >
-            <span>{{ item.percent }}%</span>
-            <span>{{ item.name }}</span>
-          </div>
-
-          <div class="preinfos" :class="`pre${i}`" v-for="(v, i) in arrData">
-            <span></span>
-            <span></span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `rainbow`,
-  data() {
-    return {
-      option: null,
-      arrData: [
-        {
-          name: `食品类`,
-          percent: 73,
-        },
-        {
-          name: `工业类`,
-          percent: 20,
-        },
-        {
-          name: `医疗类`,
-          percent: 32,
-        },
-        {
-          name: `政务类`,
-          percent: 60,
-        },
-        {
-          name: `金融类`,
-          percent: 14,
-        },
-      ],
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_rbt`))
-      let itemStyle = {
-        normal: {
-          color: `rgba(0, 0, 0, 0)`,
-        },
-      }
-
-      this.option = {
-        color: [`#125ec1`, `#3fa5c0`, `#d68639`, `#ad5b68`, `#6082a5`],
-        series: [
-          {
-            name: `金融类`,
-            type: `pie`,
-            clockWise: false,
-            startAngle: 90,
-            hoverAnimation: false,
-            radius: [`85%`, `90%`],
-            center: [`50%`, `50%`],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              shadowColor: `#125ec1`,
-              shadowBlur: 15,
-            },
-            data: [
-              {
-                value: 15,
-                name: `15%`,
-                itemStyle: {
-                  normal: {
-                    color: `#125ec1`,
-                  },
-                },
-              },
-              {
-                value: 85,
-                name: `50%`,
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            name: `政务类`,
-            type: `pie`,
-            clockWise: false,
-            startAngle: 90,
-            hoverAnimation: false,
-            radius: [`72%`, `77%`],
-            center: [`50%`, `50%`],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              shadowColor: `#3fa5c0`,
-              shadowBlur: 15,
-            },
-            data: [
-              {
-                value: 60,
-                name: `60%`,
-                itemStyle: {
-                  normal: {
-                    color: `#3fa5c0`,
-                  },
-                },
-              },
-              {
-                value: 40,
-                name: `40%`,
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            name: `医疗类`,
-            type: `pie`,
-            clockWise: false,
-            startAngle: 90,
-            hoverAnimation: false,
-            radius: [`59%`, `64%`],
-            center: [`50%`, `50%`],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              shadowColor: `#d68639`,
-              shadowBlur: 15,
-            },
-            data: [
-              {
-                value: 32,
-                name: `32%`,
-                itemStyle: {
-                  normal: {
-                    color: `#d68639`,
-                  },
-                },
-              },
-              {
-                value: 68,
-                name: `68%`,
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            name: `工业类`,
-            type: `pie`,
-            clockWise: false,
-            startAngle: 90,
-            hoverAnimation: false,
-            radius: [`46%`, `51%`],
-            center: [`50%`, `50%`],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              shadowColor: `#ad5b68`,
-              shadowBlur: 15,
-            },
-            data: [
-              {
-                value: 20,
-                name: `20%`,
-                itemStyle: {
-                  normal: {
-                    color: `#ad5b68`,
-                  },
-                },
-              },
-              {
-                value: 80,
-                name: `80%`,
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-          {
-            name: `食品类`,
-            type: `pie`,
-            clockWise: false,
-            startAngle: 90,
-            hoverAnimation: false,
-            radius: [`33%`, `38%`],
-            center: [`50%`, `50%`],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              shadowColor: `#6082a5`,
-              shadowBlur: 15,
-            },
-            data: [
-              {
-                value: 73,
-                name: `73%`,
-                itemStyle: {
-                  normal: {
-                    color: `#6082a5`,
-                  },
-                },
-              },
-              {
-                value: 27,
-                name: `27%`,
-                itemStyle: itemStyle,
-              },
-            ],
-          },
-        ],
-      }
-
-      // 使用制定的配置项和数据显示图表
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 50px;
-  top: 2838px;
-  width: 432px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-
-  .preinfo {
-    position: absolute;
-    left: 63%;
-    top: 50%;
-    margin-left: -2.5em;
-    -webkit-transform: translate(0%, -50%);
-    -moz-transform: translate(0%, -50%);
-    -ms-transform: translate(0%, -50%);
-    -o-transform: translate(0%, -50%);
-    transform: translate(0%, -50%);
-    white-space: nowrap;
-    font-size: 13px;
-    span {
-      &:nth-child(1) {
-        margin-right: 10px;
-      }
-    }
-    &.preinfo0 {
-      color: rgb(99, 139, 176);
-      margin-top: -65px;
-    }
-    &.preinfo1 {
-      color: rgb(180, 91, 111);
-      margin-top: -87px;
-    }
-    &.preinfo2 {
-      color: rgb(232, 138, 50);
-      margin-top: -109px;
-    }
-    &.preinfo3 {
-      color: rgb(70, 179, 200);
-      margin-top: -131px;
-    }
-    &.preinfo4 {
-      color: rgb(19, 98, 201);
-      margin-top: -153px;
-    }
-  }
-
-  .preinfos {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 1px;
-    height: 58px;
-    background-color: rgb(99, 139, 176);
-    -webkit-transform-origin: 50% 0;
-    -moz-transform-origin: 50% 0;
-    -ms-transform-origin: 50% 0;
-    -o-transform-origin: 50% 0;
-    transform-origin: 50% 0;
-    span {
-      &:nth-child(1) {
-        width: 8px;
-        height: 8px;
-        -webkit-border-radius: 100%;
-        -moz-border-radius: 100%;
-        border-radius: 100%;
-        position: absolute;
-        left: -3px;
-        top: 50%;
-      }
-      &:nth-child(2) {
-        width: 0;
-        height: 0;
-        border-width: 12px 5px 5px 5px;
-        border-style: solid;
-        position: absolute;
-        left: -5px;
-        top: 100%;
-      }
-    }
-    &.pre0 {
-      height: 65px;
-      background-color: rgb(99, 139, 176);
-      transform: rotate(-62.614deg);
-      span {
-        &:nth-child(1) {
-          background-color: rgb(99, 139, 176);
-        }
-        &:nth-child(2) {
-          border-color: rgb(99, 139, 176) transparent transparent;
-        }
-      }
-    }
-    &.pre1 {
-      height: 87px;
-      background-color: rgb(180, 91, 111);
-      transform: rotate(125.593deg);
-      span {
-        &:nth-child(1) {
-          background-color: rgb(180, 91, 111);
-        }
-        &:nth-child(2) {
-          border-color: rgb(180, 91, 111) transparent transparent;
-        }
-      }
-    }
-    &.pre2 {
-      height: 109px;
-      background-color: rgb(232, 138, 50);
-      transform: rotate(86.2006deg);
-      span {
-        &:nth-child(1) {
-          background-color: rgb(232, 138, 50);
-        }
-        &:nth-child(2) {
-          border-color: rgb(232, 138, 50) transparent transparent;
-        }
-      }
-    }
-    &.pre3 {
-      height: 131px;
-      background-color: rgb(70, 179, 200);
-      transform: rotate(-18.845deg);
-      span {
-        &:nth-child(1) {
-          background-color: rgb(70, 179, 200);
-        }
-        &:nth-child(2) {
-          border-color: rgb(70, 179, 200) transparent transparent;
-        }
-      }
-    }
-    &.pre4 {
-      height: 153px;
-      background-color: rgb(19, 98, 201);
-      transform: rotate(149.666deg);
-      span {
-        &:nth-child(1) {
-          background-color: rgb(19, 98, 201);
-        }
-        &:nth-child(2) {
-          border-color: rgb(19, 98, 201) transparent transparent;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/ringPie/index.vue

@@ -1,213 +0,0 @@
-<!--
- 描述: 环形饼图
- 作者: Jack Chen
- 日期: 2020-05-02
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">环形饼图</div>
-      <div class="sn-body">
-        <div class="wrap-container ring-pie">
-          <div class="back-chart">
-            <svg
-              width="100%"
-              height="100%"
-              viewBox="0 0 150 150"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-              <path
-                id="svg_2"
-                d="m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z"
-                stroke="#2de6af"
-                fill-opacity="null"
-                fill="none"
-              ></path>
-            </svg>
-          </div>
-
-          <div class="chartsdom" id="chart_rp"></div>
-
-          <div class="arrow-cir arrow-cir1"></div>
-          <div class="arrow-cir arrow-cir2"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `ringPie`,
-  data() {
-    return {
-      option: null,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_rp`))
-      this.option = {
-        series: [
-          {
-            name: `环形饼图`,
-            type: `pie`,
-            radius: [`68%`, `80%`],
-            hoverAnimation: false,
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: `center`,
-            },
-            emphasis: {
-              label: {
-                show: false,
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              {
-                value: 6,
-                name: `区块链`,
-                itemStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                      {
-                        offset: 0,
-                        color: `#6984fe`,
-                      },
-                      {
-                        offset: 1,
-                        color: `#24d1fd`,
-                      },
-                    ]),
-                  },
-                },
-              },
-              {
-                value: 4,
-                name: `大数据`,
-                itemStyle: {
-                  normal: {
-                    color: `#eee`,
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 974px;
-  top: 1978px;
-  width: 432px;
-  height: 400px;
-  .wrap-container {
-    left: 125px;
-    top: 94px;
-    width: 150px;
-    height: 150px;
-  }
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-
-  .back-chart {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: url(../../assets/img/back_chart.png) no-repeat center;
-  }
-  .arrow-cir {
-    width: 8px;
-    height: 8px;
-    offset-distance: 0%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    &.arrow-cir1 {
-      background: url(../../assets/img/icon_04.png) no-repeat 50% 50%;
-      -webkit-animation: arrow-cir1 5s linear infinite;
-      animation: arrow-cir1 5s linear infinite;
-      offset-path: path(
-        'm3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z'
-      );
-    }
-    &.arrow-cir2 {
-      background: url(../../assets/img/icon_05.png) no-repeat 50% 50%;
-      -webkit-animation: arrow-cir2 5s linear infinite;
-      animation: arrow-cir2 5s linear infinite;
-      offset-path: path(
-        'm3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z'
-      );
-    }
-  }
-}
-
-@-webkit-keyframes arrow-cir1 {
-  0% {
-    offset-distance: 40%;
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 140%;
-    opacity: 1;
-  }
-}
-@keyframes arrow-cir1 {
-  0% {
-    offset-distance: 40%;
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 140%;
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes arrow-cir2 {
-  0% {
-    offset-distance: 0%;
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 100%;
-    opacity: 1;
-  }
-}
-@keyframes arrow-cir2 {
-  0% {
-    offset-distance: 0%;
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 100%;
-    opacity: 1;
-  }
-}
-</style>

src/components/ringPin/index.vue

@@ -1,668 +0,0 @@
-<!--
- 描述: 环形气泡图
- 作者: 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>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `ringPin`,
-  data() {
-    return {
-      option: null,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      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`,
-          },
-        ]),
-      }
-      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: [
-          `#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年`,
-          ],
-          textStyle: {
-            color: `#fff`,
-            fontSize: 14,
-          },
-          itemWidth: 20,
-          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: {
-                  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: 0,
-            hoverAnimation: false,
-            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: 300,
-                itemStyle: {
-                  normal: {
-                    color: `rgba(0, 0, 0, 0)`,
-                  },
-                },
-              },
-              {
-                value: 210,
-                itemStyle: linearGradient3,
-              },
-              {
-                value: 90,
-                itemStyle: {
-                  normal: {
-                    color: `#03414f`,
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: `2016年`,
-            type: `pie`,
-            clockWise: false,
-            startAngle: 0,
-            hoverAnimation: false,
-            radius: [`45%`, `50%`],
-            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: 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`,
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 50px;
-  top: 1120px;
-  width: 432px;
-  height: 400px;
-  .chartsdom {
-    left: 23px;
-    top: 15px;
-    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,283 +0,0 @@
-<!--
- 描述: 旋转多彩图
- 作者: Jack Chen
- 日期: 2020-04-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="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`,
-  data() {
-    return {
-      option: null,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_rotate`))
-      this.option = {
-        tooltip: {
-          trigger: `item`,
-          formatter: `{a} <br/>{b} : {c} ({d}%)`,
-        },
-        legend: {
-          show: true,
-          orient: `vertical`,
-          left: `center`,
-          top: `middle`,
-          data: [`内存`, `存储`],
-          textStyle: {
-            color: `#4ce5ff`,
-            fontSize: 14,
-          },
-          itemWidth: 20,
-          itemHeight: 10,
-        },
-        label: {
-          normal: {
-            show: false,
-          },
-        },
-        labelLine: {
-          normal: {
-            show: false,
-          },
-        },
-        series: [
-          {
-            name: `磁盘空间`,
-            type: `pie`,
-            radius: [60, 110],
-            center: [`50%`, `50%`],
-            roseType: `area`,
-            label: {
-              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)`,
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 512px;
-  top: 1120px;
-  width: 432px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-
-  .pie {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    .pies {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background-repeat: no-repeat;
-      background-position: center center;
-    }
-    .pie1 {
-      background-image: url(../../assets/img/whcircle.png);
-      animation: mymove 20s linear infinite;
-      -webkit-animation: mymove 20s linear infinite;
-    }
-    .pie2 {
-      background-image: url(../../assets/img/circle2.png);
-      animation: moveto 20s linear infinite;
-      -webkit-animation: moveto 20s linear infinite;
-    }
-    .pie3 {
-      background-image: url(../../assets/img/inner.png);
-    }
-    .pie4 {
-      position: absolute;
-      top: 50%;
-      left: 36%;
-      width: 76px;
-      height: 1px;
-      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;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes mymove {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@-webkit-keyframes moveto {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-@keyframes moveto {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-</style>

src/components/scanRadius/index.vue

@@ -1,679 +0,0 @@
-<!--
- 描述: 扫描半径图
- 作者: Jack Chen
- 日期: 2020-04-30
--->
-
-<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_scan"></div>
-          <div class="box">
-            <div class="nodetext text0">
-              <span>区块链</span>
-            </div>
-            <div class="nodetext text1">
-              <span>人工智能</span>
-            </div>
-            <div class="nodetext text2">
-              <span>大数据</span>
-            </div>
-            <div class="nodetext text3">
-              <span>云计算</span>
-            </div>
-            <div class="nodetext text4">
-              <span>移动互联网</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `scanRadius`,
-  data() {
-    return {
-      option: null,
-      option2: null,
-      val: 0,
-    }
-  },
-  mounted() {
-    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`,
-                },
-              ]),
-            },
-          },
-        },
-      ]
-
-      for (let i = 0; i < arrData.length; i++) {
-        this.val += arrData[i].value
-      }
-
-      arrData.push({
-        value: this.val,
-        name: `__other`,
-        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)`,
-      }
-
-      this.option = {
-        label: {
-          normal: {
-            show: false,
-          },
-        },
-        labelLine: {
-          normal: {
-            show: false,
-          },
-        },
-        tooltip: {
-          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: {
-              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,
-              },
-            },
-            labelLine: {
-              normal: {
-                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)`,
-                  },
-                },
-              },
-            ],
-          },
-          {
-            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: `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,
-          },
-          {
-            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,
-          },
-          {
-            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,
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 1436px;
-  top: 1120px;
-  width: 432px;
-  height: 400px;
-  .chartsdom {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  .box {
-    overflow: hidden;
-    .nodetext {
-      position: absolute;
-      left: 50%;
-      top: 51%;
-      margin-left: -9px;
-      -webkit-transform: translate(0%, -60%);
-      -moz-transform: translate(0%, -60%);
-      -ms-transform: translate(0%, -60%);
-      -o-transform: translate(0%, -60%);
-      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;
-        width: 70px;
-        height: 50px;
-        margin-left: -110px;
-        margin-top: 25px;
-        span {
-          position: absolute;
-          margin-top: 50px;
-        }
-        &:before {
-          content: '';
-          position: absolute;
-          width: 5px;
-          height: 5px;
-          margin-top: 47px;
-          -webkit-border-radius: 100%;
-          -moz-border-radius: 100%;
-          border-radius: 100%;
-          background: rgb(47, 138, 240);
-        }
-      }
-      &.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;
-        span {
-          position: absolute;
-          margin-left: -50px;
-          margin-top: 83px;
-        }
-        &:before {
-          content: '';
-          position: absolute;
-          width: 5px;
-          height: 5px;
-          margin-top: 77px;
-          -webkit-border-radius: 100%;
-          -moz-border-radius: 100%;
-          border-radius: 100%;
-          background: rgb(117, 94, 255);
-        }
-      }
-      &.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;
-        span {
-          position: absolute;
-          display: block;
-          width: 330px;
-          margin-left: 8px;
-          margin-top: 100px;
-        }
-        &:before {
-          content: '';
-          position: absolute;
-          width: 5px;
-          height: 5px;
-          margin-top: 92px;
-          margin-left: 26px;
-          -webkit-border-radius: 100%;
-          -moz-border-radius: 100%;
-          border-radius: 100%;
-          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;
-        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;
-        span {
-          position: absolute;
-          display: block;
-          width: 330px;
-          margin-left: 6px;
-          margin-top: 83px;
-        }
-        &:before {
-          content: '';
-          position: absolute;
-          width: 5px;
-          height: 5px;
-          margin-top: 77px;
-          margin-left: 27px;
-          -webkit-border-radius: 100%;
-          -moz-border-radius: 100%;
-          border-radius: 100%;
-          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;
-        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;
-        span {
-          position: absolute;
-          display: block;
-          width: 330px;
-          margin-left: 10px;
-          margin-top: 50px;
-        }
-        &:before {
-          content: '';
-          position: absolute;
-          width: 5px;
-          height: 5px;
-          margin-top: 47px;
-          margin-left: 63px;
-          -webkit-border-radius: 100%;
-          -moz-border-radius: 100%;
-          border-radius: 100%;
-          background: rgb(56, 208, 231);
-        }
-      }
-    }
-  }
-}
-</style>

src/components/scrollArc/index.vue

@@ -1,169 +0,0 @@
-<!--
- 描述: 滚动弧形线
- 作者: Jack Chen
- 日期: 2020-04-20
--->
-
-<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_arc"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  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],
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      let myChart = echarts.init(document.getElementById(`chart_arc`))
-      this.option = {
-        tooltip: {
-          trigger: `axis`,
-          showContent: false,
-          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: [`#5d83ff`],
-        grid: {
-          top: 30,
-          left: 20,
-          right: 20,
-          bottom: 20,
-          containLabel: true, // 轴上的数值
-        },
-        xAxis: {
-          type: `category`,
-          data: this.xData,
-          boundaryGap: false,
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            formatter: `{value} 月`,
-          },
-          axisLine: {
-            lineStyle: {
-              color: `#999`,
-            },
-          },
-        },
-        yAxis: {
-          type: `value`,
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: `#999`,
-            },
-          },
-        },
-        series: [
-          {
-            name: `人数`,
-            type: `line`,
-            data: this.data,
-            symbolSize: 10,
-            itemStyle: {
-              opacity: 0,
-            },
-            emphasis: {
-              label: {
-                show: true,
-                color: `#fff`,
-                fontSize: 20,
-              },
-              itemStyle: {
-                color: `#5d83ff`,
-                borderColor: `#fff`,
-                borderWidth: 2,
-                opacity: 1,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: `#5d83ff`,
-                  },
-                  {
-                    offset: 1,
-                    color: `rgba(0, 0, 0, 0)`,
-                  },
-                ]),
-              },
-            },
-            smooth: true,
-          },
-        ],
-      }
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-
-      this.timer = setInterval(() => {
-        myChart.dispatchAction({
-          type: `showTip`,
-          seriesIndex: 0,
-          dataIndex: this.number,
-        })
-
-        this.number++
-
-        if (this.number > this.data.length) {
-          this.number = 0
-        }
-      }, 1000)
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 50px;
-  top: 690px;
-  width: 895px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 95%;
-  }
-}
-</style>

src/components/seamless/index.vue

@@ -1,223 +0,0 @@
-<!--
- 描述: 新闻无缝滚动
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">新闻无缝滚动</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="table">
-            <table
-              border="0"
-              cellpadding="0"
-              cellspacing="0"
-              class="table-header"
-            >
-              <tbody>
-                <tr>
-                  <td width="60%">
-                    <span>标 题</span>
-                  </td>
-                  <td width="20%">
-                    <span>日 期</span>
-                  </td>
-                  <td width="20%">
-                    <span>热 度</span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-
-            <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">
-                    <td width="100%" class="title">
-                      <span>{{ item.title }}</span>
-                    </td>
-                    <td width="20%">
-                      <span>{{ item.date }}</span>
-                    </td>
-                    <td width="20%">
-                      <span
-                        :class="{
-                          colorRed: item.hot > 4999,
-                          colorOrange: item.hot < 10,
-                        }"
-                        >{{ item.hot }}</span
-                      >
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </vue-seamless-scroll>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import vueSeamlessScroll from 'vue-seamless-scroll'
-
-export default {
-  name: `seamless`,
-  components: {
-    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,
-        },
-      ],
-    }
-  },
-  computed: {
-    optionSetting() {
-      return {
-        step: 0.5, // 数值越大速度滚动越快
-        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
-        hoverStop: true, // 是否开启鼠标悬停stop
-        direction: 1, // 0向下 1向上 2向左 3向右
-        // autoPlay: false,
-        openWatch: true, // 开启数据实时监控刷新dom
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
-        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
-      }
-    },
-  },
-  mounted() {},
-  methods: {},
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 1370px;
-  top: 110px;
-  %table-style {
-    width: 100%;
-    height: 35px;
-    table-layout: fixed;
-    tr {
-      td {
-        padding: 10px 5px;
-        text-align: center;
-        background-color: transparent;
-        white-space: nowrap;
-        overflow: hidden;
-        color: #e2e5ff;
-        font-size: 14px;
-      }
-    }
-  }
-  .table {
-    .table-header {
-      @extend %table-style;
-    }
-    .seamless-warp {
-      height: 400px;
-      overflow: hidden;
-      visibility: visible;
-      .colorRed {
-        color: #ff4669;
-      }
-      .colorOrange {
-        color: #ffc956;
-      }
-      .item {
-        height: auto;
-        @extend %table-style;
-        tr {
-          td {
-            &.title {
-              text-overflow: ellipsis;
-              display: inline-block;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/components/sinan/index.vue

@@ -1,897 +0,0 @@
-<!--
- 描述: 司南排名图
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">司南排名图</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="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-4"></div>
-
-                <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>
-                </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>
-</template>
-
-<script>
-export default {
-  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`,
-        },
-      ],
-    }
-  },
-  mounted() {
-    setTimeout(() => {
-      this.number = 0
-      this.initData()
-    }, 4000)
-  },
-  methods: {
-    initData() {
-      this.number = this.number == this.arr.length ? 0 : this.number
-      this.timer = setTimeout(() => {
-        this.number++
-        this.initData()
-      }, 5000)
-    },
-  },
-  beforeDestroy() {
-    clearTimeout(this.timer)
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 50px;
-  top: 110px;
-  .pd-main {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    [class^='chart'] {
-      position: absolute;
-      -webkit-transform-origin: left top;
-      -moz-transform-origin: left top;
-      -ms-transform-origin: left top;
-      -o-transform-origin: left top;
-      transform-origin: left top;
-    }
-    .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%);
-    }
-
-    .compass {
-      width: 100%;
-      height: 100%;
-      -webkit-transform: scale(0.9);
-      -moz-transform: scale(0.9);
-      -ms-transform: scale(0.9);
-      -o-transform: scale(0.9);
-      transform: scale(0.9);
-      [class^='compass-bg-'] {
-        position: absolute;
-        bottom: 0;
-      }
-
-      %compass-bg {
-        position: absolute;
-        bottom: 0px;
-        left: 50%;
-        -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
-        -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
-        transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
-      }
-      .compass-bg-1 {
-        @extend %compass-bg;
-        margin-left: -250px;
-        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)
-        );
-        display: none;
-      }
-      .compass-bg-2 {
-        @extend %compass-bg;
-        margin-left: -220px;
-        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)
-        );
-        display: none;
-      }
-      .compass-bg-3 {
-        @extend %compass-bg;
-        margin-left: -190px;
-        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)
-        );
-      }
-      .compass-bg-4 {
-        @extend %compass-bg;
-        margin-left: -160px;
-        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)
-        );
-      }
-      .compass-bg-5 {
-        @extend %compass-bg;
-        margin-left: -130px;
-        bottom: -80px;
-        width: 260px;
-        height: 260px;
-        -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
-        -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
-        box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
-      }
-      .compass-bg-6 {
-        @extend %compass-bg;
-        margin-left: -100px;
-        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)
-        );
-        display: none;
-      }
-      .compass-bg-7 {
-        @extend %compass-bg;
-        margin-left: -70px;
-        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;
-        -moz-animation: bgshadow 3s linear infinite;
-        -o-animation: bgshadow 3s linear infinite;
-        animation: bgshadow 3s linear infinite;
-      }
-
-      .compass-bg-c-1 {
-        width: 100%;
-        height: 100%;
-        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;
-        opacity: 0.8;
-        -webkit-animation: fadebg 3s linear infinite;
-        -moz-animation: fadebg 3s linear infinite;
-        -o-animation: fadebg 3s linear infinite;
-        animation: fadebg 3s linear infinite;
-      }
-      .compass-bg-c-3 {
-        width: 100%;
-        height: 100%;
-        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;
-        -webkit-animation: numberfade 5s linear infinite;
-        -moz-animation: numberfade 5s linear infinite;
-        -o-animation: numberfade 5s linear infinite;
-        animation: numberfade 5s linear infinite;
-      }
-
-      .compass-text {
-        position: absolute;
-        overflow: hidden;
-        left: 50%;
-        margin-left: -60px;
-        font-size: 12px;
-        background-color: rgba(0, 71, 157, 0.4);
-        padding: 5px 10px;
-        color: #00c2ff;
-        -webkit-border-radius: 6px;
-        -moz-border-radius: 6px;
-        border-radius: 6px;
-        line-height: 1.5;
-        /*-webkit-transform: scale(0.8);
-        -moz-transform: scale(0.8);
-        -ms-transform: scale(0.8);
-        -o-transform: scale(0.8);
-        transform: scale(0.8);*/
-        display: none;
-        &.compass-text-1 {
-          top: -77px;
-          left: 48px;
-        }
-        &.compass-text-2 {
-          top: -35px;
-          left: 152px;
-        }
-        &.compass-text-3 {
-          top: 5px;
-          left: 250px;
-        }
-        &.compass-text-4 {
-          top: 49px;
-          left: 350px;
-        }
-        &.compass-text-5 {
-          top: 88px;
-          left: 450px;
-        }
-        &.compass-text-6 {
-          color: #d57a31;
-          bottom: -945px;
-          -webkit-animation-delay: 25s;
-          -moz-animation-delay: 25s;
-          -o-animation-delay: 25s;
-          animation-delay: 25s;
-        }
-        &.compass-text-7 {
-          color: #d57a31;
-          bottom: -1150px;
-          -webkit-animation-delay: 30s;
-          -moz-animation-delay: 30s;
-          -o-animation-delay: 30s;
-          animation-delay: 30s;
-        }
-        %span-nth-child {
-          margin-top: 0px;
-        }
-        span {
-          display: block;
-          &:nth-child(1) {
-            @extend %span-nth-child;
-          }
-          &:nth-child(2) {
-            @extend %span-nth-child;
-          }
-          &:nth-child(3) {
-            @extend %span-nth-child;
-          }
-        }
-        &.show {
-          display: block;
-        }
-      }
-
-      .compass-number {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        bottom: 50px;
-        > .szscale {
-          -webkit-transform: scale(1.2);
-          -moz-transform: scale(1.2);
-          -ms-transform: scale(1.2);
-          -o-transform: scale(1.2);
-          transform: scale(1.2);
-          -webkit-transform-origin: center bottom;
-          -moz-transform-origin: center bottom;
-          -ms-transform-origin: center bottom;
-          -o-transform-origin: center bottom;
-          transform-origin: center bottom;
-        }
-        > div {
-          position: absolute;
-          bottom: 0;
-          width: 55px;
-          height: 0;
-          -webkit-animation: sz 1s linear;
-          -moz-animation: sz 1s linear;
-          -o-animation: sz 1s linear;
-          animation: sz 1s linear;
-          -webkit-animation-fill-mode: forwards;
-          -moz-animation-fill-mode: forwards;
-          -o-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-          -webkit-transition: 1s;
-          -o-transition: 1s;
-          -moz-transition: 1s;
-          transition: 1s;
-          &:nth-child(1) {
-            left: 5%;
-            color: #ff9232;
-            -webkit-animation-delay: 0s;
-            -moz-animation-delay: 0s;
-            -o-animation-delay: 0s;
-            animation-delay: 0s;
-            &:after {
-              -webkit-animation-delay: 0s;
-              -moz-animation-delay: 0s;
-              -o-animation-delay: 0s;
-              animation-delay: 0s;
-            }
-          }
-          &:nth-child(2) {
-            left: 25%;
-            color: #d5c245;
-            -webkit-animation-delay: 0.2s;
-            -moz-animation-delay: 0.2s;
-            -o-animation-delay: 0.2s;
-            animation-delay: 0.2s;
-            bottom: -10%;
-            &:after {
-              -webkit-animation-delay: 2.85s;
-              -moz-animation-delay: 2.85s;
-              -o-animation-delay: 2.85s;
-              animation-delay: 2.85s;
-            }
-          }
-          &:nth-child(3) {
-            left: 45%;
-            color: #01a455;
-            -webkit-animation-delay: 0.4s;
-            -moz-animation-delay: 0.4s;
-            -o-animation-delay: 0.4s;
-            animation-delay: 0.4s;
-            bottom: -20%;
-            &:after {
-              -webkit-animation-delay: 5.7s;
-              -moz-animation-delay: 5.7s;
-              -o-animation-delay: 5.7s;
-              animation-delay: 5.7s;
-            }
-          }
-          &:nth-child(4) {
-            left: 65%;
-            color: #85adfb;
-            -webkit-animation-delay: 0.6s;
-            -moz-animation-delay: 0.6s;
-            -o-animation-delay: 0.6s;
-            animation-delay: 0.6s;
-            bottom: -30%;
-            &:after {
-              -webkit-animation-delay: 8.55s;
-              -moz-animation-delay: 8.55s;
-              -o-animation-delay: 8.55s;
-              animation-delay: 8.55s;
-            }
-          }
-          &:nth-child(5) {
-            left: 85%;
-            color: #c36885;
-            -webkit-animation-delay: 0.8s;
-            -moz-animation-delay: 0.8s;
-            -o-animation-delay: 0.8s;
-            animation-delay: 0.8s;
-            bottom: -40%;
-            &:after {
-              -webkit-animation-delay: 11.4s;
-              -moz-animation-delay: 11.4s;
-              -o-animation-delay: 11.4s;
-              animation-delay: 11.4s;
-            }
-          }
-          &:nth-child(6) {
-            left: 75%;
-            color: #f674a0;
-            -webkit-animation-delay: 1s;
-            -moz-animation-delay: 1s;
-            -o-animation-delay: 1s;
-            animation-delay: 1s;
-            bottom: -50%;
-            &:after {
-              -webkit-animation-delay: 14.25s;
-              -moz-animation-delay: 14.25s;
-              -o-animation-delay: 14.25s;
-              animation-delay: 14.25s;
-            }
-          }
-          &:nth-child(7) {
-            left: 87.5%;
-            color: #275fcc;
-            -webkit-animation-delay: 1.2s;
-            -moz-animation-delay: 1.2s;
-            -o-animation-delay: 1.2s;
-            animation-delay: 1.2s;
-            bottom: -60%;
-            &:after {
-              -webkit-animation-delay: 17.1s;
-              -moz-animation-delay: 17.1s;
-              -o-animation-delay: 17.1s;
-              animation-delay: 17.1s;
-            }
-          }
-
-          span {
-            display: block;
-            width: 55px;
-            height: 55px;
-            line-height: 55px;
-            text-align: center;
-            /*padding-bottom: 55px;*/
-            -webkit-box-shadow: inset 0 0 15px currentColor;
-            -moz-box-shadow: inset 0 0 15px currentColor;
-            box-shadow: inset 0 0 15px currentColor;
-            -webkit-border-radius: 100%;
-            -moz-border-radius: 100%;
-            border-radius: 100%;
-          }
-          &:before {
-            content: '';
-            position: absolute;
-            height: 100%;
-            border-left: 1px dashed currentColor;
-            height: 500px;
-            top: 55px;
-            left: 50%;
-            margin-left: -1px;
-          }
-          &:after {
-            content: 'NO.' attr(title);
-            position: absolute;
-            display: inline-block;
-            top: -20px;
-            width: 100%;
-            font-family: 'DIGITALDREAMFAT';
-            text-align: center;
-          }
-        }
-      }
-
-      .line-sx {
-        > div {
-          &:nth-child(2) {
-            height: 90%;
-            -webkit-animation-duration: 2s;
-            -moz-animation-duration: 2s;
-            -o-animation-duration: 2s;
-            animation-duration: 2s;
-            -webkit-animation-delay: 1.5s;
-            -moz-animation-delay: 1.5s;
-            -o-animation-delay: 1.5s;
-            animation-delay: 1.5s;
-            bottom: 0;
-            left: 51px;
-          }
-          &:nth-child(3) {
-            height: 100%;
-            -webkit-animation-duration: 3s;
-            -moz-animation-duration: 3s;
-            -o-animation-duration: 3s;
-            animation-duration: 3s;
-            -webkit-animation-delay: 0s;
-            -moz-animation-delay: 0s;
-            -o-animation-delay: 0s;
-            animation-delay: 0s;
-            bottom: 32px;
-            left: 89px;
-          }
-          &:nth-child(4) {
-            height: 100%;
-            -webkit-animation-duration: 2.5s;
-            -moz-animation-duration: 2.5s;
-            -o-animation-duration: 2.5s;
-            animation-duration: 2.5s;
-            -webkit-animation-delay: 1s;
-            -moz-animation-delay: 1s;
-            -o-animation-delay: 1s;
-            animation-delay: 1s;
-            bottom: 3px;
-            left: 179px;
-            -webkit-filter: hue-rotate(180deg);
-            filter: hue-rotate(180deg);
-          }
-          &:nth-child(5) {
-            height: 90%;
-            -webkit-animation-duration: 2s;
-            -moz-animation-duration: 2s;
-            -o-animation-duration: 2s;
-            animation-duration: 2s;
-            -webkit-animation-delay: 2s;
-            -moz-animation-delay: 2s;
-            -o-animation-delay: 2s;
-            animation-delay: 2s;
-            bottom: 42px;
-            left: 229px;
-          }
-          &:nth-child(6) {
-            height: 100%;
-            -webkit-animation-duration: 2.5s;
-            -moz-animation-duration: 2.5s;
-            -o-animation-duration: 2.5s;
-            animation-duration: 2.5s;
-            -webkit-animation-delay: 0.5s;
-            -moz-animation-delay: 0.5s;
-            -o-animation-delay: 0.5s;
-            animation-delay: 0.5s;
-            bottom: 11px;
-            right: 48px;
-          }
-          &:nth-child(7) {
-            height: 90%;
-            -webkit-animation-duration: 3s;
-            -moz-animation-duration: 3s;
-            -o-animation-duration: 3s;
-            animation-duration: 3s;
-            -webkit-animation-delay: 2.5s;
-            -moz-animation-delay: 2.5s;
-            -o-animation-delay: 2.5s;
-            animation-delay: 2.5s;
-            bottom: -22px;
-            right: 174px;
-            -webkit-filter: hue-rotate(180deg);
-            filter: hue-rotate(180deg);
-          }
-          &:nth-child(8) {
-            height: 90%;
-            -webkit-animation-duration: 3s;
-            -moz-animation-duration: 3s;
-            -o-animation-duration: 3s;
-            animation-duration: 3s;
-            -webkit-animation-delay: 1.5s;
-            -moz-animation-delay: 1.5s;
-            -o-animation-delay: 1.5s;
-            animation-delay: 1.5s;
-            bottom: -22px;
-            right: 100px;
-          }
-          &:nth-child(9) {
-            height: 100%;
-            -webkit-animation-duration: 2.5s;
-            -moz-animation-duration: 2.5s;
-            -o-animation-duration: 2.5s;
-            animation-duration: 2.5s;
-            -webkit-animation-delay: 2s;
-            -moz-animation-delay: 2s;
-            -o-animation-delay: 2s;
-            animation-delay: 2s;
-            bottom: -10px;
-            right: 220px;
-          }
-          &:nth-child(10) {
-            height: 95%;
-            -webkit-animation-duration: 2s;
-            -moz-animation-duration: 2s;
-            -o-animation-duration: 2s;
-            animation-duration: 2s;
-            -webkit-animation-delay: 1s;
-            -moz-animation-delay: 1s;
-            -o-animation-delay: 1s;
-            animation-delay: 1s;
-            bottom: -41px;
-            right: 182px;
-          }
-        }
-        .line-fs {
-          width: 14px;
-          height: 100%;
-          background: url(../../assets/img/chart1/line-fs.png) no-repeat;
-          background-position: 50% 150%;
-          position: absolute;
-          z-index: -1;
-          -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-          -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-          -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-          animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-        }
-      }
-    }
-  }
-}
-
-@-webkit-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@-moz-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@-o-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-
-@-webkit-keyframes bgshadow {
-  0%,
-  100% {
-    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    -webkit-box-shadow: 0 0 30em white;
-    box-shadow: 0 0 30em white;
-  }
-}
-@-moz-keyframes bgshadow {
-  0%,
-  100% {
-    -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    -moz-box-shadow: 0 0 30em white;
-    box-shadow: 0 0 30em white;
-  }
-}
-@-o-keyframes bgshadow {
-  0%,
-  100% {
-    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    box-shadow: 0 0 30em white;
-  }
-}
-@keyframes bgshadow {
-  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);
-  }
-  50% {
-    -webkit-box-shadow: 0 0 30em white;
-    -moz-box-shadow: 0 0 30em white;
-    box-shadow: 0 0 30em white;
-  }
-}
-
-@-webkit-keyframes sz {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 70%;
-  }
-}
-@-moz-keyframes sz {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 70%;
-  }
-}
-@-o-keyframes sz {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 70%;
-  }
-}
-@keyframes sz {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 70%;
-  }
-}
-</style>

src/components/staffMix/index.vue

@@ -1,284 +0,0 @@
-<!--
- 描述: 人员占比
- 作者: Jack Chen
- 日期: 2020-05-02
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">人员占比</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="person">
-            <div class="pers person1"></div>
-            <div class="pers person2"></div>
-            <div class="pers person3"></div>
-          </div>
-
-          <div class="svgs">
-            <svg
-              width="244"
-              height="264"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-            >
-              <defs>
-                <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
-                  <stop
-                    offset="0%"
-                    style="stop-color: #0a6aff; stop-opacity: 0.47"
-                  ></stop>
-                  <stop
-                    offset="40%"
-                    style="stop-color: #5cffff; stop-opacity: 1"
-                  ></stop>
-                  <stop
-                    offset="100%"
-                    style="stop-color: #0a6aff; stop-opacity: 1"
-                  ></stop>
-                </linearGradient>
-                <marker
-                  id="arrow"
-                  markerWidth="10"
-                  markerHeight="10"
-                  refX="0"
-                  refY="3"
-                  orient="auto"
-                  markerUnits="strokeWidth"
-                >
-                  <path d="M0,0 L0,6 L9,3 z" fill="rgb(11,108,255)"></path>
-                </marker>
-              </defs>
-              <path
-                d="M134 86C136 86 80 85 77 208"
-                fill="none"
-                stroke="url(#linear)"
-                stroke-opacity="1"
-                marker-end="url(#arrow)"
-              ></path>
-              <path
-                d="M136 86C138 86 212 88 204 208"
-                fill="none"
-                stroke="url(#linear)"
-                stroke-opacity="1"
-                marker-end="url(#arrow)"
-              ></path>
-              <path
-                d="M136 84C138 84 195 84 206 116"
-                fill="none"
-                stroke="url(#linear)"
-                stroke-opacity="1"
-                marker-end="url(#arrow)"
-              ></path>
-              <path
-                d="M134 84C136 84 81 82 58 123"
-                fill="none"
-                stroke="url(#linear)"
-                stroke-opacity="1"
-                marker-end="url(#arrow)"
-              ></path>
-              <path
-                d="M132 86C134 86 120 68 93 67"
-                fill="none"
-                stroke="url(#linear)"
-                stroke-opacity="1"
-                marker-end="url(#arrow)"
-              ></path>
-              <path
-                d="M134 86C136 86 132 78 134 74C136 69 150 52 150 52"
-                fill="none"
-                stroke="url(#linear)"
-                stroke-opacity="1"
-                marker-end="url(#arrow)"
-              ></path>
-              <path
-                d="M134 85C136 85 146 65 183 65"
-                fill="none"
-                fill-opacity="0"
-                stroke="url(#linear)"
-                marker-end="url(#arrow)"
-              ></path>
-            </svg>
-          </div>
-
-          <div class="svgs">
-            <div
-              class="text"
-              :class="`per${index + 1}`"
-              v-for="(item, index) in arrData"
-              :key="index"
-            >
-              <span>{{ item.name }}</span>
-              <span>{{ item.number }}</span
-              >人
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `staffMix`,
-  data() {
-    return {
-      arrData: [
-        {
-          name: `前端工程师`,
-          number: 3,
-        },
-        {
-          name: `后端工程师`,
-          number: 5,
-        },
-        {
-          name: `网页设计师`,
-          number: 2,
-        },
-        {
-          name: `测试工程师`,
-          number: 2,
-        },
-        {
-          name: `产品经理`,
-          number: 1,
-        },
-        {
-          name: `安卓工程师`,
-          number: 1,
-        },
-        {
-          name: `IOS工程师`,
-          number: 1,
-        },
-      ],
-    }
-  },
-  mounted() {},
-  methods: {},
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 50px;
-  top: 1978px;
-  width: 432px;
-  height: 400px;
-  .person {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    .pers {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background-repeat: no-repeat;
-      background-position: center center;
-      &.person1 {
-        background-image: url(../../assets/img/online.png);
-        transform: rotateX(64deg) rotateZ(0deg);
-        top: 16%;
-      }
-      &.person2 {
-        background-image: url(../../assets/img/cir-2.png);
-        animation: move 10s linear infinite;
-        -webkit-animation: move 10s linear infinite;
-        transform: rotateX(64deg);
-        top: 16%;
-      }
-      &.person3 {
-        background-image: url(../../assets/img/person-1.png);
-        top: 5%;
-      }
-    }
-  }
-
-  .svgs {
-    width: 270px;
-    height: 260px;
-    margin: auto;
-    top: 0;
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-  }
-  .text {
-    position: absolute;
-    width: 50px;
-    height: 50px;
-    background-image: url(../../assets/img/cir-1.png);
-    background-repeat: no-repeat;
-    background-position: center center;
-    color: rgb(114, 198, 230);
-    text-align: center;
-    span {
-      &:nth-child(1) {
-        display: block;
-        width: 52px;
-        margin-top: 10px;
-        line-height: 12px;
-        transform: scale(0.85);
-        height: 22px;
-      }
-      &:nth-child(2) {
-        font-size: 14px;
-        font-weight: bold;
-      }
-    }
-    &.per1 {
-      top: 215px;
-      left: 50px;
-    }
-    &.per2 {
-      top: 113px;
-      left: 3px;
-    }
-    &.per3 {
-      top: 45px;
-      left: 35px;
-    }
-    &.per4 {
-      left: 120px;
-    }
-    &.per5 {
-      top: 45px;
-      left: 190px;
-    }
-    &.per6 {
-      top: 105px;
-      left: 210px;
-    }
-    &.per7 {
-      top: 215px;
-      left: 180px;
-    }
-  }
-}
-
-@-webkit-keyframes move {
-  0% {
-    transform: rotateX(-64deg) rotateZ(360deg);
-  }
-  100% {
-    transform: rotateX(-64deg) rotateZ(0deg);
-  }
-}
-@keyframes move {
-  0% {
-    transform: rotateX(-64deg) rotateZ(360deg);
-  }
-  100% {
-    transform: rotateX(-64deg) rotateZ(0deg);
-  }
-}
-</style>

src/components/szBar/index.vue

@@ -1,209 +0,0 @@
-<!--
- 描述: 双轴柱状图
- 作者: Jack Chen
- 日期: 2020-04-27
--->
-
-<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_bar"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `szBar`,
-  data() {
-    return {
-      option: null,
-      xAxisData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-      yData1: [9, 12, 15, 18, 15, 12, 9, 12, 15, 18, 15, 12],
-      yData2: [-9, -12, -15, -18, -15, -12, -9, -12, -15, -18, -15, -12],
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      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] },
-      ]
-      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: {
-          data: this.xAxisData,
-          axisLabel: {
-            color: `#999`,
-            formatter: `{value} 月`,
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: `rgba(40, 103, 168, 0.3)`,
-            },
-          },
-        },
-        yAxis: {
-          axisLabel: {
-            color: `#999`,
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: `rgba(40, 103, 168, 0.3)`,
-            },
-          },
-        },
-        grid: {
-          top: 20,
-          left: 20,
-          right: 20,
-          bottom: 20,
-          containLabel: true,
-        },
-        series: [
-          {
-            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`,
-                  },
-                ]),
-              },
-            },
-            barWidth: barWidth,
-            markPoint: {
-              symbol: `circle`,
-              itemStyle: {
-                normal: {
-                  color: `#eb9b44`,
-                  shadowColor: `#eb9b44`,
-                  shadowBlur: 20,
-                },
-              },
-              symbolSize: [10, 10], // 容器大小
-              symbolOffset: [0, 0], // 位置偏移
-              data: dataCoord,
-            },
-            data: this.yData1,
-          },
-          {
-            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`,
-                  },
-                ]),
-              },
-            },
-            barWidth: barWidth,
-            markPoint: {
-              symbol: `circle`,
-              itemStyle: {
-                normal: {
-                  color: `#b34d69`,
-                  shadowColor: `#b34d69`,
-                  shadowBlur: 20,
-                },
-              },
-              symbolSize: [10, 10],
-              symbolOffset: [0, 0],
-              data: dataCoord2,
-            },
-            data: this.yData2,
-          },
-        ],
-      }
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 975px;
-  top: 690px;
-  width: 895px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 95%;
-  }
-}
-</style>

src/components/toast/index.vue

@@ -47,7 +47,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 /* 动画效果 淡入淡出 */
 .fade-enter-active,
 .fade-leave-active {

src/components/waterPolo/index.vue

@@ -1,77 +0,0 @@
-<!--
- 描述: 水球图
- 作者: Jack Chen
- 日期: 2020-05-03
--->
-
-<template>
-  <div class="wrap-container sn-container">
-    <div class="sn-content">
-      <div class="sn-title">水球图</div>
-      <div class="sn-body">
-        <div class="wrap-container">
-          <div class="chartsdom" id="chart_polo"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: `waterPolo`,
-  data() {
-    return {
-      option: null,
-    }
-  },
-  mounted() {
-    this.getEchart()
-  },
-  methods: {
-    getEchart() {
-      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,
-            },
-            outline: {
-              show: false,
-            },
-          },
-        ],
-      }
-
-      myChart.setOption(this.option, true)
-
-      window.addEventListener(`resize`, () => {
-        myChart.resize()
-      })
-    },
-  },
-  beforeDestroy() {},
-}
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 974px;
-  top: 2838px;
-  width: 432px;
-  height: 400px;
-  .chartsdom {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/config.js

@@ -1,10 +1,10 @@
 export default {
   development: {
-    baseApi: `http://192.168.1.86:8100`,
-    // baseApi: `https://www.gzzzyd.com/tobacco-api`,
+    // baseApi: `http://192.168.1.86:8100`,
+    baseApi: `https://www.gzzzyd.com/tobacco-api`,
   },
   production: {
-    baseApi: `http://192.168.1.86:8100`,
-    // baseApi: `https://www.gzzzyd.com/tobacco-api`,
+    // baseApi: `http://192.168.1.86:8100`,
+    baseApi: `https://www.gzzzyd.com/tobacco-api`,
   },
 }[process.env.NODE_ENV || `production`]

src/views/page1/index.vue

@@ -149,40 +149,40 @@ export default {
   computed: {},
   created() {
     this.getJSON()
-    this.$util.autoVueFn(
-      [
-        {
-          time: 1000 * 60,
-          fn: this.getWeatherForecast,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getAnalysisOfTransplantYieldInVariousRegions,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getTransplantAreaInEachRegion,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getAnalysisOfTransplantingSituation,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getStatistics,
-        },
-        {
-          time: 1000 * 60,
-          fn: this.getTrendAnalysis,
-        },
-      ],
-      {
-        vm: this,
-        batEnd() {
-          this.autoVueFnInit = true
-        },
-      }
-    )
+    // this.$util.autoVueFn(
+    //   [
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getWeatherForecast,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getAnalysisOfTransplantYieldInVariousRegions,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getTransplantAreaInEachRegion,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getAnalysisOfTransplantingSituation,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getStatistics,
+    //     },
+    //     {
+    //       time: 1000 * 60,
+    //       fn: this.getTrendAnalysis,
+    //     },
+    //   ],
+    //   {
+    //     vm: this,
+    //     batEnd() {
+    //       this.autoVueFnInit = true
+    //     },
+    //   }
+    // )
     // this.$http.get(`https://httpbin.org/get`)
   },
   mounted() {},