Echarts实现区级地图

1.寻找需要的地图

获取geojson地图:
Echarts 官方Geojson 数据已被禁止, 补充geojson数据获取:
[http://datav.aliyun.com/tools/atlas/]
如果需要绘制自定义区域可以只用这个网站
http://geojson.io/#map=4/35.64/103.54
推荐先用 Open-> File 打开一个需要补充区域的json 然后用 方形工具 描绘需要的区域;
获取js地图:
Echarts官网已关闭下载,可以取github下载地图:
[https://github.com/apache/incubator-echarts]

2.Echarts导入地图

引入jquery.js和echarts.js文件到页面

<script type="text/javascript" src = "/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src = "/js/echarts.min.js"></script>

ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。
下面是两种类型的使用示例:
JavaScript 引入示例

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

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'
        }]
    });
});

本例是采用第二种方式

2.完整实例代码


<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>扬州市产业地图title>

                    
                    

你可能感兴趣的:(前端)