Commit 9d18c1935ab2570d90e448cf55a9f080e53ee6f2

Authored by fengwotao
1 parent bfc9eccc

fix(src/packages): 图表下的地图 地图下钻后返回不了,省会下钻到市则显示为空了

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