使用Echarts在前端页面绘制地图

很多时候，我们希望在前端页面使用全国、省市县区的地图，进行一些数据交互渲染，最多使用的就是在数据大屏页面使用

使用的是echarts的map模块

使用方法也很简单，对照官网文档，一步步就能实现

官方文档链接

//JSON 引入示例

$.get('map/china_geo.json', function (chinaJson) {
    echarts.registerMap('china', {geoJSON: geoJson});
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        geo: [{
            map: 'china',
            ...
        }]
    });
});


//SVG 引入示例

$.get('map/topographic_map.svg', function (svg) {
    echarts.registerMap('topo', {svg: svg});
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        geo: [{
            map: 'topo',
            ...
        }]
    });
});

ECharts 可以使用JSON或 SVG 两种数据格式构建地图。

对应区域的JSON或 SVG 两种数据都可以在阿里云下载到

阿里云地图数据下载地址

其他配置，如，画散点、划线等都可以在echarts文档内找到，照着做，几分钟就搞定了

一个项目要用到，刚照文档做完，记录一下