feat: 地图控件

README.md

@@ -2,7 +2,7 @@
 
 ![logo](readme/logo-t-y.png)
 
-GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。若您需商用请添加底部的 QQ 交流群，并联系群主（即作者本人）
+GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。
 
 ### 😶 纯 **前端** 分支： **`master`**
 

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

@@ -0,0 +1,109 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { MapChineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+
+export const includes = ['geo']
+
+export const option = {
+  geo: {
+    show: true,
+    type: 'map',
+    aspectScale: 1, // 横向拉伸
+    roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
+    map: 'china',
+    label: {
+      show: true,
+      normal: {
+        show: true, // 默认地图文字字号和字体颜色
+        fontSize: 12,
+        color: '#ffffff'
+      },
+      emphasis: {
+        show: true,
+        fontSize: 10, // 选中地图文字字号和字体颜色
+        color: '#CFCFCF'
+      }
+    },
+    itemStyle: {
+      normal: {
+        areaColor: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0.5,
+          y2: 0.3,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        }, //地图本身的颜色
+        borderColor: 'rgba(147, 235, 248, 1)', //省份边框颜色
+        borderWidth: 1 // 省份边框宽度
+      },
+      emphasis: {
+        areaColor: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        }, //地图本身的颜色
+        borderColor: 'rgba(147, 235, 248, 0.8)', //省份边框颜色
+        borderWidth: 1 // 省份边框宽度
+      }
+    },
+    textFixed: {
+      Alaska: [20, -20]
+    }
+  },
+  series: [
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      symbolSize: 12,
+      label: {
+        normal: {
+          show: false
+        },
+        emphasis: {
+          show: false
+        }
+      },
+      itemStyle: {
+        normal: {
+          shadowBlur: 10,
+          color: '#00ECC8'
+        },
+        emphasis: {
+          borderColor: '#fff',
+          borderWidth: 1
+        }
+      }
+    }
+  ]
+}
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = MapChineConfig.key
+  public chartConfig = MapChineConfig
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -1,6 +1,47 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <div>
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <CollapseItem name="标记样式" :expanded="false">
+      <SettingItemBox name="标记">
+        <SettingItem name="标记大小">
+          <n-input-number
+            v-model:value="series.symbolSize"
+            size="small"
+            :min="1"
+          ></n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="series.itemStyle.color"
+          ></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from "vue";
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from "@/components/Pages/ChartItemSetting";
+import { lineConf } from "@/packages/chartConfiguration/echarts/index";
+import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
+import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true,
+  },
+});
+console.log('optionData',props.optionData)
+const series = computed(() => {
+  return props.optionData.series[0];
+});
 </script>

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

@@ -6,7 +6,7 @@ export const MapChineConfig: ConfigType = {
   key: 'MapChine',
   chartKey: 'VMapChine',
   conKey: 'VCMapChine',
-  title: '北京地图',
+  title: '地图',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,

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

@@ -1,13 +1,63 @@
 <template>
-  <div>
+  <v-chart
-    line组件渲染
+    ref="vChartRef"
-  </div>
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  >
+  </v-chart>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed, reactive } from "vue";
+import config, { includes } from "./config";
+import VChart from "vue-echarts";
+import { use, registerMap } from "echarts/core";
+import { EffectScatterChart } from "echarts/charts";
+import { CanvasRenderer } from "echarts/renderers";
+import { useChartDataFetch } from "@/hooks";
+import { mergeTheme } from "@/packages/public/chart";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import dataJson from "./data";
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  GeoComponent,
+} from "echarts/components";
+import { isPreview } from "@/utils";
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true,
+  },
+  themeColor: {
+    type: Object,
+    required: true,
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true,
+  },
+});
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  GeoComponent,
+  EffectScatterChart,
+]);
 
+registerMap("china", { geoJSON: dataJson });
+//
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes);
+});
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-
-</style>

src/views/chart/ContentHeader/headerTitle/index.vue

@@ -22,6 +22,7 @@
       round
       placeholder="请输入项目名称"
       v-model:value.trim="title"
+      @keyup.enter="handleBlur"
       @blur="handleBlur"
    ></n-input>
   </n-space>