新增半径图，饼柱联动图

src/components/cakeLinkage/index.vue

@@ -0,0 +1,416 @@
+<!--
+ 描述: 柱饼组合联动
+ 作者: 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 year = 2016; year <= 2020; year++) {
+          let max = 0;
+          let sum = 0;
+          temp = obj[year];
+          for (let i = 0, l = temp.length; i < l; i++) {
+              max = Math.max(max, temp[i]);
+              sum += temp[i];
+              obj[year][i] = {
+                  name: pList[i],
+                  value: temp[i]
+              };
+          }
+          obj[year + 'max'] = Math.floor(max / 100) * 100;
+          obj[year + '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',
+            // realtime: false,
+            // loop: false,
+            autoPlay: true,
+            // currentIndex: 2,
+            playInterval: 1000,
+            // controlStyle: {
+            //   position: 'left'
+            // },
+            data: ['2016-01-01', '2017-01-01','2018-01-01', '2019-01-01', '2020-01-01'
+              // {
+              //   value: '2020-01-01',
+              //   tooltip: {
+              //     formatter(params) {
+              //       return params.name + '应用达到一个高度';
+              //     }
+              //   },
+              //   symbol: 'diamond',
+              //   symbolSize: 18
+              // },
+            ],
+            label: {
+              formatter(s) {
+                return (new Date(s)).getFullYear();
+              }
+            }
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+          },
+          grid: {
+            bottom: 80
+          },
+          calculable: true,
+          xAxis: [{
+            type: 'category',
+            axisLabel: { 
+              interval: 0 
+            },
+            data: ['金融类', '政务类', '医疗类', '互联网类', '', '', ''],
+            splitLine: { 
+              show: false 
+            },
+            axisTick: {
+              show: false
+            }, 
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#999',
+              }
+            },
+          }],
+          yAxis: [{
+            type: 'value',
+            name: '区块链应用（个）',
+            offset: -12,
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            }, 
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#999'
+              }
+            },
+          }],
+          series: [{
+            name: '联盟链', 
+            type: 'bar',
+            barMaxWidth: 15,
+            center: ['20%', '65%'],
+          },{
+            name: '应用占比',
+            type: 'pie',
+            center: ['80%', '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/circleRunway/index.vue

@@ -10,10 +10,10 @@
       <div class="sn-title">环形跑道图</div> 
       <div class="sn-body"> 
         <div class="wrap-container"> 
-          <div class="pd-canvas">
+          <!-- <div class="pd-canvas">
               <canvas-circle v-for="(item, index) in cicleList" :key="index" :classStyle="item.classStyle" :color="item.color" :percent="item.ratio" :lineWidth="item.lineWidth" :id="index"></canvas-circle>
-          </div>
-          <!-- <div class="chartsdom" id="chart_run"></div> -->
+          </div> -->
+          <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>
@@ -27,33 +27,16 @@
 </template>
 
 <script>
-import canvasCircle from './canvas'
+// import canvasCircle from './canvas'
 
 export default {
   name: "circleRunway",
   components: {
-    canvasCircle
+    // canvasCircle
   },
   data() {
     return {
-      timer: null,
       option: null,
-      cicleList: [{
-        ratio: '50',
-        color: '#0772bb',
-        classStyle: 'canvasCircle1',
-        lineWidth: 2,
-      },{
-        ratio: '30',
-        color: '#00ffff',
-        classStyle: 'canvasCircle2',
-        lineWidth: 2.5,
-      },{
-        ratio: '20',
-        color: '#f48b3b',
-        classStyle: 'canvasCircle3',
-        lineWidth: 3,
-      }],
       arrData: [{
         name: '阿里云',
         number: 725,
@@ -66,127 +49,142 @@ export default {
         name: '华为云',
         number: 382,
         percentage: 22.48
-      }]
+      }],
+      // cicleList: [{
+      //   ratio: '50',
+      //   color: '#0772bb',
+      //   classStyle: 'canvasCircle1',
+      //   lineWidth: 2,
+      // },{
+      //   ratio: '30',
+      //   color: '#00ffff',
+      //   classStyle: 'canvasCircle2',
+      //   lineWidth: 2.5,
+      // },{
+      //   ratio: '20',
+      //   color: '#f48b3b',
+      //   classStyle: 'canvasCircle3',
+      //   lineWidth: 3.5,
+      // }],
     }
   },
   mounted() {
-    // this.getEchart();
+    this.getEchart();
   },
   methods: {
     getEchart() {
-      // // 初始化echarts实例
-      // let myChart = echarts.init(document.getElementById('chart_run'));
-      // let itemStyle = {
-      //   normal: {
-      //     color: '#091f45',
-      //   }
-      // }
+      // 初始化echarts实例
+      let myChart = echarts.init(document.getElementById('chart_run'));
+      let itemStyle = {
+        normal: {
+          color: '#091f45',
+        }
+      }
 
-      // this.option = {
-      //   animation: true,
-      //   color: ['#0772bb', '#00ffff', '#f48b3b'],
-      //   series: [{
-      //     name: '2020年',
-      //     type: 'pie',
-      //     clockWise: false,
-      //     startAngle: 90,
-      //     hoverAnimation: false,
-      //     radius: ['86%', '90%'],
-      //     center: ['50%', '50%'],
-      //     label: {
-      //       normal: {
-      //         show: false
-      //       },
-      //     },
-      //     labelLine: {
-      //       normal: {
-      //         show: false
-      //       }
-      //     },
-      //     data: [{
-      //       value: 5,
-      //       name: '50%',
-      //       itemStyle: {
-      //         normal: {
-      //           color: '#0772bb'
-      //         }
-      //       }
-      //     },{
-      //       value: 5,
-      //       name: '50%',
-      //       itemStyle: itemStyle
-      //     }]
-      //   },{
-      //     name: '2019年',
-      //     type: 'pie',
-      //     clockWise: false,
-      //     startAngle: 90,
-      //     hoverAnimation: false,
-      //     radius: ['66%', '70%'],
-      //     center: ['50%', '50%'],
-      //     label: {
-      //       normal: {
-      //         show: false
-      //       },
-      //     },
-      //     labelLine: {
-      //       normal: {
-      //         show: false
-      //       }
-      //     },
-      //     data: [{
-      //       value: 3,
-      //       name: '50%',
-      //       itemStyle: {
-      //         normal: {
-      //           color: '#00ffff'
-      //         }
-      //       }
-      //     },{
-      //       value: 7,
-      //       name: '50%',
-      //       itemStyle: itemStyle
-      //     }]
-      //   },{
-      //     name: '2018年',
-      //     type: 'pie',
-      //     clockWise: false,
-      //     startAngle: 90,
-      //     hoverAnimation: false,
-      //     radius: ['46%', '50%'],
-      //     center: ['50%', '50%'],
-      //     label: {
-      //       normal: {
-      //         show: false
-      //       },
-      //     },
-      //     labelLine: {
-      //       normal: {
-      //         show: false
-      //       }
-      //     },
-      //     data: [{
-      //       value: 2,
-      //       name: '50%',
-      //       itemStyle: {
-      //         normal: {
-      //           color: '#f48b3b'
-      //         }
-      //       }
-      //     },{
-      //       value: 8,
-      //       name: '50%',
-      //       itemStyle: itemStyle
-      //     }]
-      //   }]
-      // }
+      this.option = {
+        color: ['#0772bb', '#00ffff', '#f48b3b'],
+        series: [{
+          name: '2020年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 90,
+          hoverAnimation: false,
+          radius: ['86%', '90%'],
+          center: ['50%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 5,
+            name: '50%',
+            itemStyle: {
+              normal: {
+                color: '#0772bb'
+              }
+            }
+          },{
+            value: 5,
+            name: '50%',
+            itemStyle: itemStyle
+          }]
+        },{
+          name: '2019年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 90,
+          hoverAnimation: false,
+          radius: ['66%', '70%'],
+          center: ['50%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 3,
+            name: '50%',
+            itemStyle: {
+              normal: {
+                color: '#00ffff'
+              }
+            }
+          },{
+            value: 7,
+            name: '50%',
+            itemStyle: itemStyle
+          }]
+        },{
+          name: '2018年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 90,
+          hoverAnimation: false,
+          radius: ['46%', '50%'],
+          center: ['50%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 2,
+            name: '50%',
+            itemStyle: {
+              normal: {
+                color: '#f48b3b'
+              }
+            }
+          },{
+            value: 8,
+            name: '50%',
+            itemStyle: itemStyle
+          }]
+        }]
+      }
 
-      // // 使用制定的配置项和数据显示图表
-      // myChart.setOption(this.option, true);
+      // 使用制定的配置项和数据显示图表
+      myChart.setOption(this.option, true);
 
-      // window.addEventListener('resize', () => {
-      //   myChart.resize();
-      // });
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
 
     },
   },
