html
<div id="mainMap" style="width: 600px;height:400px;margin: 200px auto;"></div>
引入文件
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
js
var myChart = echarts.init(document.getElementById('mainMap')); //在id为mainMap的dom元素中显示地图
$.getJSON('https://geo.datav.aliyun.com/areas_v2/bound/360000_full.json', function(geoJson) {
//请求对应省份的编码,如江西360000
具体可查询http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
echarts.registerMap('jiangxi', geoJson);
var data = [{
name: '上饶市',
value: 123
}, {
name: '新余市',
value: 123
}, {
name: '鹰潭市',
value: 123
}, {
name: '萍乡市',
value: 123
}, {
name: '景德镇市',
value: 123
}, {
name: '南昌市',
value: 123
}, {
name: '宜春市',
value: 123
}, {
name: '抚州市',
value: 123
}, {
name: '九江市',
value: 123
}, {
name: '吉安市',
value: 123
}, {
name: '赣州市',
value: 123
}]
option = {
// backgroundColor: '#36F3BE', //echarts图表背景颜色
tooltip: {
trigger: "item",
formatter: function(params) {
if (params.seriesType == "scatter") {
return params.name + " : " + params.value[2];
}
if (isNaN(params.value)) {
return params.name + " : " + 0;
} else {
return params.name + " : " + params.value;
}
}
},
visualMap: {
show: false,
// calculable: true,
seriesIndex: [0],
inRange: {}
},
geo: {
show: true,
map: "jiangxi",
label: {
normal: {
show: true,
color: "#ccc" //控制地图省市文字颜色
},
emphasis: {
show: false,
color: "#fff" //悬浮字体颜色
}
},
roam: true,
layoutSize: '95%',
layoutCenter: ['50%', '50%'],
itemStyle: {
normal: {
areaColor: "#4885FF", //地图背景颜色
borderColor: "#ccc" //边界颜色
},
emphasis: {
areaColor: "skyblue", //悬浮背景颜色
}
}
},
series: [{
type: "map",
map: "jiangxi",
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
roam: false,
animation: false,
data: data
}]
};
myChart.setOption(option);
});
效果图