修改土地利用提示信息间距

src/views/Home.vue

@@ -1045,7 +1045,7 @@ body {
 .nav {
   z-index: 99;
   width: 100%;
-  height: 70px;
+  height: 88px;
   background-image: url('../assets/img/gisdemo/top.png');
   background-size: cover;
   position: absolute;
@@ -1055,7 +1055,7 @@ body {
 /deep/.ol-full-screen, .ol-control {
     position: absolute;
     right: .5em;
-    top: 4em
+    top: 5em
 }
 /* 标志信息 */
 .mark {
@@ -1123,7 +1123,7 @@ body {
 #rightSide {
   width: 200px;
   position: absolute;
-  top: 100px;
+  top: 120px;
   right: 10px;
 }
 .controlTitle {

src/views/leftCompoents/landUse.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="landuse" id="landUse">
-  </div>
+  <div class="landuse" id="landUse"></div>
 </template>
 
 <script>
@@ -12,10 +11,10 @@ export default {
     return {};
   },
   props: {
-    color:{
-      default(){
-        return new Map([])
-      }
+    color: {
+      default() {
+        return new Map([]);
+      },
     },
     dataList: {
       type: Array,
@@ -34,95 +33,97 @@ export default {
   },
   created() {},
   mounted() {
-    const data = this.dataList;
-    const chart = new Chart({
-    container: 'landUse',
-  //   autoFit: true,
-    width: 350,
-    height: 230,
-    padding: [0, 40, 10, 40],
-});
-chart.data(data);
-chart.scale('ratio', {
-  formatter: (val) => {
-    val =(new Number(val)).toFixed(2) + '%';
-    return val;
-  },
-});
-chart.coordinate('theta', {
-  radius: 0.55,
-  innerRadius: 0.7,
-});
-chart.tooltip({
-  showTitle: false,
-  showMarkers: false,
+    const data = this.dataList;
+    const chart = new Chart({
+      container: "landUse",
+      //   autoFit: true,
+      width: 350,
+      height: 230,
+      padding: [0, 40, 10, 40],
+    });
+    chart.data(data);
+    chart.scale("ratio", {
+      formatter: (val) => {
+        val = new Number(val).toFixed(2) + "%";
+        return val;
+      },
+    });
+    chart.coordinate("theta", {
+      radius: 0.55,
+      innerRadius: 0.7,
+    });
+    chart.tooltip({
+      showTitle: false,
+      showMarkers: false,
+      itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
 
-});
-chart.legend(false);
-// 辅助文本
-chart
-  .annotation() // 注释
-  .text({
-    position: ['50%', '50%'],
-    content: '土地利用占比',
-    style: {
-      fontSize: 12,
-      fill: '#333',
-      textAlign: 'center',
-    },
-    offsetY: -5,
-  })
-  .text({
-    position: ['50%', '50%'],
-    content: '单位：',
-    style: {
-      fontSize: 10,
-      fill: '#333',
-      textAlign: 'center',
-    },
-    offsetX: -10,
-    offsetY: 20,
-  })
-  .text({
-    position: ['50%', '50%'],
-    content: '公顷',
-    style: {
-      fontSize: 10,
-      fill: '#333',
-      textAlign: 'center',
-    },
-    offsetY: 20,
-    offsetX: 15,
-  });
-chart
-  .interval()
-  .adjust('stack')
-  .position('area')
-  .color('lc',(lc)=>{
-    return this.color.get(lc)
-})
-  .label('ratio', (ratio) => {
-    return {
-      content: (data) => {
-        return `${data.lc.substr(0, 4)} ${parseFloat(ratio).toFixed(2)}%`;
-      },
-    };
-  })
-  .tooltip('lc*area', (lc,area) => {
-    return {
-      name:lc,
-      value: parseFloat(area).toFixed(2) + ' 公顷',
-     
-    };
-  });
+    });
+    chart.legend(false);
+    // 辅助文本
+    chart
+      .annotation() // 注释
+      .text({
+        position: ["50%", "50%"],
+        content: "土地利用占比",
+        style: {
+          fontSize: 12,
+          fill: "#333",
+          textAlign: "center",
+        },
+        offsetY: -5,
+      })
+      .text({
+        position: ["50%", "50%"],
+        content: "单位：",
+        style: {
+          fontSize: 10,
+          fill: "#333",
+          textAlign: "center",
+        },
+        offsetX: -10,
+        offsetY: 20,
+      })
+      .text({
+        position: ["50%", "50%"],
+        content: "公顷",
+        style: {
+          fontSize: 10,
+          fill: "#333",
+          textAlign: "center",
+        },
+        offsetY: 20,
+        offsetX: 15,
+      });
+    chart
+      .interval()
+      .adjust("stack")
+      .position("area")
+      .color("lc", (lc) => {
+        return this.color.get(lc);
+      })
+      .label("ratio", (ratio) => {
+        return {
+          content: (data) => {
+            return `${data.lc.substr(0, 4)} ${parseFloat(ratio).toFixed(2)}%`;
+          },
+        };
+      })
+      .tooltip('lc*area', (lc,area) => {
+        return {
+          name:lc,
+          value: parseFloat(area).toFixed(2) + ' 公顷',
+        };
+      });
 
-chart.interaction('element-active');
+    chart.interaction("element-active");
 
-chart.render();
+    chart.render();
   },
 };
 </script>
 
 <style scoped>
-
+.g2-tooltip .g2-tooltip-list .g2-tooltip-list-item {
+  width: auto;
+}
 </style>