echarts省市地图菜鸟入门

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>地图</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/echarts.js"></script>
    </head>
    <body>
        <div id="china_map" style="width:800px;height:800px;">hello</div>
        <script type="text/javascript">
            $.get('js/nmg.json',function(data){//这里是json转js,如果是js文件就不需要这一步
                echarts.registerMap('nmg',data);//设置地图
                var myChart = echarts.init(document.getElementById('china_map'));//初始化
                myChart.setOption({
                     title: {
                         text: '内蒙古地图'
                     },
                     series: [{
                        type: 'map',//类型必须是map
                        map: 'nmg'//注意这里的值需要和echarts.registerMap('henan',data);一致
                     }]
                });
 
                myChart.on('click', function(params){
                    alert(1);
                    console.log(params);//此处写点击事件内容
                });//点击事件,此事件还可以用到柱状图等其他地图
            });
        </script>
    </body>
</html>

 

 

直接考过去就可以用了

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值