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 | 3 | import { chartInitConfig } from '@/settings/designSetting' |
| 4 | 4 | import { CreateComponentType } from '@/packages/index.d' |
| 5 | 5 | import cloneDeep from 'lodash/cloneDeep' |
| 6 | -// import dataJson from './data.json' | |
| 6 | +import dataJson from './data.json' | |
| 7 | 7 | |
| 8 | 8 | //省市区枚举 |
| 9 | 9 | export const enum areaEnum { |
| ... | ... | @@ -21,7 +21,7 @@ export const option = { |
| 21 | 21 | iconDistanceRight: 20, |
| 22 | 22 | iconDistanceTop: 20, |
| 23 | 23 | drillingIn: false, |
| 24 | - // dataset: dataJson, | |
| 24 | + dataset: dataJson, | |
| 25 | 25 | mapRegion: { |
| 26 | 26 | adcode: 'china', |
| 27 | 27 | showHainanIsLands: true, | ... | ... |
| ... | ... | @@ -2,22 +2,27 @@ |
| 2 | 2 | "point": [ |
| 3 | 3 | { |
| 4 | 4 | "name": "北京", |
| 5 | + "adcode": 110000, | |
| 5 | 6 | "value": [116.405285, 39.904989, 200] |
| 6 | 7 | }, |
| 7 | 8 | { |
| 8 | 9 | "name": "郑州", |
| 10 | + "adcode": 410000, | |
| 9 | 11 | "value": [113.665412, 34.757975, 888] |
| 10 | 12 | }, |
| 11 | 13 | { |
| 12 | 14 | "name": "青海", |
| 15 | + "adcode": 630000, | |
| 13 | 16 | "value": [101.778916, 36.623178, 666] |
| 14 | 17 | }, |
| 15 | 18 | { |
| 16 | 19 | "name": "宁夏回族自治区", |
| 20 | + "adcode": 640000, | |
| 17 | 21 | "value": [106.278179, 38.46637, 66] |
| 18 | 22 | }, |
| 19 | 23 | { |
| 20 | 24 | "name": "哈尔滨市", |
| 25 | + "adcode": 230000, | |
| 21 | 26 | "value": [126.642464, 45.756967, 101] |
| 22 | 27 | } |
| 23 | 28 | ], | ... | ... |
| ... | ... | @@ -28,6 +28,7 @@ import { isPreview } from '@/utils' |
| 28 | 28 | import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json' |
| 29 | 29 | import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components' |
| 30 | 30 | import { getGeoJsonMap } from '@/api/external/common' |
| 31 | +import dataJson from './data.json' | |
| 31 | 32 | |
| 32 | 33 | const props = defineProps({ |
| 33 | 34 | themeSetting: { |
| ... | ... | @@ -106,15 +107,21 @@ props.chartConfig.option = { |
| 106 | 107 | //地图点击返回 adcode=100000,名字必须是china |
| 107 | 108 | const watchAdcode = async () => { |
| 108 | 109 | if (props.chartConfig.option.drillingIn) { |
| 110 | + let saveAdcode: any = saveLevelStr.parentInfo.adcode | |
| 109 | 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 | 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 | 123 | vEchartsSetOption() |
| 124 | + handleDataPoint(adcode) | |
| 118 | 125 | } |
| 119 | 126 | } |
| 120 | 127 | |
| ... | ... | @@ -145,7 +152,8 @@ const getGeojson = async (regionId: any) => { |
| 145 | 152 | const geoJsonFile = JSON.parse(geoJson) |
| 146 | 153 | if (!geoJsonFile) return |
| 147 | 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 | 157 | loading.value = false |
| 150 | 158 | } catch (error) { |
| 151 | 159 | loading.value = false |
| ... | ... | @@ -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 | 224 | 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 | 252 | watch( |
| 233 | 253 | () => props.chartConfig.option.mapRegion.adcode, |
| ... | ... | @@ -239,6 +259,7 @@ watch( |
| 239 | 259 | if (item.type === 'map') item.map = newData |
| 240 | 260 | }) |
| 241 | 261 | vEchartsSetOption() |
| 262 | + handleDataPoint(newData) | |
| 242 | 263 | } catch (error) { |
| 243 | 264 | console.log(error) |
| 244 | 265 | } |
| ... | ... | @@ -272,6 +293,7 @@ const handleVChartClick = async (params: any) => { |
| 272 | 293 | saveLevelStr.level = level |
| 273 | 294 | saveLevelStr.parentInfo.adcode = item.properties.parent.adcode //保存上一级的地区编码 |
| 274 | 295 | saveLevelStr.parentInfo.level = (regionMapParentArea as any)[level] //保存上一级的行政级别 |
| 296 | + handleDataPoint(adcode) | |
| 275 | 297 | } |
| 276 | 298 | }) |
| 277 | 299 | } | ... | ... |