优化半径图和饼柱联动代码

src/components/cakeLinkage/index.vue

@@ -34,20 +34,20 @@ export default {
     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;
+      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;
     },
@@ -102,51 +102,71 @@ export default {
         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
-              // },
-            ],
+            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',
-            formatter: '{a} <br/>{b} : {c} ({d}%)'
-          },
+          // tooltip: {
+          //   trigger: 'item'
+          // },
           grid: {
             bottom: 80
           },
           calculable: true,
           xAxis: [{
             type: 'category',
-            axisLabel: { 
-              interval: 0 
-            },
             data: ['金融类', '政务类', '医疗类', '互联网类', '', '', ''],
             splitLine: { 
               show: false 
@@ -157,7 +177,7 @@ export default {
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#999',
+                color: '#2867a8',
               }
             },
           }],
@@ -174,7 +194,7 @@ export default {
             axisLine: {
               show: true,
               lineStyle: {
-                color: '#999'
+                color: '#2867a8'
               }
             },
           }],
@@ -183,10 +203,28 @@ export default {
             type: 'bar',
             barMaxWidth: 15,
             center: ['20%', '65%'],
+            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: ['80%', '20%'],
+            center: ['76%', '20%'],
             radius: '28%',
             z: 100
           }]
@@ -195,7 +233,7 @@ export default {
           series: [
             {data: [{
                 name: '金融类', 
-                value: this.dataMap.dataJR['2016sum'], 
+                value: this.dataMap.dataJR['2016sum'],
                 itemStyle: itemStyleJR
               },{
                 name: '政务类', 
@@ -248,7 +286,7 @@ export default {
                 name: '互联网类', 
                 value: this.dataMap.dataIT['2017sum'], 
                 itemStyle: itemStyleIT
-              }]
+              }],
             },
             {data: [{
                 name: '金融类', 

src/components/circleRunway/canvas.vue

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

src/components/circleRunway/index.vue

@@ -9,10 +9,7 @@
     <div class="sn-content"> 
       <div class="sn-title">环形跑道图</div> 
       <div class="sn-body"> 
-        <div class="wrap-container"> 
-          <!-- <div class="pd-canvas">
-              <canvas-circle v-for="(item, index) in cicleList" :key="index" :classStyle="item.classStyle" :color="item.color" :percent="item.ratio" :lineWidth="item.lineWidth" :id="index"></canvas-circle>
-          </div> -->
+        <div class="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>
@@ -27,45 +24,24 @@
 </template>
 
 <script>
-// import canvasCircle from './canvas'
-
 export default {
   name: "circleRunway",
-  components: {
-    // canvasCircle
-  },
   data() {
     return {
       option: null,
       arrData: [{
-        name: '阿里云',
+        name: '联盟链',
         number: 725,
         percentage: 41.50
       },{
-        name: '腾讯云',
+        name: '私有链',
         number: 460,
         percentage: 30.95
       },{
-        name: '华为云',
+        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() {
@@ -204,40 +180,7 @@ export default {
     width: 100%;
     height: 90%;
   }
-  .pd-canvas {
-    position: relative; 
-    overflow: hidden; 
-    width: 100%; 
-    height: 90%; 
-    padding: 0; 
-    margin: 0; 
-    border-width: 0; 
-    cursor: default;
-    .canvas {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      user-select: none; 
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
-      padding: 0; 
-      margin: 0; 
-      border-width: 0;
-      &.canvasCircle1 {
-        left: 60px;
-        top: 4px;
-      }
-      &.canvasCircle2 {
-        transform: scale(.78);
-        left: 52px;
-        top: -7px;
-      }
-      &.canvasCircle3 {
-        transform: scale(.55);
-        left: 44px;
-        top: -16px;
-      }
-    }
-  }
+  
   .pdt-info {
     position: absolute;
     left: 50%;

src/components/scanRadius/index.vue

@@ -11,22 +11,21 @@
       <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>
+              <span>区块链</span>
             </div>
             <div class="nodetext text1">
-              <span>权益证明</span>
+              <span>人工智能</span>
             </div>
             <div class="nodetext text2">
-              <span>股权授权证明</span>
+              <span>大数据</span>
             </div>
             <div class="nodetext text3">
-              <span>容量证明</span>
+              <span>云计算</span>
             </div>
             <div class="nodetext text4">
-              <span>第五代轻量证明</span>
+              <span>移动互联网</span>
             </div>
           </div>
         </div> 
@@ -48,12 +47,97 @@ export default {
   },
   mounted() {
     this.getEchart();
-    this.getEchart2();
   },
   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: {
@@ -70,9 +154,47 @@ export default {
           }
         }
       }]
+
+      let tooltip = {
+        formatter: ' ',
+        backgroundColor: 'rgba(0, 0, 0, 0)'
+      }
+
       this.option = {
-        color: ['#05bbdf', '#1170e1', '#1b40e3', '#00c86c', '#5e51e3'],
+        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,
@@ -80,6 +202,7 @@ export default {
           hoverAnimation: false,
           radius: ['90%', '90%'],
           center: ['50%', '50%'],
+          tooltip: tooltip,
           label: {
             normal: {
               show: false
@@ -116,6 +239,7 @@ export default {
           hoverAnimation: false,
           radius: ['70%', '70%'],
           center: ['50%', '50%'],
+          tooltip: tooltip,
           label: {
             normal: {
               show: false
@@ -126,7 +250,7 @@ export default {
               show: false
             }
           },
-          data: arrData
+          data: arrData2
         },{
           name: '2018年',
           type: 'pie',
@@ -135,6 +259,7 @@ export default {
           hoverAnimation: false,
           radius: ['50%', '50%'],
           center: ['50%', '50%'],
+          tooltip: tooltip,
           label: {
             normal: {
               show: false
@@ -145,7 +270,7 @@ export default {
               show: false
             }
           },
-          data: arrData
+          data: arrData2
         },{
           name: '2017年',
           type: 'pie',
@@ -154,6 +279,7 @@ export default {
           hoverAnimation: false,
           radius: ['30%', '30%'],
           center: ['50%', '50%'],
+          tooltip: tooltip,
           label: {
             normal: {
               show: false
@@ -164,7 +290,7 @@ export default {
               show: false
             }
           },
-          data: arrData
+          data: arrData2
         },{
           name: '2016年',
           type: 'pie',
@@ -173,6 +299,7 @@ export default {
           hoverAnimation: false,
           radius: ['10%', '10%'],
           center: ['50%', '50%'],
+          tooltip: tooltip,
           label: {
             normal: {
               show: false
@@ -183,136 +310,12 @@ export default {
               show: false
             }
           },
-          data: arrData
+          data: arrData2
         }]
       }
 
       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();
       });
@@ -335,12 +338,6 @@ export default {
     width: 100%;
     height: 100%;
   }
-  #chart_scan2 {
-    z-index: 2;
-  }
-  #chart_scan {
-    z-index: 1;
-  }
 
   .box {
     overflow: hidden;

src/components/szBar/index.vue

@@ -68,19 +68,23 @@ export default {
         xAxis: {
           data: this.xAxisData,
           axisLabel: {
+            color: '#999',
             formatter: '{value} 月'
           },
           axisTick: {
             show: false
           }, 
           axisLine: {
-            show: false,
+            show: true,
             lineStyle: {
-              color: '#999',
+              color: 'rgba(40, 103, 168, 0.3)',
             }
           },
         },
         yAxis: {
+          axisLabel: {
+            color: '#999'
+          },
           axisTick: {
             show: false
           }, 
@@ -90,7 +94,7 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#999'
+              color: 'rgba(40, 103, 168, 0.3)'
             }
           },
         },
@@ -110,7 +114,7 @@ export default {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 1, 
-                  color: 'rgba(0,0,0,0)'
+                  color: 'rgba(0, 0, 0, 0)'
                 },{
                   offset: 0.5, 
                   color: '#466e71'
@@ -144,7 +148,7 @@ export default {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0, 
-                  color: 'rgba(255,255,255,0)'
+                  color: 'rgba(0, 0, 0, 0)'
                 },{
                   offset: 0.5, 
                   color: '#774a75'
@@ -164,7 +168,7 @@ export default {
                   shadowBlur: 20
                 }
               },
-              symbolSize: [8, 8], 
+              symbolSize: [10, 10], 
               symbolOffset: [0, 0],
               data: dataCoord2,
             },