echarts社区链接:
https://www.makeapie.cn/echarts_content/xLH3WUkMLT.html
tips:只能获取到区级数据代码:
useEffect(() => {
// all.json 全国 510000_full.json 四川 510116.json 双流 //510129.json
if (user) {
const { jurisdictionCode } = user
console.log("user", user);
let jurisdictionCodeUrl = ''
let currentCode = ''
if (jurisdictionCode?.length > 6) {
jurisdictionCodeUrl = `${jurisdictionCode.slice(0, 6)}.json`
currentCode = `${jurisdictionCode.slice(0, 6)}`
} else if (jurisdictionCode.length <= 4) {
jurisdictionCodeUrl = `${jurisdictionCode}00_full.json`
currentCode = `${jurisdictionCode}00`
} else {
jurisdictionCodeUrl = `${jurisdictionCode}.json`
currentCode = `${jurisdictionCode}`
}
console.log("jurisdictionCode", jurisdictionCode, currentCode);
// 最多获取区级的json文件
AdminMapDataApi.dataV({ code: jurisdictionCodeUrl }).then(res => {
getMapData(res?.data, 'sichuan', currentCode)
})
}
return () => { }
}, [user])
const initECharts = (name, geoJso, mapData = []) => {
echarts.registerMap(name, geoJso)
return {
title: {
top: 10,
padding: 4,
text: `当前:${name}`,
subtext: '',
x: 'left',
backgroundColor: "#01050A33",
textStyle: {
color: '#C2CFDAFF',
fontWeight: 400,
fontSize: 18,
},
},
geo: {
type: 'map',
map: name, // 自定义扩展图表类型
aspectScale: 0.75, //长宽比
zoom: 1.1,
roam: false,
itemStyle: {
normal: {
areaColor: '#0A2F51',
shadowColor: '#12717D',
shadowOffsetX: 0,
shadowOffsetY: 25
},
emphasis: {
areaColor: '#0B6CAB',
}
}
},
series: [
{
type: 'map',
// selectedMode: 'single', // 是否允许选中多个区域
data: mapData,
map: name, // 自定义扩展图表类型
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#56FEFE',
borderWidth: 1.5,
areaColor: '#0A2F51',
},
emphasis: {
areaColor: '#0B6CAB',
}
},
zoom: 1.1,
roam: false,
},
]
}
}
/**
* 点击跳转下一层级区域
*/
const onEvents = {
click: param => {
const { adcode } = param?.data
// if (!isClick || jurisdictionCode?.length >= 6) {
// return
// }
// if (level === 'district') {
// setIsClick(false)
// }
if (adcode) {
if (String(adcode)?.at(-1) === '0' && String(adcode).at(-2) === '0') {
setCode(String(adcode).slice(0, -2))
} else {
setCode(adcode)
}
const queryUrl =
param?.data?.level === 'district'
? `${adcode}.json`
: `${adcode}_full.json`
// 需要后端提供接口,后端调用dataV三方接口
AdminMapDataApi.dataV({ code: queryUrl }).then(res => {
getMapData(res?.data, 'sichuan', adcode)
})
}
}
}
return (
<>
{current.length > 1 && (
<Button
icon={<RollbackOutlined />}
className="goBack-but"
onClick={() => {
setIsClick(true)
const copyData = [...current]
copyData.pop()
setCurrent(copyData)
// setCode(copyData.at(-1)?.currentCode)
if (
String(copyData.at(-1)?.currentCode)?.at(-1) === '0' &&
String(copyData.at(-1)?.currentCode).at(-2) === '0'
) {
setCode(String(copyData.at(-1)?.currentCode).slice(0, -2))
} else {
setCode(copyData.at(-1)?.currentCode)
}
setCurrentData(copyData.at(-1))
}}
>
返回
</Button>
)}
<Echarts
width="100%"
style={{ height: '100%' }}
onEvents={onEvents}
option={initECharts(
currentData?.name,
currentData?.list,
currentData?.mapData,
currentData?.pointData
)}
/>
</>
)