首页 > 建站教程 > JS、jQ、TS >  echarts map显示某一省份地图正文

echarts map显示某一省份地图

echarts map显示甘肃省的地图，首先进入https://pan.baidu.com/s/1n4jD8FhbUT8A_CCXHncZXQ 提取码: rh9e，下载全部的省份数据，包含json和js两种格式，其中就有gansu.js文件。然后使用下面的代码就可以显示甘肃地图了（需要注意的是map: ‘甘肃’,需要和你下载的省份的名称对应，否则不会显示地图） 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="height:800px;"></div>
</body>
<script type="text/javascript" src="echarts.min.js" ></script>
<script type="text/javascript" src="gansu.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        selectedMode : 'single',
        map: '甘肃',
        itemStyle:{  
            normal:{label:{show:true}},  
            emphasis:{label:{show:true}}  
        }
    }]
});
</script>
</html>
效果图如下：

echarts map

如果出现下面的报错： 
Component series.map not exists. Load it first.
则是因为您的echarts文件不包含map模块，进入https://echarts.apache.org/zh/download.html，选择需要的模块，在线定制下载

在线定制下载

图表chart分类下勾选 地图Map，在坐标系coordinate systems下勾选 地理坐标系Geo，最后选择下载，稍等会即可下载完成，替换刚才的echarts.min.js，再试下。
TAGS: echarts  map