样式调整

@@ -4,14 +4,13 @@
     :options="options"
     id="bottomLeftChart"
     height="100%"
-    width="100%"
-  ></Echart>
+    width="100%"></Echart>
 </template>
 
 <script>
-import Echart from "@/common/echart";
-export default {
-  data() {
+  import Echart from "@/common/echart";
+  export default {
+    data () {
       return {
         options: {},
       };
@@ -27,7 +26,7 @@ export default {
     },
     watch: {
       cdata: {
-      handler(newData) {
+        handler (newData) {
           this.options = {
             tooltip: {
               trigger: "axis",
@@ -124,5 +123,5 @@ export default {
         deep: true,
       },
     },
-};
+  };
 </script>

 <template>
   <!--登记类型总量柱状图 -->
-  <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart>
+  <Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class=""></Echart>
 </template>
 
 <script>
-import Echart from "@/common/echart";
-export default {
+  import Echart from "@/common/echart";
+  export default {
     data () {
       return {
         options: {},
@@ -27,7 +27,7 @@ export default {
             grid: {
               // 让图表占满容器
               top: "20%",
-            left: "10%",
+              left: "12%",
               right: "5%",
               bottom: "16%",
             },
@@ -127,5 +127,5 @@ export default {
         deep: true,
       },
     },
-};
+  };
 </script>

@@ -4,16 +4,15 @@
     id="centreLeft1Chart"
     :key="key"
     height="1.0417rem"
-    width="80%"
-  ></Echart>
+    width="80%"></Echart>
 </template>
 <script>
-import Echart from "@/common/echart";
-export default {
+  import Echart from "@/common/echart";
+  export default {
     components: {
       Echart,
     },
-  data() {
+    data () {
       return {
         key: 0,
       };
@@ -26,7 +25,7 @@ export default {
     },
     watch: {
       cdata: {
-      handler(newData) {
+        handler (newData) {
 
           this.options = {
             color: [
@@ -49,8 +48,11 @@ export default {
                 label: {
                   formatter: (params) => {
                     // console.log(params)
-                  return `${params.name}(${params.value}`;
+                    return `${params.name}\n（${params.value}）`;
                   },
+                  position: "outer",
+                  alignTo: "edge",
+                  margin: 5
                 },
                 labelLine: {
                   lineStyle: {
@@ -67,12 +69,12 @@ export default {
         deep: true,
       },
     },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-#centreLeft1Chart {
+  #centreLeft1Chart {
     margin-bottom: 0.0521rem;
-  margin-left: .3125rem;
-}
+    margin-left: 0.3125rem;
+  }
 </style>

@@ -409,3 +409,10 @@ aside {
   background: #FF7962;
   color: #FF7962;
 }
+// 引入字体
+@font-face {
+  font-family:AliBold;
+  src:url('../image/font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf')
+}
+
+

 <template>
   <div class="rightcard">
+    <div class="card2 cardCon mt-10">
+      <div class="cardhead">登记业务量</div>
+      <Rose />
+    </div>
     <div class="card1 cardCon d-center">
       <div class="cardhead">新建国有房屋信息</div>
       <div class="cardcontent" style="margin-top: .3646rem">
         <dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" />
-        <div v-else="config.data.length==0" class="nodata">暂无数据</div>
+        <div v-else class="nodata">暂无数据</div>
       </div>
     </div>
-    <div class="card2 cardCon mt-10">
-      <div class="cardhead">登记业务量</div>
-      <Rose />
-    </div>
+
     <div class="card3 cardCon mt-10">
       <div class="cardhead">登记类型总量</div>
       <columnarsmat />