APP 驾驶舱页面 基础信息 自助银行分类

src/views/menu/cockpit/index.vue

@@ -63,21 +63,22 @@
             <!-- 保安配备情况 -->
             <chartsCom ref="chartssecurityPieData" :id="'baqk'" :option="securityPieData"></chartsCom>
           </div>
-          <!-- 自助银行设备 -->
-          <div class="GA38">
+          <!-- 自助银行 -->
+          <div class="boxCard">
             <van-row>
               <van-col :span="24">
                 <div class="titleText">
                   <span class="leftSty"></span>
-                  <span>自助银行设备</span>
+                  <span>自助银行分类情况</span>
                 </div>
               </van-col>
             </van-row>
-            <van-row>
+            <chartsCom ref="chartsffZHSdata" :id="'lhszz'" :option="ZHSdata" ></chartsCom>
+            <!-- <van-row>
               <van-col :span="24">
-                <chartsCom ref="chartsffZHSdata" :id="'lhszz'" :option="ZHSdata" chartsHeight="340px"></chartsCom>
+                
               </van-col>
-            </van-row>
+            </van-row> -->
           </div>
         </van-tab>
         <van-tab title="综合数据">
@@ -247,7 +248,9 @@ export default {
         bankingGa38,
         offlineGa38,
         onlineGa38,
-        banking2015
+        banking2015,
+        onlineATMCount,
+        offlineATMCount
       } = this.baseData
       let dataopntionList = []
 
@@ -287,11 +290,18 @@ export default {
       }
 
       this.securityPieData = securityPrecautions(baList)
-      this.ZHSdata = ZHSData('在行式自助银行', [
-        { value: onlineATMPropertyRight['穿墙式设备'], name: '在行式自助银行穿墙式设备' },
-        { value: onlineATMPropertyRight['大堂式设备'], name: '在行式自助银行大堂式设备' },
-        { value: offlineATMPropertyRight['穿墙式设备'], name: '离行式自助银行穿墙式设备' },
-        { value: offlineATMPropertyRight['大堂式设备'], name: '离行式自助银行大堂式设备' }
+      // this.ZHSdata = ZHSData('在行式自助银行', [
+      //   { value: onlineATMPropertyRight['穿墙式设备'], name: '在行式自助银行穿墙式设备' },
+      //   { value: onlineATMPropertyRight['大堂式设备'], name: '在行式自助银行大堂式设备' },
+      //   { value: offlineATMPropertyRight['穿墙式设备'], name: '离行式自助银行穿墙式设备' },
+      //   { value: offlineATMPropertyRight['大堂式设备'], name: '离行式自助银行大堂式设备' }
+      // ])
+
+      this.ZHSdata = ZHSData('自助银行', [        
+      { value: offlineATMCount, name: '离行式自助银行' },
+        { value: onlineATMCount, name: '在行式自助银行' },
+        // { value: offlineATMPropertyRight['穿墙式设备'], name: '离行式自助银行穿墙式设备' },
+        // { value: offlineATMPropertyRight['大堂式设备'], name: '离行式自助银行大堂式设备' }
       ])
 
       let list = []

src/views/menu/cockpit/indexEcharts.js

@@ -23,7 +23,7 @@ let aqsecurity = (
       show: true,
       text: ' ',
       subtext: sum + '家',
-      x: '29%',
+      x: '24%',
       y: '33%',
       textStyle: {
         color: '#778CA2',
@@ -40,7 +40,7 @@ let aqsecurity = (
     legend: {
       orient: 'vertical',
       // icon: "diamond",
-      left: '55%',
+      left: '50%',
       icon: 'circle',
       textStyle: {
         color: '#373737',
@@ -71,8 +71,8 @@ let aqsecurity = (
         if (name) {
           obj = chartData.find(item => item.name === name)
         }
-        return `{name|${name}}{symbol| }{value|${obj.value || 0}家}{percent|${
-          obj.value && ((obj.value / sum) * 100).toFixed(0)
+        return `{name|${name}}{symbol| } {value|${obj.value || 0}家} {percent|${
+          obj.value && ((obj.value / sum) * 100).toFixed(2)
         }%}`
       }
     },
@@ -82,7 +82,7 @@ let aqsecurity = (
         type: 'pie',
         roundCap: true,
         radius: ['40%', '70%'],
-        center: ['30%', '50%'],
+        center: ['25%', '50%'],
         startAngle: 180, //起始角度
         data: chartData,
         itemStyle: {
@@ -368,39 +368,110 @@ let ZHSData = (
     // { value: 193, name: '大堂式设备' }
   ]
 ) => {
+  // let option = {
+  //   series: [
+  //     {
+  //       color: ['#91cc75','#5470c6'],
+  //       name: '',
+  //       type: 'pie',
+  //       radius: '50%',
+  //       center: ['50%', '50%'],
+  //       data: data,
+  //       label: {
+  //         normal: {
+  //           formatter: get,
+  //           rich: {
+  //             b: {
+  //               width: 20,
+  //               fontSize: 12
+  //             }
+  //           },
+  //           textStyle: {
+  //             color: '#656565' // 改变标示文字的颜色
+  //           }
+  //         }
+  //       },
+  //       emphasis: {
+  //         itemStyle: {
+  //           shadowBlur: 10,
+  //           shadowOffsetX: 0,
+  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
+  //         }
+  //       }
+  //     }
+  //   ]
+  // }
+  var colors = ['#91cc75','#5470c6']
   let option = {
+    title: {
+      text: '',
+
+      left: 'left'
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+
+    legend: {
+      orient: 'vertical',
+      top: 'center',
+      left: '48%',
+      data: data,
+      formatter: function (name) {
+        var data = option.series[0].data
+        var total = 0
+        var tarValue
+        for (var i = 0; i < data.length; i++) {
+          total += data[i].value
+          if (data[i].name == name) {
+            tarValue = data[i].value
+          }
+        }
+        var v = tarValue
+        var p = Math.round((tarValue / total) * 100)
+        return `${name}  ${v}家  ${p}%`
+      }
+    },
     series: [
       {
-        color: ['#5470c6', '#91cc75', '#ee6666', '#73c0de'],
-        name: '',
+        center: ['25%', '50%'],
+
         type: 'pie',
-        radius: '50%',
-        center: ['50%', '50%'],
+        radius: '70%',
         data: data,
-        label: {
+
+        itemStyle: {
           normal: {
-            formatter: get,
-            rich: {
-              b: {
-                width: 20,
-                fontSize: 12
-              }
-            },
-            textStyle: {
-              color: '#656565' // 改变标示文字的颜色
+            shadowBlur: 1,
+            color: function (param) {
+              // console.log(param.dataIndex)
+              return colors[param.dataIndex]
             }
           }
         },
+        label: {
+          position: 'inner',
+          textStyle: {
+            fontSize: 14,
+            color: '#181818'
+          },
+          formatter: params => {
+            return `${params.value}`
+          }
+        },
+        labelLine: {
+          show: false
+        },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
+            shadowOffsetX: 0
           }
         }
       }
     ]
   }
+  return option
 
   return option
 }