feat: 地图控件添加点标记

src/packages/components/Charts/Maps/MapChine/config.ts

@@ -2,10 +2,11 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { MapChineConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
-
+import dataJson from './points.json'
 export const includes = ['geo']
 
 export const option = {
+  dataset: dataJson,
   geo: {
     show: true,
     type: 'map',
@@ -80,6 +81,33 @@ export const option = {
       type: 'effectScatter',
       coordinateSystem: 'geo',
       symbolSize: 12,
+      // data: [
+      //   {
+      //     // 数据映射
+      //     name: '苏尼特左旗', // 对应地图中的name
+      //     value: [113.653412, 43.854108, 4500] // value值,前面两个是X轴,Y轴坐标, 后面的数据自定义,可以设置多个
+      //   },
+      //   {
+      //     name: '二连浩特市',
+      //     value: [111.97981, 43.652895, 3560]
+      //   },
+      //   {
+      //     name: '阿巴嘎旗',
+      //     value: [114.970618, 44.022728, 3300]
+      //   },
+      //   {
+      //     name: '苏尼特右旗',
+      //     value: [112.65539, 42.746662, 2800]
+      //   },
+      //   {
+      //     name: '正镶白旗',
+      //     value: [115.031423, 42.286807, 2100]
+      //   },
+      //   {
+      //     name: '太仆寺旗',
+      //     value: [115.28728, 41.895199, 1900]
+      //   }
+      // ],
       label: {
         normal: {
           show: false

src/packages/components/Charts/Maps/MapChine/config.vue

@@ -2,11 +2,16 @@
   <!-- Echarts 全局设置 -->
   <div>
     <global-setting :optionData="optionData" :in-chart="true"></global-setting>
-    <CollapseItem name="标记样式" :expanded="false">
+    <CollapseItem
+      name="标记样式"
+      :expanded="false"
+      v-for="(item, index) in seriesList"
+      :key="index"
+    >
       <SettingItemBox name="标记">
         <SettingItem name="标记大小">
           <n-input-number
-            v-model:value="series.symbolSize"
+            v-model:value="item.symbolSize"
             size="small"
             :min="1"
           ></n-input-number>
@@ -15,7 +20,7 @@
           <n-color-picker
             size="small"
             :modes="['hex']"
-            v-model:value="series.itemStyle.color"
+            v-model:value="item.itemStyle.normal.color"
           ></n-color-picker>
         </SettingItem>
       </SettingItemBox>
@@ -32,7 +37,7 @@ import {
 } from "@/components/Pages/ChartItemSetting";
 import { lineConf } from "@/packages/chartConfiguration/echarts/index";
 import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
-import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting } from "@/components/Pages/ChartItemSetting";
 
 const props = defineProps({
   optionData: {
@@ -40,8 +45,7 @@ const props = defineProps({
     required: true,
   },
 });
-console.log('optionData',props.optionData)
-const series = computed(() => {
-  return props.optionData.series[0];
+const seriesList = computed(() => {
+  return props.optionData.series;
 });
 </script>

src/packages/components/Charts/Maps/MapChine/index.vue

@@ -2,7 +2,7 @@
   <v-chart
     ref="vChartRef"
     :theme="themeColor"
-    :option="option"
+    :option="option.value"
     :manual-update="isPreview()"
     autoresize
   >
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, reactive } from "vue";
+import { PropType, computed, reactive, watch } from "vue";
 import config, { includes } from "./config";
 import VChart from "vue-echarts";
 import { use, registerMap } from "echarts/core";
@@ -53,10 +53,22 @@ use([
 ]);
 
 registerMap("china", { geoJSON: dataJson });
-//
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes);
+
+const option = reactive({
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes),
 });
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData) => {
+    props.chartConfig.option.series[0].data = newData.data;
+    option.value = props.chartConfig.option;
+  },
+  {
+    immediate: true,
+  }
+);
+
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
 </script>
 

src/packages/components/Charts/Maps/MapChine/points.json

@@ -0,0 +1,26 @@
+{
+    "data": [{
+            "name": "苏尼特左旗",
+            "value": [113.653412, 43.854108, 4500]
+        }, {
+            "name": "二连浩特市",
+            "value": [111.97981, 43.652895, 3560]
+        },
+        {
+            "name": "阿巴嘎旗",
+            "value": [114.970618, 44.022728, 3300]
+        },
+        {
+            "name": "苏尼特右旗",
+            "value": [112.65539, 42.746662, 2800]
+        },
+        {
+            "name": "正镶白旗",
+            "value": [115.031423, 42.286807, 2100]
+        },
+        {
+            "name": "太仆寺旗",
+            "value": [115.28728, 41.895199, 1900]
+        }
+    ]
+}