模块4个完成

src/components/companySummary/business.vue

@@ -26,13 +26,13 @@ export default {
       // 实例化对象
       let myChart = echarts.init(document.getElementById('chart_left1'));
       let charts = { // 按顺序排列从大到小
-        cityList: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车', '医疗互联', '物流行业'],
-        cityData: [1500, 1200, 900, 600, 400, 300, 100]
+        cityList: ['金融行业', '电子政务', '文创版权', '教育行业', '智慧停车'],
+        cityData: [1200, 900, 600, 400, 300, 100]
       }
 
       let top10CityList = charts.cityList;
       let top10CityData = charts.cityData;
-      let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
+      let color = ['rgba(255,255,156', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
 
       let lineY = [];
       for (let i = 0; i < charts.cityList.length; i++) {
@@ -64,7 +64,14 @@ export default {
         }
         lineY.push(data)
       }  
-
+      //这个方法很重要，是处理小圆圈的数据和位置的
+      let arr = [];
+       for (var i = 0; i < lineY.length; i++) {
+        arr.push({
+          value: lineY[i].value,
+          symbolPosition: "end",
+        });
+      }
       // 指定配置和数据
       let option = {
         color: color,
@@ -107,7 +114,7 @@ export default {
             show: true,
             inside: false,
             textStyle: {
-              color: '#b3ccf8',
+              color: '#fff',
               fontSize: 13
             },
           },
@@ -124,7 +131,7 @@ export default {
             show: true,
             inside: false,
             textStyle: {
-              color: '#b3ccf8',
+              color: '#fff',
               fontSize: 13
             },
             formatter: (val) => {
@@ -139,27 +146,45 @@ export default {
           },
           data: top10CityData.reverse()
         }],
-        series: [{
+        
+        series: [
+          {
           name: '',
           type: 'bar',
           zlevel: 2,
-          barWidth: '10px',
+          barWidth: '7px',
           data: lineY,
+          showBackground: true,
           animationDuration: 1500,
-          label: {
-            normal: {
-              color: '#b3ccf8',
-              show: false,
-              position: [0, '-15px'],
-              textStyle: {
-                fontSize: 13
+            label: {
+               position:'top',
+                show: true,
+                formatter: function (params) {
+                  // console.log(params)
+                    // return params.data.realValue;
+                    var percent = Number((params.value / 1200) * 100).toFixed(2) + '%';
+                    return percent;
+                },
+                color: '#fff',
+                fontSize: 12,
+            },
+        },
+      {
+            name: "XXX",
+            type: "pictorialBar",
+            symbol:
+              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0klEQVQokaWSsUoDQRRFT7bQbsFE82OxtbM1SWevkM8TiY2Vf2DILpJNpsix2NllZ1eDxAMXhjvvvscwD5WOrtWVulb3Ua/qU7xra7uhmbr1d4pYkwRn6vFEqOHYhFFvYre/UqjTDHgAciIBWFQwKWFc1udAQg4siY9vWVTKNtVjNZi6Hql74LJpNylhYzpiPILPPLFCxnmEDHjvOncXw6r7ofeB9ee2HNT5Tq+KWvNd7fVYoU7P+Y5/LUCjW7U8ESr9YeX6S/6mBvVLfVGf7S35N3HsEHSsKx9TAAAAAElFTkSuQmCC",
+            symbolSize: [15, 15],
+            symbolOffset: [5, 0],
+            z: 3,
+            itemStyle: {
+              normal: {
+                color: "#0A74FF",
               },
-              formatter: (a, b) => {
-                return a.name;
-              }
-            }
-          }
-        }]
+            },
+            data: arr,
+          },
+        ]
       };
 
       // 把配置给实例对象

src/components/companySummary/talent.vue

@@ -24,25 +24,20 @@ export default {
   methods: {
     getEchartLeft2() {
       let myChart = echarts.init(document.getElementById('chart_left2'));
+      
       let scaleData = [{
         name: '博士',
-        value: 5
-      },{
+        value: 100
+      }, {
         name: '硕士',
-        value: 10
-      },{
+        value: 100
+      }, {
         name: '本科',
-        value: 10
-      },{
+        value: 100
+      }, {
         name: '专科',
-        value: 10
-      },{
-        name: '国防科大',
-        value: 5
-      },{
-        name: '大厂专家',
-        value: 5
-      }];
+        value: 100
+      },];
       let rich = {
         white: {
           color: '#ddd',
@@ -64,7 +59,7 @@ export default {
         }
       };
       let data = [];
-      let color=['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+      let legendData = [];
       for (let i = 0; i < scaleData.length; i++) {
         data.push({
           value: scaleData[i].value,
@@ -72,32 +67,49 @@ export default {
           itemStyle: {
             normal: {
               borderWidth: 6,
-              shadowBlur: 10,
-              borderColor: color[i],
-              shadowColor: color[i]
             }
           }
-        }, {
-          value: 2,
-          name: '',
-          itemStyle: placeHolderStyle
         });
+           legendData.push(scaleData[i].name);
       }
 
       let option = {
-        series: [{
+         title: {
+          text: "总金额：69838.69元",
+          top: 20,
+          left:200,
+            textStyle:{
+        //文字颜色
+        color:'#fff',
+    }
+
+        },
+        legend: {
+          right: 210,
+          orient: 'vertical',
+          top: 60,
+          bottom: 20,
+          data: legendData,
+          icon: "circle",
+          textStyle:{
+        //文字颜色
+        color:'#fff',
+    }
+        },
+        series: [
+          {
           name: '',
           type: 'pie',
           clockWise: false,
-          radius: ['66%', '68%'],
-          center: ['50%', '50%'],
-          hoverAnimation: false,
+          radius: ['30%', '68%'],
+          center: ['20%', '50%'],
+          hoverAnimation: true,
           itemStyle: {
             normal: {
               label: {
                 show: true,
-                position: 'outside',
-                color: '#ddd',
+                position: 'inside',
+                color: '#ffffff',
                 formatter: (params) => {
                   let percent = 0;
                   let total = 0;
@@ -106,13 +118,22 @@ export default {
                   }
                   percent = ((params.value / total) * 100).toFixed(0);
                   if (params.name !== '') {
-                    return params.name + '\n{white|' + '占比' + percent + '%}';
+                    // return params.name + '\n{white|' + '占比' + percent + '%}';
+                    return percent + '%';
                   } else {
                     return '';
                   }
                 },
                 rich: rich
               },
+          //         label: {
+          //    //echarts饼图内部显示百分比设置
+          //    show: true,
+          //    position: "inside", //outside 外部显示  inside 内部显示
+          //    formatter: `{d}%`,
+          //    color: "#ffffff", //颜色
+          //    fontSize: 12 //字体大小
+          //  },
               labelLine: {
                 length: 10,
                 length2: 30,
@@ -122,7 +143,9 @@ export default {
             }
           },
           data: data
-        }]
+        },
+      
+        ]
       }
 
       myChart.setOption(option, true);

src/components/scrollArc/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_arc"></div>  
   </div>
 </template>
 
@@ -38,7 +41,7 @@ export default {
       this.option = {
         tooltip: {
           trigger: 'axis',
-          showContent: false,
+          showContent: true,
           axisPointer: { 
             type: 'shadow',
             shadowStyle: {
@@ -52,7 +55,14 @@ export default {
             }
           },
         },
-        color: ['#5d83ff'],
+         legend: {
+        data: ['入场车流', '出场车流'],
+          textStyle:{
+                fontSize: 14,//字体大小
+                color: '#ffffff'//字体颜色
+           },
+    },
+        color: ['#1BDB7F','#EF8C62'],
         grid: {
           top: 30,
           left: 20,
@@ -72,7 +82,7 @@ export default {
           },
           axisLine: {
             lineStyle: {
-              color: '#999',
+              color: '#7790CA',
             }
           },
         },
@@ -81,12 +91,13 @@ export default {
           axisLine: {
             show: false,
             lineStyle: {
-              color: '#999'
+              color: '#7790CA'
             }
           },
         },
-        series: [{
-          name: '人数',
+        series: [
+          {
+          name: '入场车流',
           type: 'line',
           data: this.data,
           symbolSize: 10,
@@ -110,7 +121,7 @@ export default {
             normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
-                color: '#5d83ff'
+                color: '#1BDB7F'
               },{
                 offset: 1,
                 color: 'rgba(0, 0, 0, 0)'
@@ -118,7 +129,31 @@ export default {
             }
           },
           smooth: true,
-        }]
+        },
+            {
+          name: '出场车流',
+          type: 'line',
+          data: [5,10,20,30,40,50,60,70,80,90,100],
+          symbolSize: 10,
+          itemStyle: {
+            opacity: 0,
+          },
+          emphasis: {
+            label: {
+              show: true,
+              color: '#fff',
+              fontSize: 20
+            },
+            itemStyle: {
+              color: '#5d83ff',
+              borderColor: '#fff',
+              borderWidth: 2,
+              opacity: 1
+            },
+          },
+          smooth: true,
+        }
+        ]
       };
       myChart.setOption(this.option, true);
 
@@ -126,19 +161,19 @@ export default {
         myChart.resize();
       });
 
-      this.timer = setInterval(() => {
-        myChart.dispatchAction({
-          type: 'showTip',
-          seriesIndex: 0,
-          dataIndex: this.number
-        });
+      // this.timer = setInterval(() => {
+      //   myChart.dispatchAction({
+      //     type: 'showTip',
+      //     seriesIndex: 0,
+      //     dataIndex: this.number
+      //   });
 
-        this.number++;
+      //   this.number++;
         
-        if (this.number > this.data.length) {
-          this.number = 0;
-        }
-      }, 1000);
+      //   if (this.number > this.data.length) {
+      //     this.number = 0;
+      //   }
+      // }, 1000);
     }
   },
   beforeDestroy() {
@@ -148,6 +183,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.income-container {
+  .chart {
+    height: 3rem;
+  }
+}
 .sn-container {
   left: 50px;
   top: 690px;

src/views/Brand.vue

@@ -19,19 +19,66 @@
 
       <section class="mainbox">
         <div class="item left">
-          <div class="panel">
+          <!-- <div class="panel">
             <h2>业务范围</h2>
             <business />
             <div class="panel-footer"></div>
+          </div> -->
+          <div class="left-top">
+            <div class="topBg">
+              今日收费TOP5
+            </div>
+            <table class="table">
+              <thead class="thead">
+                <td class="td">排行</td>
+                <td class="td">停车场名称</td>
+                <td class="td">收费金额</td>
+              </thead>
+              <tbody class="tbody">
+                <tr class="tr">
+                  <td class="td"><img src="/img/img3.png" alt=""></td>
+                  <td class="td">深圳宝安中心大厦</td>
+                  <td class="td">6890.38元</td>
+                </tr>
+                <tr class="tr">
+                  <td class="td"><img src="/img/img4.png" alt=""></td>
+                  <td class="td">深圳宝安中心大厦</td>
+                  <td class="td">6890.38元</td>
+                </tr>
+                <tr class="tr">
+                  <td class="td"><img src="/img/img4.png" alt=""></td>
+                  <td class="td">深圳宝安中心大厦</td>
+                  <td class="td">6890.38元</td>
+                </tr>
+                <tr class="tr">
+                  <td class="td"><img src="/img/img4.png" alt=""></td>
+                  <td class="td">深圳宝安中心大厦</td>
+                  <td class="td">6890.38元</td>
+                </tr>
+                <tr class="tr">
+                  <td class="td"><img src="/img/img4.png" alt=""></td>
+                  <td class="td">深圳宝安中心大厦</td>
+                  <td class="td">6890.38元</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-          <div class="panel">
-            <h2>人才队伍</h2>
+
+
+          <div class="left-top">
+            <div class="topBg">
+              支付统计
+            </div>
             <talent />
             <div class="panel-footer"></div>
           </div>
-          <div class="panel">
-            <h2>营收状况</h2>
-            <income />
+
+
+          <div class="left-top">
+            <div class="topBg">
+              收费车辆统计
+            </div>
+            <business />
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -68,11 +115,14 @@
         </div>
 
         <div class="item right">
-          <div class="panel">
-            <h2>产品热词</h2>
-            <!-- <wordCloud /> -->
+          <div class="left-top">
+            <div class="topBg2">
+              24小时车流统计
+            </div>
+            <scrollArc />
             <div class="panel-footer"></div>
           </div>
+
           <div class="panel">
             <h2>客户分布</h2>
             <distribution />
@@ -491,6 +541,82 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.topBg {
+  height: .7rem;
+  background: url(/img/img1.png) no-repeat;
+  background-size: contain;
+  display: flex;
+  align-items: center;
+  padding-left: .5rem;
+  color: #AECEFF;
+  font-size: .21rem;
+}
+.topBg2{
+   height: .7rem;
+  background: url(/img/img11.png) no-repeat;
+  background-size: contain;
+  display: flex;
+  align-items: center;
+  padding-left: .5rem;
+  color: #AECEFF;
+  font-size: .21rem;
+}
+.left-top {
+  height: 3.5rem;
+  position: relative;
+  background: url(/img/img2.png) no-repeat;
+  background-size: cover;
+  margin-bottom: .8rem;
+}
+
+.tbody .tr:nth-child(odd) {
+  background: #06184B;
+}
+
+//奇数行
+
+.table {
+  width: 100%;
+  border-spacing: 0;
+  border-color: transparent;
+
+  .thead {
+    background: #061131;
+    width: 100%;
+    height: .7rem;
+    line-height: .7rem;
+    font-size: .2rem;
+
+    .td {
+      color: #6FA8FF;
+      text-align: center;
+      border: none;
+      font-size: .2rem;
+    }
+  }
+
+  .tbody {
+    .td {
+      color: #fff;
+      text-align: center;
+      border: none;
+      font-size: .14rem;
+
+      img {
+        width: .4rem;
+        display: block;
+        margin: 0 auto;
+        height: .4rem;
+      }
+    }
+
+    .tr {
+      height: .5rem;
+      line-height: .5rem;
+    }
+  }
+}
+
 .brand-container {
   position: absolute;
   width: 100%;