echart地图下钻三级

echarts地图下钻三级,需求:四川地图下钻三级第一级是市第二级是区第三级是展示单独展示选中的区;如下图 已经实现前两部下钻 现在要下钻到最后一步 问问大家是只能给第二级所有的json文件拆分成多个 才能实现吗 有没有简单的办法呀

img

img

img

可以考虑将第三级的数据存储在一个独立的json文件中,然后在点击第二级区域时,通过ajax请求获取该区域下的第三级数据,然后再进行展示。这样可以避免拆分所有的json文件,也可以实现三级下钻的效果

直接在JSON数据中取对应下一级数据,就OK

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7644189
  • 我还给你找了一篇非常好的博客,你可以看看是否有帮助,链接:echarts 中国地图(带南海诸岛) 及各省份地图json文件
  • 除此之外, 这篇博客: echarts自定义区域地图中的 绘制逻辑 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
    • 1 从权限json(mock.json)中取出regionId(大区id)、areaId(场区id)、filed三个数组
    • 2 从数据json中取出需要绘制的数据(即mapChineseData.json中的distributeStats)
    • 3 注册地图时使用自己定义的myChina.json
    • 4 绘制地图两个函数 drawChina(绘制中国地图) drawChart(绘制区域以及场区地图)
    option:[{
        name:'绘制区域名称',
        value:'根据数据分规则显示---第三模块详解'
        data:{
                totalNumber:'',
                ...
                弹框显示信息
            }
        },
        regionId:'大区id',//一定条件下可以为空
        areaId:'区域id',//一定条件下可以为空
        parentName:'父级区域名称',
    ]}
    
    • 5 场区一级多散点图配置,配置见:option.geo

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^