@@ -231,12 +229,12 @@ export default {
       &.canvasCircle2 {
         transform: scale(.78);
         left: 52px;
-        top: -1px;
+        top: -7px;
       }
       &.canvasCircle3 {
-        transform: scale(.6);
+        transform: scale(.55);
         left: 44px;
-        top: -7px;
+        top: -16px;
       }
     }
   }

src/components/index.js

@@ -15,6 +15,7 @@ import ringPin from './ringPin' // 环形气泡图
 import rotateColorful from './rotateColorful' // 旋转多彩图
 import circleRunway from './circleRunway' // 环形跑道图
 import scanRadius from './scanRadius' // 扫描半径图
+import cakeLinkage from './cakeLinkage' // 柱饼组合联动
 
 const components = {
   bgAnimation,
@@ -27,7 +28,8 @@ const components = {
   ringPin,
   rotateColorful,
   circleRunway,
-  scanRadius
+  scanRadius,
+  cakeLinkage,
   
 };
 

src/components/rotateColorful/index.vue

@@ -9,7 +9,13 @@
     <div class="sn-content"> 
       <div class="sn-title">旋转多彩图</div> 
       <div class="sn-body"> 
-        <div class="wrap-container"> 
+        <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> 
@@ -22,15 +28,128 @@ 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() {
     
@@ -40,7 +159,109 @@ export default {
 
 <style lang="scss" scoped>
 .sn-container {
-  left: 1370px;
-  top: 110px;
+  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,7 +1,7 @@
 <!--
  描述: 扫描半径图
  作者: Jack Chen
- 日期: 2020-04-19
+ 日期: 2020-04-30
 -->
 
 <template>
@@ -11,8 +11,27 @@
       <div class="sn-body"> 
         <div class="wrap-container"> 
           <div class="chartsdom" id="chart_scan"></div>
+          <div class="chartsdom" id="chart_scan2"></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>
@@ -22,15 +41,282 @@ export default {
   name: "scanRadius",
   data() {
     return {
-      
-      
+      option: null,
+      option2: null,
+      val: 0
     }
   },
   mounted() {
-    
+    this.getEchart();
+    this.getEchart2();
   },
   methods: {
-    
+    getEchart() {
+      let myChart = echarts.init(document.getElementById('chart_scan'));
+      let arrData = [{
+        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)'
+          }
+        }
+      }]
+      this.option = {
+        color: ['#05bbdf', '#1170e1', '#1b40e3', '#00c86c', '#5e51e3'],
+        series: [{
+          name: '2020年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['90%', '90%'],
+          center: ['50%', '50%'],
+          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%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: arrData
+        },{
+          name: '2018年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['50%', '50%'],
+          center: ['50%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: arrData
+        },{
+          name: '2017年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['30%', '30%'],
+          center: ['50%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: arrData
+        },{
+          name: '2016年',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 0,
+          hoverAnimation: false,
+          radius: ['10%', '10%'],
+          center: ['50%', '50%'],
+          label: {
+            normal: {
+              show: false
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: arrData
+        }]
+      }
+
+      myChart.setOption(this.option, true);
+
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    },
+    getEchart2() {
+      let myChart = echarts.init(document.getElementById('chart_scan2'));
+      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)'
+          }
+        }
+      });
+
+      this.option2 = {
+        label: {
+          normal: {
+            show: false
+          },
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        series: [{
+          name: '现代技术',
+          type: 'pie',
+          startAngle: -180,
+          radius: '190%',
+          center: ['50%', '50%'],
+          roseType: 'radius',
+          label: {
+            show: false
+          },
+          emphasis: {
+            label: {
+              show: false
+            }
+          },
+          data: arrData
+        }]
+      }
+
+      myChart.setOption(this.option2, true);
+
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    }
   },
   beforeDestroy() {
     
@@ -40,7 +326,188 @@ export default {
 
 <style lang="scss" scoped>
 .sn-container {
-  left: 1370px;
-  top: 110px;
+  left: 1436px;
+  top: 1120px;
+  width: 432px;
+  height: 400px;
+  .chartsdom {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  #chart_scan2 {
+    z-index: 2;
+  }
+  #chart_scan {
+    z-index: 1;
+  }
+
+  .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

@@ -62,6 +62,9 @@ export default {
         xAxis: {
           type: 'category',
           data: this.xData,
+          axisTick: {
+            show: false
+          }, 
           axisLabel: {
             formatter: '{value} 月'
           },

src/components/szBar/index.vue

@@ -70,15 +70,25 @@ export default {
           axisLabel: {
             formatter: '{value} 月'
           },
+          axisTick: {
+            show: false
+          }, 
           axisLine: {
+            show: false,
             lineStyle: {
               color: '#999',
             }
           },
         },
         yAxis: {
+          axisTick: {
+            show: false
+          }, 
+          splitLine: {
+            show: false
+          },
           axisLine: {
-            show: false,
+            show: true,
             lineStyle: {
               color: '#999'
             }

src/views/Home.vue

@@ -17,7 +17,11 @@
       <szBar />
 
       <ringPin />
+      <rotateColorful />
       <circleRunway />
+      <scanRadius />
+
+      <cakeLinkage />
 
       <div class="divider"></div>