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 | } | ... | ... |