框选图

src/components/easyMap/initMapInfo.ts

@@ -4,7 +4,7 @@ import * as source from 'ol/source'
 import HaituImg from './images/bg-ocean.png'
 import store from '@/store/index'
 
-const isInternet = false
+const isInternet = true
 
 const baseMapView = {
   center: [109.6915958479584, 19.111636735969318],

src/views/gis/layout/tools/select-chart.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick, onUnmounted
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import * as echarts from 'echarts';
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    data: {
+      required: true,
+      default: () => []
+    },
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      resizeObserver: <any>null,
+      chart: <any>null
+    })
+    const ref_chart = ref();
+    const ref_main = ref();
+    const initChart = () => {
+      const chart = echarts.init(ref_chart.value);
+      const option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            minAngle: 10,
+            top: 10,
+            bottom: -10,
+            label: {
+              alignTo: 'edge',
+              formatter: '{b}\r{c}\n',
+              minMargin: 5,
+              edgeDistance: 16,
+              lineHeight: 15,
+              color: '#4C4C4C' ,
+              fontWeight: 400,
+              fontFamily: 'Microsoft YaHei' ,
+              fontSize: 14 ,
+            },
+            labelLine: {
+              length: 15,
+              length2: 0,
+              maxSurfaceAngle: 80
+            },
+            labelLayout: (params) => {
+              const isLeft = params.labelRect.x < chart.getWidth() / 2;
+              const points = params.labelLinePoints;
+              points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            },
+            data: props.data.map((v: any) => {
+              v.value = v.num
+              v.name = v.dictLabel
+              return v
+            })
+          }
+        ]
+      };
+      chart.setOption(option);
+      state.resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          chart && chart.resize()
+        }
+      })
+      state.resizeObserver.observe(ref_main.value);
+      return chart
+    }
+    watch(() => props.data, () => {
+      state.chart = initChart()
+    })
+    onMounted(() => {
+      nextTick(() => {
+        state.chart = initChart()
+      })
+      return () => {
+        state.resizeObserver?.unobserve(ref_main?.value)
+        state.resizeObserver?.disconnect()
+      }
+    })
+    return {
+      ...toRefs(state),
+      ref_chart,
+      ref_main,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+  .chart-main {
+    width: 100%;
+    height: 100%;
+    .chart-ref {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

src/views/gis/layout/tools/select.vue

@@ -24,7 +24,9 @@
     </div>
     <div class="result __box-shadow" v-if="selectParams.wkt">
       <div class="head">查询结果</div>
-      <div class="chart">查询结果</div>
+      <div class="chart">
+        <SelectChartCom :data="hasTypeCpt"/>
+      </div>
       <div class="data">
         <div class="form">
           <CusFormColumn
@@ -84,11 +86,13 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
-import {randomNum} from "@/utils/util";
+import SelectChartCom from './select-chart.vue'
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    SelectChartCom
+  },
   props: {
     map: {
       required: true
@@ -170,13 +174,18 @@ export default defineComponent({
     const hasTypeCpt = computed(() => {
       const m = new Map()
       state.result.table.data.forEach(v => {
-        m.set(v.type, v.type)
+        if (m.has(v.type)) {
+          m.set(v.type, m.get(v.type) + 1)
+        } else {
+          m.set(v.type, 1)
+        }
       })
       const arr: any = []
-      m.forEach(v => {
+      m.forEach((v, k) => {
         arr.push({
-          dictValue: v,
-          dictLabel: store.getters['dictionary/elementTypeMap'].get(v)
+          dictValue: k,
+          dictLabel: store.getters['dictionary/elementTypeMap'].get(k),
+          num: v
         })
       })
       return arr