Commit 3fe722ea4a6711c48e723fe47fe03e81c6d13d62

Authored by fengwotao
1 parent d8eba72c

feat(src/packages): 图表里的地图组件,下钻功能新增返回上一级

... ... @@ -14,7 +14,7 @@ export const enum areaEnum {
14 14 export const includes = []
15 15
16 16 export const option = {
17   - drillingIn:false,
  17 + drillingIn: false,
18 18 dataset: dataJson,
19 19 mapRegion: {
20 20 adcode: 'china',
... ... @@ -152,7 +152,7 @@ export const option = {
152 152 shadowOffsetY: 2,
153 153 shadowBlur: 10
154 154 }
155   - }
  155 + },
156 156 ]
157 157 }
158 158 export const MapDefaultConfig = { ...option }
... ...
... ... @@ -27,6 +27,8 @@ import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
27 27 import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
28 28 import cityMap from './mapGeojson/china-main-city-map.json'
29 29
  30 +type historyDataType = { name: string; code: string }
  31 +
30 32 const props = defineProps({
31 33 themeSetting: {
32 34 type: Object,
... ... @@ -57,6 +59,12 @@ use([
57 59
58 60 const saveSelectValue = ref('')
59 61
  62 +const iconStr = ref(
  63 + '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'
  64 +)
  65 +
  66 +const historyData = ref<historyDataType[]>([])
  67 +
60 68 const option = reactive({
61 69 value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
62 70 })
... ... @@ -68,7 +76,7 @@ const toolBoxOption = {
68 76 myFullButton: {
69 77 show: true,
70 78 title: '返回',
71   - 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',
  79 + icon: iconStr.value,
72 80 onclick: () => watchAdcode()
73 81 }
74 82 }
... ... @@ -79,10 +87,12 @@ props.chartConfig.option = {
79 87 ...{ toolbox: toolBoxOption }
80 88 }
81 89
  90 +//地图点击返回
82 91 const watchAdcode = () => {
83 92 if (props.chartConfig.option.drillingIn) {
84   - const findCity = (cityMap as any)[saveSelectValue.value]
85   - props.chartConfig.option.mapRegion.adcode = 'china'
  93 + const code = historyData.value.at(-2)?.code
  94 + props.chartConfig.option.mapRegion.adcode = code ? code : 'china'
  95 + historyData.value.pop()
86 96 }
87 97 }
88 98
... ... @@ -90,12 +100,16 @@ const vChartRef = ref<typeof VChart>()
90 100
91 101 //动态获取json注册地图
92 102 const getGeojson = (regionId: string) => {
93   - return new Promise<boolean>(resolve => {
94   - import(`./mapGeojson/${regionId}.json`).then(data => {
95   - registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
96   - resolve(true)
  103 + try {
  104 + return new Promise<boolean>(resolve => {
  105 + import(`./mapGeojson/${regionId}.json`).then(data => {
  106 + registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
  107 + resolve(true)
  108 + })
97 109 })
98   - })
  110 + } finally {
  111 + console.log
  112 + }
99 113 }
100 114
101 115 //异步时先注册空的 保证初始化不报错
... ... @@ -199,7 +213,12 @@ const handleVChartClick = async (params: any) => {
199 213 const { name } = params
200 214 saveSelectValue.value = name
201 215 const findAdcode = (cityMap as any)[name]
  216 + if (!findAdcode) return
202 217 props.chartConfig.option.mapRegion.adcode = findAdcode
  218 + historyData.value.push({
  219 + name,
  220 + code: findAdcode
  221 + })
203 222 }
204 223 }
205 224 </script>
... ...