合并

src/components/ringPie/index.vue

@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <div class="wrap-container sn-container"> 
+  <!-- <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">环形饼图</div> 
       <div class="sn-body"> 
@@ -23,6 +23,9 @@
         </div> 
       </div> 
     </div>   
+  </div> -->
+  <div class="income-container">
+    <div class="chart" id="chart_rp"></div>
   </div>
 </template>
 
@@ -42,10 +45,30 @@ export default {
     getEchart() {
       let myChart = echarts.init(document.getElementById('chart_rp'));
       this.option = {
+        title: {
+          text: '50%',
+          // 副标题
+          subtext: "车位已使用",
+          // 主副标题间距
+          itemGap: 10,
+          x: 'center',
+          y: '80',
+          // 主标题样式
+          textStyle: {
+            fontSize: '26',
+            color: '#fff'
+          },
+          // 副标题样式
+          subtextStyle: {
+            fontSize: '14',
+            fontWeight: '100',
+            color: '#8A9AC5'
+          }
+        },
         series: [{
           name: '环形饼图',
           type: 'pie',
-          radius: ['68%', '80%'],
+          radius: ['48%', '70%'],
           hoverAnimation: false,
           avoidLabelOverlap: false,
           label: {
@@ -54,7 +77,11 @@ export default {
           },
           emphasis: {
             label: {
-              show: false
+              label: {
+                show: false,
+                fontSize: '30',
+                fontWeight: 'bold'
+              }
             }
           },
           labelLine: {
@@ -66,23 +93,31 @@ export default {
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0, 
+                  offset: .2,
-                  color: '#6984fe'
+                  color: '#47BDFF'
-                },{
+                }, {
+                  offset: .5,
+                  color: '#34AEFF'
+                }, {
                   offset: 1,
-                  color: '#24d1fd'
+                  color: '#0589FF'
-                }])
+                }
-              }
+                ]),
+                    // borderRadius:800,
+              },
+          
             }
-          },{
+          }, 
+          {
             value: 4,
             name: '大数据',
             itemStyle: {
               normal: {
-                color: '#eee'
+                color: '#3B4257',
               }
             }
-          }]
+          }
+          ]
         }]
       }
 
@@ -105,25 +140,28 @@ export default {
   top: 1978px;
   width: 432px;
   height: 400px;
+
   .wrap-container {
     left: 125px;
     top: 94px;
     width: 150px;
     height: 150px;
   }
+
   .chartsdom {
     width: 100%;
     height: 100%;
   }
 
-  .back-chart{
+  .back-chart {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
-    background:url(../../assets/img/back_chart.png) no-repeat center;
+    background: url(../../assets/img/back_chart.png) no-repeat center;
   }
+
   .arrow-cir {
     width: 8px;
     height: 8px;
@@ -132,12 +170,14 @@ export default {
     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;
@@ -153,16 +193,19 @@ export default {
     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;
@@ -174,19 +217,29 @@ export default {
     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;
   }
 }
+
+.income-container {
+  .chart {
+    width: 3rem;
+    height: 3rem;
+  }
+}
 </style>

src/components/scrollArc/index.vue

@@ -114,7 +114,8 @@ export default {
               color: '#5d83ff',
               borderColor: '#fff',
               borderWidth: 2,
-              opacity: 1
+              opacity: 1,
+        
             },
           },
           areaStyle: {

src/components/szBar/index.vue

@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <div class="wrap-container sn-container"> 
+  <!-- <div class="wrap-container sn-container"> 
     <div class="sn-content"> 
       <div class="sn-title">双轴柱状图</div> 
       <div class="sn-body"> 
@@ -14,6 +14,9 @@
         </div> 
       </div> 
     </div>   
+  </div> -->
+   <div class="income-container"> 
+    <div class="chart" id="chart_bar"></div>  
   </div>
 </template>
 
@@ -34,7 +37,7 @@ export default {
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById('chart_bar'));
-      let barWidth = '10%';
+      let barWidth = '15%';
       let dataCoord = [
         {coord: [0, 9]},
         {coord: [1, 12]},
@@ -80,6 +83,22 @@ export default {
               color: 'rgba(40, 103, 168, 0.3)',
             }
           },
+        },
+              tooltip: {
+          trigger: 'axis',
+          showContent: true,
+          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)'
+              }])
+            }
+          },
         },
         yAxis: {
           axisLabel: {
@@ -116,12 +135,20 @@ export default {
                   offset: 1, 
                   color: 'rgba(0, 0, 0, 0)'
                 },{
-                  offset: 0.5, 
+                  offset: 0.6, 
                   color: '#466e71'
                 },{
                   offset: 0, 
-                  color: '#eb9b44'
+                  color: '#43FFFF'
-                }])
+                }]),
+                    label: {
+                      position:"top",
+                        show: true, //开启显示
+                        textStyle: { //数值样式
+                            color: '#fff',
+                            fontSize: 10
+                        }
+                    }
               }
             },
             barWidth: barWidth,
