美文网首页让前端飞Web前端之路码农十年
Echarts世界地图中国分区显示

Echarts世界地图中国分区显示

作者: 清风_gary_明月 | 来源:发表于2019-08-13 17:05 被阅读6次

    需求:在报表显示世界地图,国外显示到国家,国内显示到省份。


      分析:由于之前系统中所有的报表都是用Echarts做的,所以决定世界地图也用Echarts来做,查了一下Echarts网方网站,貌似和地图有关的Demo都已关闭(API尚在);查了一些资料,发现Echarts支持的地图大都只显示到国家,如下图。很明显不符合我们的需求,对于我这个半屌子前端,着实费了好大精力,好在查到了Echarts是可以支持自定义,这里记录一下,供有需求同学参考。
      


    w-m-0.png

    1、简述地图坐标加载的两种方式


      第一种:通过动态从后台加载,这里可以参考Echarts API文档,这里后台的数据要以JSON格式返回

    $.get('map/json/china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map',
                map: 'china'
            }]
        });
    });
    //https://echarts.baidu.com/option.html#geo.map
    

      第二种:比较简单,就是直接在页面上引入js文件,这里改造前用的是world.js,改造后用的是world_new.js文件。

    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/world.js"></script>
    //<script type="text/javascript" src="js/world_new.js"></script>
    

      这里采用引入JS的方式作示例说明,后面我会把两个JS都附上。


    2、改造world.js


      大家可以自行下载world.js文件打开看一下源码,这里只拿出一行核心代码说明,registerMap里面的world.json就是我们要自定义的json(原world.js中world.json参数位置坐标是不包含中国省份的),这里我们要做的就是把中国省份地理坐标加入,因为registerMap支持的是标准的geo坐标系(不了解的可自行搜索),关于中国省份的坐标,大家可以从网上自行下载china.js,很容易找到,记得要稍微转换一下格式。

    &emsp;&emsp;echarts.registerMap('world', world.json);
    &emsp;&emsp;改造后
    &emsp;&emsp;echarts.registerMap('world', world_new.json);
    

    改造后的效果如下:


    w-m-1.png

    3、打包下载


    链接:https://pan.baidu.com/s/1xazTcjHyGOKQsi-jyRe6eA 
    提取码:kapq 
    

      若链接莫名失效,可以留言联系,也可以按照上述的方式自行改造一下,包中有一份世界地图中的中国坐标供参考。

    相关文章

      网友评论

        本文标题:Echarts世界地图中国分区显示

        本文链接:https://www.haomeiwen.com/subject/mrypjctx.html