echarts 中国地图+穿透

上两周需要做个地图,去echarts官网看了下,说的有点模糊,下载的模板又打不开,自己摸索了几天,前端技术较渣,大概弄了个半成品。
源码
git:https://github.com/easy-goo/echarts_map_demo.git
百度云:https://pan.baidu.com/s/1-lE3yi8MOcJOGur38UvdMQ 提取码: puy6
效果如图

在这里插入图片描述
单击穿透
在这里插入图片描述

需要下载各地的地图文件。json或者js之类的,这里我删除了自己项目的代码,搞了些静态数据大概搞个demo,方面以后自己用,需要的朋友也可以自己下载使用
下载好源码,需要配合vscode使用
在这里插入图片描述
修改这里传入的参数就可以用了
在这里插入图片描述

function getData(area) {
        console.log(area)
        $.getJSON('json/' + mapCity[area] + '.json', function (data) {
            //重新绘制地图
            var newCity = []
            for (var i = 0; i < data.features.length; i++) {
                if (data.features[i].properties.name == '青海') {
                    console.info(i * 2)
                }
                newCity.push({
                    //获取地图数据
                    name: data.features[i].properties.name,
                    //此处虚拟数据,应从后台服务获取数据
                    value: i * 2
                })
            }
            city = newCity
            echarts.registerMap(mapCity[area], data);
            initMap(area, city);
        });
    }

目前存在一些问题,穿透的动画延迟效果不生效,搞了一天都没弄好,就没继续深究了

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值