@@ -129,51 +156,18 @@ export default {
               symbol: 'circle',
               itemStyle: {
                 normal: {
-                  color: '#eb9b44',
+                  color: '#43FFFF',
-                  shadowColor: '#eb9b44',
+                  shadowColor: '#43FFFF',
                   shadowBlur: 20
                 }
               },
-              symbolSize: [10, 10], // 容器大小
+              symbolSize: [5, 5], // 容器大小
               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);
@@ -190,6 +184,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.income-container {
+  .chart {
+    height: 3rem;
+  }
+}
 .sn-container {
   left: 975px;
   top: 690px;

src/views/Brand.vue

@@ -112,14 +112,42 @@
             <div class="panel-footer"></div>
           </div>
 
-          <div class="panel">
+          <div class="left-top">
-            <h2>客户分布</h2>
+            <div class="topBg">
-            <distribution />
+              车辆使用统计
+            </div>
+            <div class="carFlex">
+              <div class="let">
+                <div class="item">
+                    <p class="p1">总车位</p>
+                    <p class="p2">6666</p>
+                </div>
+                 <div class="item">
+                    <p class="p1">周转率</p>
+                    <p class="p2">66%</p>
+                </div>
+              </div>
+              <ringPie />
+              <div class="rig">
+                 <div class="item">
+                    <p class="p1">已使用车位</p>
+                    <p class="p2">6666</p>
+                </div>
+                 <div class="item">
+                    <p class="p1">剩余车位</p>
+                    <p class="p2">6666</p>
+                </div>
+              </div>
+            </div>
+
             <div class="panel-footer"></div>
           </div>
-          <div class="panel">
+
-            <h2>发展历程</h2>
+          <div class="left-top">
-            <!-- <history /> -->
+            <div class="topBg">
+              24小时车位使用统计
+            </div>
+            <szBar />
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -482,6 +510,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.carFlex{
+  display: flex;
+  color: #fff;
+  justify-content: center;
+  align-items: center;
+   .item{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+     width: 2rem;
+     text-align: center;
+     height: 1.3rem;
+    background: url(/img/img12.png) no-repeat;
+  background-size: contain;
+  margin-top: .3rem;
+  .p1{
+    font-size: .2rem;
+    margin-bottom: .1rem;
+  }
+    .p2{
+    font-size: .3rem;
+  }
+    }
+
+}
 .topBg {
   height: .7rem;
   background: url(/img/img1.png) no-repeat;
@@ -492,8 +545,9 @@ export default {
   color: #AECEFF;
   font-size: .21rem;
 }
-.topBg2{
+
-   height: .7rem;
+.topBg2 {
+  height: .7rem;
   background: url(/img/img11.png) no-repeat;
   background-size: contain;
   display: flex;
@@ -502,6 +556,7 @@ export default {
   color: #AECEFF;
   font-size: .21rem;
 }
+
 .left-top {
   height: 3.5rem;
   position: relative;