首页 > 建站教程 > 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,再试下。