检查结果

src/components/echartsTemplate/pie.vue

@@ -37,19 +37,36 @@ let option = {
     y: "45%",
   },
   legend: {
+    type: "scroll",
     orient: "vertical",
-    right: "10%",
+    right: "5%",
     top: "center",
     data: [],
     icon: "rect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
-    itemWidth: 10, // 设置宽度
-    itemHeight: 10, // 设置高度
+    itemWidth: 12, // 设置宽度
+    itemHeight: 12, // 设置高度
 
     itemGap: 10, // 设置间距
     textStyle: {
       //图例文字的样式
       color: "#fff",
-      fontSize: 16,
+      fontSize: 14,
+    },
+    textStyle: {
+      rich: {
+        name: {
+          color: "#fff", //#BCD3E5
+          fontSize: 14,
+        },
+        value: {
+          color: "#64DAFF",
+          fontSize: 14,
+        },
+        unit: {
+          color: "#fff", //#BCD3E5
+          fontSize: 14,
+        },
+      },
     },
   },
   graphic: [
@@ -130,6 +147,12 @@ let option = {
 };
 export default {
   name: "pie_echart",
+  props: {
+    unit: {
+      type: String,
+      default: "km²", //"平方千米",
+    },
+  },
   components: {},
   data() {
     return {
@@ -138,6 +161,7 @@ export default {
   },
   methods: {
     setOptions(dataList) {
+      let _this = this;
       if (!this.myChart) {
         // var dom = document.getElementById("pie_echart");
         this.myChart = echarts.init(this.$refs.echart);
@@ -149,17 +173,30 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: colors[index][0],
+              color: colors[index % colors.length][0],
             },
             {
               offset: 1,
-              color: colors[index][1],
+              color: colors[index % colors.length][1],
             },
           ]),
         };
         // dataAll += item.value;
       });
 
+      option.legend.formatter = function (name) {
+        const sItem = dataList.find((item) =>
+          `${item.name}`.includes(`${name}`)
+        );
+        if (sItem) {
+          let aname = name.length > 4 ? name.substr(0, 4) + "..." : name;
+          return `{name|${aname}}  {value|${sItem.value}}  {unit|${_this.$props.unit}} `;
+          // return name + 'sItem.value';
+        } else {
+          return name;
+        }
+      };
+
       option.series[0].data = dataList;
       this.myChart.resize();
       this.myChart.setOption(option);

src/components/mapView/range.vue

@@ -1,33 +1,35 @@
 <template>
-  <div class="map-range fwlxrange">
-    <div :class="model.xzmj == 0 ? 'pointer' : ''" @click="drawMap">
-      <el-button plain v-if="model.xzmj == 0" icon="edit-pen" size="mini"
-        >绘制范围</el-button
+  <div class="map-range">
+    <div class="fwlxrange">
+      <div :class="model.xzmj == 0 ? 'pointer' : ''" @click="drawMap">
+        <el-button plain v-if="model.xzmj == 0" icon="edit-pen" size="mini"
+          >绘制范围</el-button
+        >
+        <span v-if="model.xzmj != 0">{{ model.xzmj }} m²</span>
+      </div>
+      <el-upload
+        class="upload-demo"
+        :on-change="handleChange"
+        :auto-upload="false"
+        :show-file-list="false"
+        :file-list="fileList"
       >
-      <span v-if="model.xzmj != 0">{{ model.xzmj }} m²</span>
+        <el-tooltip
+          v-if="fileList.length > 0"
+          :content="fileList[0].name"
+          placement="bottom-start"
+          effect="light"
+        >
+          <span class="title-item" style="display: inline-block; width: 100%">{{
+            fileList[0].name
+          }}</span>
+        </el-tooltip>
+        <el-button v-else class="upload-btn" icon="Upload" size="mini"
+          >上传文件</el-button
+        >
+      </el-upload>
+      <div class="clear" @click="clearAll">清除</div>
     </div>
-    <el-upload
-      class="upload-demo"
-      :on-change="handleChange"
-      :auto-upload="false"
-      :show-file-list="false"
-      :file-list="fileList"
-    >
-      <el-tooltip
-        v-if="fileList.length > 0"
-        :content="fileList[0].name"
-        placement="bottom-start"
-        effect="light"
-      >
-        <span class="title-item" style="display: inline-block; width: 100%">{{
-          fileList[0].name
-        }}</span>
-      </el-tooltip>
-      <el-button v-else class="upload-btn" icon="Upload" size="mini"
-        >上传文件</el-button
-      >
-    </el-upload>
-    <div class="clear" @click="clearAll">清除</div>
   </div>
 </template>
 
@@ -193,7 +195,7 @@ export default {
 <style lang="scss" scoped>
 .map-range {
   width: 100px;
-  height: 100px;
+  // height: 100px;
   color: #fff;
   .xz_type {
     margin-bottom: 10px;

src/views/complianceAnalysis/components/scjg.vue

@@ -81,9 +81,9 @@ export default {
     },
     setEchart2() {
       let datalist = [
-        { name: "永久基本农田", value: 0 },
-        { name: "城镇开发边界", value: 0 },
-        { name: "生态保护红线", value: 0 },
+        { name: "永久基本农田", value: 591045.95 },
+        { name: "城镇开发边界", value: 1721437.42 },
+        { name: "生态保护红线", value: 76682.07 },
       ];
       this.$nextTick(() => {
         this.$refs.echartRef[1].setOptions(datalist);
@@ -101,9 +101,15 @@ export default {
     },
     setEchart4() {
       let datalist = [
-        { name: "水田", value: 0 },
-        { name: "水浇地", value: 0 },
-        { name: "旱地", value: 0 },
+        { name: "非建设用地", value: 971793.04 },
+        { name: "居住用地", value: 325406.88 },
+        { name: "公共管理与公共服务用地", value: 505086.24 },
+        { name: "商业服务业设施用地", value: 203988.66 },
+        { name: "道路与交通设施用地", value: 1155874.98 },
+        { name: "公用设施用地", value: 9664.96 },
+        { name: "绿地与广场用地", value: 110350.76 },
+        { name: "城市建设用地	", value: 64312.92 },
+        { name: "留白用地	", value: 120247.82 },
       ];
       this.$nextTick(() => {
         this.$refs.echartRef[3].setOptions(datalist);
@@ -176,7 +182,7 @@ export default {
     }
 
     .echart {
-      width: 300px;
+      width: 380px;
       height: 150px;
     }
   }

src/views/complianceAnalysis/index.vue

@@ -56,14 +56,14 @@
 <script>
 import Hgxsc from "./components/hgxsc.vue";
 import Lsjl from "./components/lsjl.vue";
-// import Scjg from "./components/scjg.vue";
+import Scjg from "./components/scjg.vue";
 // import TabelView from "./components/tabelView.vue";
 export default {
   name: "complianceAnalysis",
   components: {
     Hgxsc,
     Lsjl,
-    // Scjg,
+    Scjg,
     // TabelView,
   },
   data() {