feat(src/packages): 图表地图新增地图下钻功能

+<script lang="ts" setup name="SelectCity">
+import { onMounted, reactive } from 'vue'
+import { getAreaList } from '@/api/external/common/index'
+import { areaEnum } from '../config'
+
+const emits = defineEmits(['submit'])
+
+const selectOptions = reactive({
+  provinceOptions: [],
+  cityOptions: [],
+  countryOptions: []
+})
+
+const selectValues = reactive({
+  provinceValue: null,
+  cityValue: null,
+  countyValue: null
+})
+
+const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
+  const resp = await getAreaList({
+    level,
+    parentId
+  })
+  if (!resp) return []
+  return resp.map((item: any) => ({ label: item.name, value: item.code }))
+}
+
+onMounted(async () => {
+  selectOptions.provinceOptions = await getAreaLists()
+  ;(selectOptions.provinceOptions as never as any).unshift({
+    label: '中国',
+    value: 'china'
+  })
+})
+
+const onHandleSelectProvince = async (value: number | string) => {
+  selectValues.cityValue = null
+  selectValues.countyValue = null
+  if (value === 'china') return
+  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as any)
+}
+
+const onHandleSelectCity = async (value: number) => {
+  selectValues.countyValue = null
+  selectOptions.countryOptions = await getAreaLists(areaEnum.COUNTY, value)
+}
+
+const onHandleSubmit = () => {
+  emits('submit', selectValues)
+}
+</script>
+
+<template>
+  <div class="select-city-content">
+    <n-select
+      @change="onHandleSelectProvince"
+      placeholder="请选择省份"
+      v-model:value="selectValues.provinceValue"
+      :options="selectOptions.provinceOptions"
+    />
+    <n-select
+      @change="onHandleSelectCity"
+      placeholder="请选择城市"
+      v-model:value="selectValues.cityValue"
+      :options="selectOptions.cityOptions"
+    />
+    <n-select
+      placeholder="请选择区域"
+      v-model:value="selectValues.countyValue"
+      :options="selectOptions.countryOptions"
+    />
+    <n-button type="primary" @click="onHandleSubmit">确定</n-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-city-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 30px;
+}
+</style>

@@ -5,9 +5,16 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
+//省市区枚举
+export const enum areaEnum {
+  PROVINCE = 'PROVINCE',
+  CITY = 'CITY',
+  COUNTY = 'COUNTY'
+}
 export const includes = []
 
 export const option = {
+  drillingIn:false,
   dataset: dataJson,
   mapRegion: {
     adcode: 'china',
@@ -100,19 +107,19 @@ export const option = {
         borderColor: 'rgba(147, 235, 248, 0.8)',
         textStyle: {
           color: '#FFFFFF',
-          fontSize: 12,
+          fontSize: 12
         }
       },
       label: {
         show: false,
         color: '#FFFFFF',
-        fontSize: 12,
+        fontSize: 12
       },
       emphasis: {
         disabled: false,
         label: {
           color: '#FFFFFF',
-          fontSize: 12,
+          fontSize: 12
         },
         itemStyle: {
           areaColor: '#389BB7',

@@ -2,18 +2,12 @@
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
   <CollapseItem name="地图" :expanded="true">
-    <SettingItemBox name="地图区域">
-      <SettingItem name="默认中国">
-        <n-select
-          size="small"
-          v-model:value="mapRegion.adcode"
-          :options="mapRegionOptions"
-          value-field="adcode"
-          label-field="name"
-        />
+    <SelectCity @submit="onHandleSelectValues" />
+    <SettingItemBox name="开启下钻">
+      <SettingItem name="">
+        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
       </SettingItem>
     </SettingItemBox>
-
     <SettingItemBox name="区域颜色">
       <SettingItem name="0%处颜色">
         <n-color-picker
@@ -69,11 +63,7 @@
         </n-space>
       </SettingItem>
       <SettingItem name="字体颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[1].label.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].label.color"></n-color-picker>
       </SettingItem>
       <SettingItem name="字体大小">
         <n-input-number
@@ -129,7 +119,7 @@
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    
+
     <SettingItemBox name="悬浮弹窗">
       <SettingItem name="显示">
         <n-space>
@@ -191,7 +181,7 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-      
+
     <SettingItemBox name="文本">
       <SettingItem name="显示">
         <n-space>
@@ -232,6 +222,7 @@ import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import { ref } from 'vue'
 import mapChinaJson from './mapGeojson/china.json'
+import SelectCity from './components/SelectCity.vue'
 
 const mapRegionOptions = ref([
   {
@@ -274,4 +265,15 @@ const seriesList = computed(() => {
 const mapRegion = computed(() => {
   return props.optionData.mapRegion
 })
+
+const onHandleSelectValues = (values: any) => {
+  const { cityValue, countyValue, provinceValue } = values
+  props.optionData.mapRegion.adcode = countyValue
+    ? countyValue
+    : cityValue
+    ? cityValue
+    : provinceValue === 'china'
+    ? 'china'
+    : provinceValue
+}
 </script>

 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart
+    @click="handleVChartClick"
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option.value"
+    :manual-update="isPreview()"
+    autoresize
+  >
   </v-chart>
 </template>
 
@@ -17,6 +25,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
 import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
+import cityMap from './mapGeojson/china-main-city-map.json'
 
 const props = defineProps({
   themeSetting: {
@@ -46,9 +55,37 @@ use([
   VisualMapComponent
 ])
 
+const saveSelectValue = ref('')
+
 const option = reactive({
   value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
+
+const toolBoxOption = {
+  show: true,
+  right: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '返回',
+      icon: 'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z',
+      onclick: () => watchAdcode()
+    }
+  }
+}
+
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
+const watchAdcode = () => {
+  if (props.chartConfig.option.drillingIn) {
+    const findCity = (cityMap as any)[saveSelectValue.value]
+    props.chartConfig.option.mapRegion.adcode = 'china'
+  }
+}
+
 const vChartRef = ref<typeof VChart>()
 
 //动态获取json注册地图
@@ -67,7 +104,7 @@ registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
   await nextTick()
-  const adCode = `${props.chartConfig.option.mapRegion.adcode}`;
+  const adCode = `${props.chartConfig.option.mapRegion.adcode}`
   if (adCode !== 'china') {
     await getGeojson(adCode)
   } else {
@@ -93,6 +130,7 @@ const dataSetHandle = async (dataset: any) => {
 
   isPreview() && vEchartsSetOption()
 }
+
 // 处理海南群岛
 const hainanLandsHandle = async (newData: boolean) => {
   if (newData) {
@@ -101,6 +139,7 @@ const hainanLandsHandle = async (newData: boolean) => {
     registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
   }
 }
+
 //监听 dataset 数据发生变化
 watch(
   () => props.chartConfig.option.dataset,
@@ -153,4 +192,14 @@ watch(
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   dataSetHandle(newData)
 })
+
+//地图点击
+const handleVChartClick = async (params: any) => {
+  if (props.chartConfig.option.drillingIn) {
+    const { name } = params
+    saveSelectValue.value = name
+    const findAdcode = (cityMap as any)[name]
+    props.chartConfig.option.mapRegion.adcode = findAdcode
+  }
+}
 </script>