新增折线图自动轮播

src/components/circleRunway/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- 环形跑道图 -->
+  <div class="wrap-container sn-container"> 
+    <div class="sn-content"> 
+      <div class="sn-title">环形跑道图</div> 
+      <div class="sn-body"> 
+        <div class="wrap-container" style="height: 90%"> 
+          <canvas width="496" height="455" style="width: 496px; height: 455px;"></canvas> 
+        </div> 
+      </div> 
+    </div>   
+  </div>
+</template>
+
+<script>
+export default {
+  name: "circleRunway",
+  data() {
+    return {
+      
+      
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  left: 1370px;
+  top: 110px;
+}
+</style>

src/components/index.js

@@ -3,13 +3,25 @@ import modal from './modal' // 自定义全局模态框
 import sinan from './sinan' // 司南排名图
 import rimian from './rimian' // 日冕排名图
 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' // 扫描半径图
 
 const components = {
   bgAnimation,
   modal,
   sinan,
   rimian,
-  pyramid
+  pyramid,
+  scrollArc,
+  szBar,
+  ringPin,
+  rotateColorful,
+  circleRunway,
+  scanRadius
   
 };
 

src/components/pyramid/index.vue

@@ -5,7 +5,7 @@
     <div class="back_img"></div> 
     <div class="back_img1"></div> 
     <div class="back_img2"></div>
-    <ul class="first"> 
+    <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> 
@@ -13,30 +13,6 @@
       <li></li>
       <li></li> 
     </ul> 
-    <ul class="seconed"> 
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li> 
-    </ul> 
-    <ul class="third"> 
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li> 
-    </ul> 
-    <ul class="four"> 
-      <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}`"> 
@@ -79,11 +55,17 @@ export default {
         post: '项目经理',
         number: 66
       }],
-      color: ['#45fed4', '#616cff', '#f1e04f', '#dbfe73']
+      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);
@@ -91,14 +73,16 @@ export default {
   },
   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,
+          color: [data.color, '#333'],
           series: [
             {
               name: '访问来源',
               type: 'pie',
-              radius: ['90%', '95%'],
+              radius: ['92%', '100%'],
+              clockWise: false,
               avoidLabelOverlap: false,
               hoverAnimation: false,
               label: {
@@ -108,7 +92,7 @@ export default {
                   textStyle: {
                       fontSize: 14
                   },
-                  formatter: '{b}\n{c}%'
+                  formatter: '{c}%'
                 }
               },
               labelLine: {
@@ -116,21 +100,32 @@ export default {
               },
               data: [
                 {
-                  value: data.number, 
+                  value: sum, 
                   name: '',
                   label: {
                     normal: {
                       show: true
                     }
                   }
+                },
+                {
+                  value: (100 - sum), 
+                  name: '',
+                  label: {
+                    normal: {
+                      show: false
+                    }
+                  }
                 }
               ]
             }
           ]
       };
-      if (this.option && typeof this.option === "object") {
-        myChart.setOption(this.option, true);
-      }
+      myChart.setOption(this.option, true);
+
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
     }
   },
   beforeDestroy() {
@@ -243,7 +238,7 @@ export default {
     }
   }
 
-  .seconed {
+  .second {
     list-style-type: none;
     left: 261px;
     top: 65px;
@@ -446,7 +441,7 @@ export default {
           float: right;
         }
         .f_div {
-          color: #2bb5ff;
+          color: #84a9ef;
           font-size: 16px;
           &.aharrow_down {
             &:before {
@@ -582,7 +577,7 @@ export default {
       &.arrow_2 {
         width: 20px;
         height: 1px;
-        background: #5f75ff;
+        background: #84a9ef;
         transform: rotate(-30deg);
         display: inline-block;
         margin-top: 40px;
@@ -591,7 +586,7 @@ export default {
           content: '';
           width: 50px;
           height: 1px;
-          background: #5f75ff;
+          background: #84a9ef;
           display: inline-block;
           transform: rotate(30deg);
           position: absolute;
@@ -602,12 +597,12 @@ export default {
           content: '';
           width: 5px;
           height: 5px;
-          background: #5f75ff;
+          background: #84a9ef;
           display: inline-block;
           border-radius: 50%;
           position: absolute;
           top: -2px;
-          box-shadow: 0px 0px 5px 1px #5f75ff;
+          box-shadow: 0px 0px 5px 1px #84a9ef;
           left: 17px;
         }
       }

src/components/rimian/index.vue

@@ -4,8 +4,8 @@
     <div class="sn-content"> 
       <div class="sn-title">日冕排名图</div> 
       <div class="sn-body"> 
-        <div class="wrap-container" style="height: 90%"> 
-          <canvas width="496" height="455" style="width: 496px; height: 455px;"></canvas> 
+        <div class="wrap-container"> 
+          <div class="chartsdom" id="chart_rm"></div> 
         </div> 
       </div> 
     </div>   

src/components/ringPin/index.vue

@@ -0,0 +1,158 @@
+<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> 
+      </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 BorderWidth = '5';
+      // 反方向剩下部分的样式
+      let placeHolderStyle = {
+        normal: {
+          label: {
+            show: false,
+            position: "center"
+          },
+          labelLine: {
+            show: false
+          },
+          // color: "rgba(0,0,0,0)",
+          // borderColor: "rgba(0,0,0,0)",
+          borderWidth: BorderWidth,
+          borderColor: '#bebebe'
+        }
+      }
+
+      this.option = {
+        color: ['#53f1f2', '#4ebefd'],
+        legend: {
+          show: true,
+          orient: 'vertical',
+          left: 'left',
+          top: 'middle',
+          data: ['重要', '次要'],
+          textStyle: {
+            color:'#fff',
+            fontSize:16
+          }
+        },
+        series: [{
+          name: '重要',
+          type: 'pie',
+          clockWise: false,
+          startAngle: 180,
+          hoverAnimation: false,
+          radius: [100, 101],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+                position: 'outside'
+              },
+              labelLine: {
+                show: false,
+                length: 100,
+                smooth: 0.5
+              },
+              borderWidth: BorderWidth,
+              shadowBlur: 40,
+              borderColor: "#53f1f2",
+              shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+            }
+          },
+          data: [{
+            value: 2,
+            name: '20%'
+          },{
+            value: 3,
+            name: '',
+            itemStyle: placeHolderStyle
+          }, {
+            value: 0,
+            itemStyle: {normal:{color:'rgba(0,0,0,0)'}}
+          }]
+        }, {
+          name: '次要',
+          type: 'pie',
+          clockWise: false,
+          hoverAnimation: false,
+          radius: [80, 81],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false
+              },
+              labelLine: {
+                show: false,
+                length: 100,
+                smooth: 0.5
+              },
+              borderWidth: BorderWidth,
+              shadowBlur: 40,
+              borderColor: "#4ebefd",
+              shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+            }
+          },
+          data: [{
+            value: 3,
+            name: '30%'
+          }, {
+            value: 2,
+            name: '',
+            itemStyle: placeHolderStyle
+          }, {
+            value: 0,
+            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: 50px;
+  top: 1120px;
+  width: 432px;
+  height: 400px;
+  .chartsdom {
+    left: 23px;
+    top: 15px;
+    width: 90%;
+    height: 90%;
+  }
+}
+</style>

src/components/rotateColorful/index.vue

@@ -0,0 +1,41 @@
+<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_rotate"></div> 
+        </div> 
+      </div> 
+    </div>   
+  </div>
+</template>
+
+<script>
+export default {
+  name: "rotateColorful",
+  data() {
+    return {
+      
+      
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  left: 1370px;
+  top: 110px;
+}
+</style>

src/components/scanRadius/index.vue

@@ -0,0 +1,41 @@
+<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> 
+      </div> 
+    </div>   
+  </div>
+</template>
+
+<script>
+export default {
+  name: "scanRadius",
+  data() {
+    return {
+      
+      
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  left: 1370px;
+  top: 110px;
+}
+</style>

src/components/scrollArc/index.vue

@@ -0,0 +1,134 @@
+<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',
+          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: 20,
+          left: 20,
+          right: 20,
+          bottom: 20,
+          containLabel: true //轴上的数值
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xData,
+          axisLabel: {
+            formatter: '{value} 月'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#999',
+            }
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#999'
+            }
+          },
+        },
+        series: [{
+          name: '人数',
+          type: 'line',
+          data: this.data,
+          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/sinan/index.vue

@@ -64,31 +64,31 @@ export default {
         itemNum: 258,
         dataItem: 1288,
         dataSize: 12306,
-        workUnit: '税务局'
+        workUnit: 'JS'
       },{
         id: 2,
         itemNum: 568,
         dataItem: 5623,
         dataSize: 12306,
-        workUnit: '国土局'
+        workUnit: 'Nodejs'
       },{
         id: 3,
         itemNum: 208,
         dataItem: 1755,
         dataSize: 12043,
-        workUnit: '农业局'
+        workUnit: 'Vuejs'
       },{
         id: 4,
         itemNum: 358,
         dataItem: 1812,
         dataSize: 12306,
-        workUnit: '环保局'
+        workUnit: 'CSS3'
       },{
         id: 5,
         itemNum: 128,
         dataItem: 4718,
         dataSize: 12580,
-        workUnit: '公安局'
+        workUnit: 'jQuery'
       }]
     }
   },

src/components/szBar/index.vue

@@ -0,0 +1,162 @@
+<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]},
+      ];
+
+      this.option = {
+        xAxis: {
+          data: this.xAxisData,
+          axisLabel: {
+            formatter: '{value} 月'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#999',
+            }
+          },
+        },
+        yAxis: {
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#999'
+            }
+          },
+        },
+        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'
+                }
+              },
+              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(255,255,255,0)'},
+                    {offset: 0.5, color: '#774a75'},
+                    {offset: 1, color: '#b34d69'},
+                  ]
+                )
+              }
+            },
+            barWidth: barWidth,
+            markPoint: {
+              symbol: 'circle',
+              itemStyle: {
+                normal: {
+                  color: '#b34d69'
+                }
+              },
+              symbolSize: [8, 8], 
+              symbolOffset: [0, 0],
+              data: dataCoord,
+            },
+            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/views/Home.vue

@@ -4,11 +4,14 @@
       <div class="top"></div>
       
       <sinan />
-
       <rimian />
-
       <pyramid />
 
+      <scrollArc />
+      <szBar />
+
+      <ringPin />
+
     </div>
     
   </div>