一、效果
散点图地图下钻,全国时打点全国,下钻到省级打点省级点。
二、实现
const _this = this
this.chart = chart
// 监听chart点击事件
chart.on('click', function (params) {
let provincesName = mapProvinces[params.name]
let provinceId = mapProvincesCode[params.name]
// 地图下钻
if (params.componentType === 'geo') {
// 掉省的地图 json
if (provincesName) {
// 注册地图
_this.getProvincesJson(params.name).then((res) => {
window.echarts.registerMap(provincesName, res)
})
// 掉省级接口
_this.getChannelPerson({
'provinceId': provinceId
})
if (window.echarts.getMap(provincesName)) {
// 判断是否加载地图
setTimeout(() => {
_this.defaultOption.title.text = params.name
_this.defaultOption.geo.map = provincesName
_this.defaultOption.series[0].symbolSize = 40
chart.setOption(_this.defaultOption)
}, 200)
_this.isProvince = true
}
}
}
})
三、遇到的问题
全国和省级打点重合
原因:下钻后没有清空全国打点的series设置,新旧点重合
解决:下钻掉接口取到数据后重置所有数据