Commit 9d18c1935ab2570d90e448cf55a9f080e53ee6f2
1 parent
bfc9eccc
fix(src/packages): 图表下的地图 地图下钻后返回不了,省会下钻到市则显示为空了
Showing
3 changed files
with
46 additions
and
19 deletions
| @@ -3,7 +3,7 @@ import { OverrideMapBaseConfig } from './index' | @@ -3,7 +3,7 @@ import { OverrideMapBaseConfig } from './index' | ||
| 3 | import { chartInitConfig } from '@/settings/designSetting' | 3 | import { chartInitConfig } from '@/settings/designSetting' |
| 4 | import { CreateComponentType } from '@/packages/index.d' | 4 | import { CreateComponentType } from '@/packages/index.d' |
| 5 | import cloneDeep from 'lodash/cloneDeep' | 5 | import cloneDeep from 'lodash/cloneDeep' |
| 6 | -// import dataJson from './data.json' | 6 | +import dataJson from './data.json' |
| 7 | 7 | ||
| 8 | //省市区枚举 | 8 | //省市区枚举 |
| 9 | export const enum areaEnum { | 9 | export const enum areaEnum { |
| @@ -21,7 +21,7 @@ export const option = { | @@ -21,7 +21,7 @@ export const option = { | ||
| 21 | iconDistanceRight: 20, | 21 | iconDistanceRight: 20, |
| 22 | iconDistanceTop: 20, | 22 | iconDistanceTop: 20, |
| 23 | drillingIn: false, | 23 | drillingIn: false, |
| 24 | - // dataset: dataJson, | 24 | + dataset: dataJson, |
| 25 | mapRegion: { | 25 | mapRegion: { |
| 26 | adcode: 'china', | 26 | adcode: 'china', |
| 27 | showHainanIsLands: true, | 27 | showHainanIsLands: true, |
| @@ -2,22 +2,27 @@ | @@ -2,22 +2,27 @@ | ||
| 2 | "point": [ | 2 | "point": [ |
| 3 | { | 3 | { |
| 4 | "name": "北京", | 4 | "name": "北京", |
| 5 | + "adcode": 110000, | ||
| 5 | "value": [116.405285, 39.904989, 200] | 6 | "value": [116.405285, 39.904989, 200] |
| 6 | }, | 7 | }, |
| 7 | { | 8 | { |
| 8 | "name": "郑州", | 9 | "name": "郑州", |
| 10 | + "adcode": 410000, | ||
| 9 | "value": [113.665412, 34.757975, 888] | 11 | "value": [113.665412, 34.757975, 888] |
| 10 | }, | 12 | }, |
| 11 | { | 13 | { |
| 12 | "name": "青海", | 14 | "name": "青海", |
| 15 | + "adcode": 630000, | ||
| 13 | "value": [101.778916, 36.623178, 666] | 16 | "value": [101.778916, 36.623178, 666] |
| 14 | }, | 17 | }, |
| 15 | { | 18 | { |
| 16 | "name": "宁夏回族自治区", | 19 | "name": "宁夏回族自治区", |
| 20 | + "adcode": 640000, | ||
| 17 | "value": [106.278179, 38.46637, 66] | 21 | "value": [106.278179, 38.46637, 66] |
| 18 | }, | 22 | }, |
| 19 | { | 23 | { |
| 20 | "name": "哈尔滨市", | 24 | "name": "哈尔滨市", |
| 25 | + "adcode": 230000, | ||
| 21 | "value": [126.642464, 45.756967, 101] | 26 | "value": [126.642464, 45.756967, 101] |
| 22 | } | 27 | } |
| 23 | ], | 28 | ], |
| @@ -28,6 +28,7 @@ import { isPreview } from '@/utils' | @@ -28,6 +28,7 @@ import { isPreview } from '@/utils' | ||
| 28 | import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json' | 28 | import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json' |
| 29 | import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components' | 29 | import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components' |
| 30 | import { getGeoJsonMap } from '@/api/external/common' | 30 | import { getGeoJsonMap } from '@/api/external/common' |
| 31 | +import dataJson from './data.json' | ||
| 31 | 32 | ||
| 32 | const props = defineProps({ | 33 | const props = defineProps({ |
| 33 | themeSetting: { | 34 | themeSetting: { |
| @@ -106,15 +107,21 @@ props.chartConfig.option = { | @@ -106,15 +107,21 @@ props.chartConfig.option = { | ||
| 106 | //地图点击返回 adcode=100000,名字必须是china | 107 | //地图点击返回 adcode=100000,名字必须是china |
| 107 | const watchAdcode = async () => { | 108 | const watchAdcode = async () => { |
| 108 | if (props.chartConfig.option.drillingIn) { | 109 | if (props.chartConfig.option.drillingIn) { |
| 110 | + let saveAdcode: any = saveLevelStr.parentInfo.adcode | ||
| 109 | saveLevelStr.level = saveLevelStr.parentInfo.level | 111 | saveLevelStr.level = saveLevelStr.parentInfo.level |
| 110 | - await getGeojson(saveLevelStr.parentInfo.adcode) | ||
| 111 | - props.chartConfig.option.geo.map = | ||
| 112 | - saveLevelStr.parentInfo.adcode === 100000 ? 'china' : saveLevelStr.parentInfo.adcode | 112 | + if (saveAdcode === 0) { |
| 113 | + // | ||
| 114 | + saveAdcode = 'china' | ||
| 115 | + saveLevelStr.level = 'COUNTRY' | ||
| 116 | + } | ||
| 117 | + await getGeojson(saveAdcode) | ||
| 118 | + const adcode = saveAdcode === 100000 ? 'china' : saveAdcode | ||
| 119 | + props.chartConfig.option.geo.map = adcode | ||
| 113 | props.chartConfig.option.series.forEach((item: any) => { | 120 | props.chartConfig.option.series.forEach((item: any) => { |
| 114 | - if (item.type === 'map') | ||
| 115 | - item.map = saveLevelStr.parentInfo.adcode === 100000 ? 'china' : saveLevelStr.parentInfo.adcode | 121 | + if (item.type === 'map') item.map = adcode |
| 116 | }) | 122 | }) |
| 117 | vEchartsSetOption() | 123 | vEchartsSetOption() |
| 124 | + handleDataPoint(adcode) | ||
| 118 | } | 125 | } |
| 119 | } | 126 | } |
| 120 | 127 | ||
| @@ -145,7 +152,8 @@ const getGeojson = async (regionId: any) => { | @@ -145,7 +152,8 @@ const getGeojson = async (regionId: any) => { | ||
| 145 | const geoJsonFile = JSON.parse(geoJson) | 152 | const geoJsonFile = JSON.parse(geoJson) |
| 146 | if (!geoJsonFile) return | 153 | if (!geoJsonFile) return |
| 147 | saveGeojson.value = geoJsonFile | 154 | saveGeojson.value = geoJsonFile |
| 148 | - registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} }) | 155 | + const nameChina = name === '中国' ? 'china' : name |
| 156 | + registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile as any, specialAreas: {} }) | ||
| 149 | loading.value = false | 157 | loading.value = false |
| 150 | } catch (error) { | 158 | } catch (error) { |
| 151 | loading.value = false | 159 | loading.value = false |
| @@ -200,17 +208,17 @@ const hainanLandsHandle = async (newData: boolean) => { | @@ -200,17 +208,17 @@ const hainanLandsHandle = async (newData: boolean) => { | ||
| 200 | } | 208 | } |
| 201 | } | 209 | } |
| 202 | 210 | ||
| 203 | -//监听 dataset 数据发生变化 | ||
| 204 | -// watch( | ||
| 205 | -// () => props.chartConfig.option.dataset, | ||
| 206 | -// newData => { | ||
| 207 | -// dataSetHandle(newData) | ||
| 208 | -// }, | ||
| 209 | -// { | ||
| 210 | -// immediate: true, | ||
| 211 | -// deep: false | ||
| 212 | -// } | ||
| 213 | -// ) | 211 | +// 监听 dataset 数据发生变化 |
| 212 | +watch( | ||
| 213 | + () => props.chartConfig.option.dataset, | ||
| 214 | + newData => { | ||
| 215 | + dataSetHandle(newData) | ||
| 216 | + }, | ||
| 217 | + { | ||
| 218 | + immediate: true, | ||
| 219 | + deep: false | ||
| 220 | + } | ||
| 221 | +) | ||
| 214 | 222 | ||
| 215 | //监听是否显示南海群岛 | 223 | //监听是否显示南海群岛 |
| 216 | watch( | 224 | watch( |
| @@ -228,6 +236,18 @@ watch( | @@ -228,6 +236,18 @@ watch( | ||
| 228 | } | 236 | } |
| 229 | ) | 237 | ) |
| 230 | 238 | ||
| 239 | +//处理数据标点 | ||
| 240 | +const handleDataPoint = (newData: any) => { | ||
| 241 | + if (newData === 'china') { | ||
| 242 | + dataSetHandle(dataJson) | ||
| 243 | + } else { | ||
| 244 | + const filterPoint = dataJson.point.filter((item: any) => item.adcode === newData) | ||
| 245 | + dataSetHandle({ | ||
| 246 | + point: filterPoint | ||
| 247 | + }) | ||
| 248 | + } | ||
| 249 | +} | ||
| 250 | + | ||
| 231 | //监听地图展示区域发生变化 | 251 | //监听地图展示区域发生变化 |
| 232 | watch( | 252 | watch( |
| 233 | () => props.chartConfig.option.mapRegion.adcode, | 253 | () => props.chartConfig.option.mapRegion.adcode, |
| @@ -239,6 +259,7 @@ watch( | @@ -239,6 +259,7 @@ watch( | ||
| 239 | if (item.type === 'map') item.map = newData | 259 | if (item.type === 'map') item.map = newData |
| 240 | }) | 260 | }) |
| 241 | vEchartsSetOption() | 261 | vEchartsSetOption() |
| 262 | + handleDataPoint(newData) | ||
| 242 | } catch (error) { | 263 | } catch (error) { |
| 243 | console.log(error) | 264 | console.log(error) |
| 244 | } | 265 | } |
| @@ -272,6 +293,7 @@ const handleVChartClick = async (params: any) => { | @@ -272,6 +293,7 @@ const handleVChartClick = async (params: any) => { | ||
| 272 | saveLevelStr.level = level | 293 | saveLevelStr.level = level |
| 273 | saveLevelStr.parentInfo.adcode = item.properties.parent.adcode //保存上一级的地区编码 | 294 | saveLevelStr.parentInfo.adcode = item.properties.parent.adcode //保存上一级的地区编码 |
| 274 | saveLevelStr.parentInfo.level = (regionMapParentArea as any)[level] //保存上一级的行政级别 | 295 | saveLevelStr.parentInfo.level = (regionMapParentArea as any)[level] //保存上一级的行政级别 |
| 296 | + handleDataPoint(adcode) | ||
| 275 | } | 297 | } |
| 276 | }) | 298 | }) |
| 277 | } | 299 | } |