之前用地图都是参考别人的例子改动，然后把自己搞懵逼了，原来地图这么简单。
ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。
ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
话不多说，直接上例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/hz.js"></script>
<style>
h2:nth-child(n+2){
margin-top: 30px;
}
.demo{
height: 300px;
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>简单的地图</h2>
<div class="demo" id="demo"></div>
<script>
var myChart = echarts.init(document.getElementById('demo'));
var option = {
series: [{
type: 'map',
map: "china"
}]
};
myChart.setOption(option);
</script>
<h2>部分地图</h2>
<div class="demo" id="demo1"></div>
<script>
var myChart = echarts.init(document.getElementById('demo1'));
var option = {
series: [{
type: 'map',
map: "hz"
}]
};
myChart.setOption(option);
</script>
</body>
</html>
这里引入了以下文件
- echart.js
- china.js
- hz.js
echart.js和china.js通过npm install echarts之后都有。
hz.js我是通过http://datav.aliyun.com/tools/atlas/
这个网址获取到的，然后参考china.js修改以下。（也可以不修改，头部两句官网的方式）
ajax引入json方式
$.getJSON('hz_geo.json', function (geoJson) {
echarts.registerMap('HZ', geoJson);
var myChart = echarts.init(document.getElementById('demo1'));
var option = {
tooltip: {
show: true
},
visualMap: [
{
type: 'piecewise',
// text: ['企业注册量'],
pieces: [
{min: 0, max: 1000, color: '#41abe3'},
{min: 1000, max: 2000, color: '#1990d2'},
{min: 2000, max: 3000, color: '#176cbc'},
{min: 3000, max: 4000, color: '#155998'},
{min: 4000, max: 5000, color: '#093c65'}
],
inverse: true,
show: false,
right: 0,
padding: 10,
backgroundColor: 'rgba(1,23,75,0.5)'
}
],
series: [
{
name: 'hz',
type: 'map',
mapType: 'HZ', // 自定义扩展图表类型
zoom: 1,
itemStyle: {
borderColor: '#01e8fd',
borderWidth: 1
},
aspectScale: 1,
data: [
{name: "上城区", value: 1000},
{name: "下城区", value: 2000},
{name: "江干区", value: 1000},
{name: "拱墅区", value: 2000},
{name: "西湖区", value: 3000},
{name: "滨江区", value: 4000},
{name: "萧山区", value: 1000},
{name: "余杭区", value: 2000},
{name: "桐庐县", value: 3000},
{name: "淳安县", value: 5000},
{name: "建德市", value: 5000},
{name: "富阳区", value: 5000},
{name: "临安市", value: 5000}
]
}
]
};
myChart.setOption(option);
});
这个hz_geo.json的内容就是直接复制刚刚给的网址拷贝出来的内容
