图例样式修改

src/App.vue

@@ -11,6 +11,16 @@ export default {
 </script>
 
 <style lang="scss">
+.kong{
+  color: #fff;
+  font-size: .24rem;
+  padding-top: 1.36rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 #app {
   width: 100%;
   height: 100%;

src/components/companySummary/business.vue

@@ -1,9 +1,3 @@
-<!--
- 描述: 业务范围
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
 <template>
   <div class="business-container">
     <div class="chart" id="chart_left1"></div>
@@ -11,6 +5,7 @@
 </template>
 
 <script>
+let sum=0
 export default {
   props: {
     chartData: {
@@ -21,14 +16,13 @@ export default {
   name: "business",
   data() {
     return {
-
     }
   },
   mounted() {
     setTimeout(() => {
       // console.log(this.chartData)
       this.getEchartLeft1();
-    }, 500);
+    }, 1000);
   },
   methods: {
     getEchartLeft1() {
@@ -171,10 +165,10 @@ export default {
               position: 'top',
               show: true,
               formatter: function (params) {
-                // console.log(params)
+                sum+=parseInt(params.value) 
                 // return params.data.realValue;
-                var percent = Number((params.value / 100) * 100).toFixed(2) + '%';
+                var percent = Number((params.value / sum) * 100).toFixed(2) + '%';
-                return percent;
+                return percent?percent:0;
               },
               color: '#fff',
               fontSize: 12,

src/components/companySummary/talent.vue

@@ -1,8 +1,3 @@
-<!--
- 描述: 人才队伍
- 作者: Jack Chen
- 日期: 2020-05-09
--->
 
 <template>
   <div class="talent-container">
@@ -43,7 +38,7 @@ export default {
   name: "talent",
   data() {
     return {
-
+     sum:0,
     }
   },
   created() {
@@ -53,17 +48,18 @@ export default {
     setTimeout(() => {
       // console.log(this.chartData)
       this.getEchartLeft2();
-    }, 500);
+    }, 800);
 
   },
   methods: {
     GetPercent(num, total) {
+      this.sum=this.chartData.alipayPayAmount+this.chartData.weixinPayAmount+this.chartData.casePayAmount+this.chartData.robotPayAmount+this.chartData.unionPayAmount
       num = parseFloat(num);
       total = parseFloat(total);
       if (isNaN(num) || isNaN(total)) {
         return "-";
       }
-      return total <= 0 ? "0%" : (Math.round(num / total * 100) / 100.00);
+      return Math.round(Number((num / this.sum) * 100));
     },
     getEchartLeft2() {
       let myChart = echarts.init(document.getElementById('chart_left2'));

src/components/ringPie/index.vue

@@ -52,7 +52,7 @@ export default {
         this.dataRate=Math.round(this.dataRate*100)
         this.shenRate=100-this.dataRate
         this.getEchart();
-    }, 500);
+    }, 800);
   },
   methods: {
     getEchart() {

src/components/scrollArc/index.vue

@@ -21,6 +21,9 @@
 </template>
 
 <script>
+import img from '../../assets/img/brand/green.png'
+import img2 from '../../assets/img/brand/org.png'
+
 export default {
       props: {
     chartData: {
@@ -51,7 +54,7 @@ export default {
             this.dataOut.push(this.chartData.outStatistics[i].num)
        }
         this.getEchart();
-    }, 500);
+    }, 800);
   },
   methods: {
     getEchart() {
@@ -60,6 +63,7 @@ export default {
         tooltip: {
           trigger: 'axis',
           showContent: true,
+          // extraCssText: 'width:150px;height:auto;background:linear-gradient(left,rgba(87,136,255,1),rgba(87,136,255,.8),rgba(87,136,255,.5));color:#fff',
           axisPointer: { 
             type: 'shadow',
             shadowStyle: {
@@ -74,11 +78,32 @@ export default {
           },
         },
          legend: {
-        data: ['入场车流', '出场车流'],
+           itemWidth: 30,
-          textStyle:{
+   itemHeight: 30,
-                fontSize: 14,//字体大小
+      data:[
-                color: '#ffffff'//字体颜色
+            {
-           },
+                name:'入场车流',
+                textStyle:{
+                    fontSize:12,
+                    fontWeight:'bolder',
+                    color:'#fff'
+                },
+               icon:`image://${img}`,
+            },
+            {
+                name:'出场车流',
+                textStyle:{
+                    fontSize:12,
+                    fontWeight:'bolder',
+                    color:'#fff',
+                },
+               icon:`image://${img2}`,
+            }
+        ],
+          // textStyle:{
+          //       fontSize: 14,//字体大小
+          //       color: '#ffffff'//字体颜色
+          //  },
     },
         color: ['#1BDB7F','#EF8C62'],
         grid: {
@@ -119,9 +144,10 @@ export default {
           type: 'line',
           data: this.dataIn,
           symbolSize: 10,
-          itemStyle: {
+          showSymbol: false,
-            opacity: 0,
+          // itemStyle: {
-          },
+          //   opacity: 0,
+          // },
           emphasis: {
             label: {
               show: true,
@@ -154,9 +180,10 @@ export default {
           type: 'line',
           data: this.dataOut,
           symbolSize: 10,
-          itemStyle: {
+          showSymbol: false,
-            opacity: 0,
+          // itemStyle: {
-          },
+          //   opacity: 0,
+          // },
           emphasis: {
             label: {
               show: true,

src/components/szBar/index.vue

@@ -43,7 +43,7 @@ export default {
             this.yData1.push(this.chartData.inStatistics[i].num)
        }
         this.getEchart();
-    }, 500);
+    }, 800);
   },
   methods: {
     getEchart() {
@@ -163,19 +163,19 @@ export default {
               }
             },
             barWidth: barWidth,
-            markPoint: {
+            // markPoint: {
-              symbol: 'circle',
+            //   symbol: 'circle',
-              itemStyle: {
+            //   itemStyle: {
-                normal: {
+            //     normal: {
-                  color: '#43FFFF',
+            //       color: '#43FFFF',
-                  shadowColor: '#43FFFF',
+            //       shadowColor: '#43FFFF',
-                  shadowBlur: 20
+            //       shadowBlur: 20
-                }
+            //     }
-              },
+            //   },
-              symbolSize: [5, 5], // 容器大小
+            //   symbolSize: [5, 5], // 容器大小
-              symbolOffset: [0, 0], // 位置偏移
+            //   symbolOffset: [0, 0], // 位置偏移
-              data: dataCoord,
+            //   data: dataCoord,
-            },
+            // },
             data: this.yData1
           },
       

src/router/index.js

@@ -12,26 +12,26 @@ const routes = [
       title: '智慧云停车大数据平台'
     }
   },
-  {
+  // {
-    path: '/login',
+  //   path: '/login',
-    redirect: '/'
+  //   redirect: '/'
-  },
+  // },
-  {
+  // {
-    path: '/home',
+  //   path: '/home',
-    name: 'Home',
+  //   name: 'Home',
-    component: () => import('@/views/Home.vue'),
+  //   component: () => import('@/views/Home.vue'),
-    meta: {
+  //   meta: {
-      title: '酷屏首页统计图'
+  //     title: '酷屏首页统计图'
-    }
+  //   }
-  },
+  // },
-  {
+  // {
-    path: '/login',
+  //   path: '/login',
-    name: 'Login',
+  //   name: 'Login',
-    component: () => import('@/views/Login.vue'),
+  //   component: () => import('@/views/Login.vue'),
-    meta: {
+  //   meta: {
-      title: '登录界面'
+  //     title: '登录界面'
-    }
+  //   }
-  },
+  // },
   {
     path:'/404',
     name:'404',

src/views/Brand.vue

@@ -22,14 +22,14 @@
           </div> -->
           <div class="left-top">
             <div class="topBg">今日收费TOP5</div>
-            <table class="table">
+            <table class="table"  v-if="rankData[0]">
               <thead class="thead">
                 <td class="td">排行</td>
                 <td class="td">停车场名称</td>
                 <td class="td">收费金额</td>
               </thead>
               <tbody class="tbody">
-                <tr class="tr" v-for="(item, index) in rankData" :key="index">
+                <tr class="tr" v-for="(item, index) in rankData" :key="index" >
                   <td class="td" v-if="index == 0"><img src="/img/img3.png" alt=""></td>
                   <td class="td" v-if="index == 1"><img src="/img/img4.png" alt=""></td>
                   <td class="td" v-if="index == 2"><img src="/img/img5.png" alt=""></td>
@@ -39,7 +39,11 @@
                   <td class="td">{{ item.totalAmount }} 元</td>
                 </tr>
               </tbody>
+              
             </table>
+              <p v-else class="kong">
+                  空空如也~
+                </p>
           </div>
 
           <div class="left-top">