这里使用echarts 4.9的版本显示中国地图，因为5.X的版本已经把地图模块分离出去了
可以从这里下载全国地图数据或各身份的数据 https://github.com/apache/echarts/tree/master/test/data/map
完整代码示例：中国地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全国地图</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.4.9.0.js"></script>
<!-- 引入中国地图数据 -->
<script src="js/map/china.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1100px;height:800px;"></div>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '全国客户分布',
top:'top',
x:'center'
},
tooltip: {
trigger: 'item', // 触发类型，'item' 表示鼠标悬浮到图形上时触发
formatter: '{b}: {c}' // 提示框内容的格式，{b} 是名称，{c} 是值
},
// dataRange
visualMap: {
show: true,
min: 0,
max: 3000,
text: ["高", "低"],
realtime: true,
calculable: true,
color: ["#28C9B7", "#E3F2D9"],
},
series:[
{
name:'客户分布',
type:'map',
map: "china",
show:true,
label: {
normal: {
show: true, // 显示省份名称或数量
formatter: function (params) {
// 当值为0时不显示省份名称，直接留空；否则显示省份名称
if (params.value && params.value >0){
return params.name
}
return '';
},
fontSize:12,
color:'#333',
position: 'top' // 标签在地图内部
},
emphasis: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
tooltip: {
formatter: function (params) {
// 当值为0时不显示信息，直接留空；否则显示数量
if (params.value && params.value >0){
return params.name + ' : '+params.value
}
return '';
}
},
markArea:{
label:{
show:true
},
itemStyle:{
color:'blue',
},
},
itemStyle: {
normal: {
show:true,
color:'#fff',
areaColor: "#DAE3F3",
borderColor: '#fff', // 省份边界线颜色
borderWidth: 1, // 省份边界线宽度
position: 'inside' // 标签在地图内部
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
data:[
{name:'北京',value:45},
{name:'天津',value:54},
{name:'河北',value:247},
{name:'山西',value:2},
{name:'辽宁',value:63},
{name:'黑龙江',value:4},
{name:'上海',value:773},
{name:'江苏',value:2656},
{name:'浙江',value:2866},
{name:'安徽',value:576},
{name:'福建',value:151},
{name:'江西',value:175},
{name:'山东',value:2000},
{name:'河南',value:150},
{name:'湖北',value:214},
{name:'湖南',value:21},
{name:'广东',value:3446},
{name:'广西',value:18},
{name:'海南',value:17},
{name:'重庆',value:16},
{name:'四川',value:16},
{name:'贵州',value:8},
{name:'云南',value:1},
{name:'陕西',value:19},
{name:'甘肃',value:1},
{name:'新疆',value:37}
]
}
],
};
chart.setOption(option);
</script>
</body>
</html>
完整代码示例：中国地图-切换省份
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全国省份切换</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.4.9.0.js"></script>
<!-- 引入中国地图数据 -->
<script src="js/map/china.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<button id="back">返回全国</button>
<div id="main" style="width: 1100px;height:800px;"></div>
<script type="text/javascript">
var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen','taiwan'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
var oBack = document.getElementById("back");
var chart = echarts.init(document.getElementById('main'));
var seriesData = [
{name:'北京',value:45},
{name:'天津',value:54},
{name:'河北',value:247},
{name:'山西',value:2},
{name:'辽宁',value:63},
{name:'黑龙江',value:4},
{name:'上海',value:773},
{name:'江苏',value:2656},
{name:'浙江',value:2866},
{name:'安徽',value:576},
{name:'福建',value:151},
{name:'江西',value:175},
{name:'山东',value:2000},
{name:'河南',value:150},
{name:'湖北',value:214},
{name:'湖南',value:21},
{name:'广东',value:3446},
{name:'广西',value:18},
{name:'海南',value:17},
{name:'重庆',value:16},
{name:'四川',value:16},
{name:'贵州',value:8},
{name:'云南',value:1},
{name:'陕西',value:19},
{name:'甘肃',value:1},
{name:'新疆',value:37}
]
oBack.onclick = function () {
initEcharts("china", "中国");
};
initEcharts("china", "中国");
// 初始化echarts
function initEcharts(pName, Chinese_) {
var tmpSeriesData = pName === "china" ? seriesData : [];
var option = {
title: {
text: Chinese_ || pName,
top:'top',
x:'center'
},
tooltip: {
trigger: 'item', // 触发类型，'item' 表示鼠标悬浮到图形上时触发
formatter: '{b}: {c}' // 提示框内容的格式，{b} 是名称，{c} 是值
},
// dataRange
visualMap: {
show: true,
min: 0,
max: 3000,
text: ["高", "低"],
realtime: true,
calculable: true,
color: ["#28C9B7", "#E3F2D9"],
},
series:[
{
name: Chinese_ || pName,
type:'map',
map: pName,
roam: false,//是否开启鼠标缩放和平移漫游
show:true,
zoom:1.1,
selectedMode : 'single',
label: {
normal: {
show: true, // 显示省份名称或数量
formatter: function (params) {
if (pName === "china") {
// 当值为0时不显示省份名称，直接留空；否则显示省份名称
if (params.value && params.value >0){
return params.name
}
return '';
}else{
return params.name
}
},
fontSize:12,
color:'#333',
position: 'top' // 标签在地图内部
},
emphasis: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
tooltip: {
formatter: function (params) {
// 当值为0时不显示信息，直接留空；否则显示数量
if (params.value && params.value >0){
return params.name + ' : '+params.value
}
return params.name;
}
},
markArea:{
label:{
show:true
},
itemStyle:{
color:'blue',
},
},
itemStyle: {
normal: {
show:true,
color:'#fff',
areaColor: "#DAE3F3",
borderColor: '#fff', // 省份边界线颜色
borderWidth: 1, // 省份边界线宽度
position: 'inside' // 标签在地图内部
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
data: tmpSeriesData
}
],
};
chart.setOption(option);
chart.off("click");
if (pName === "china") { // 全国时，添加click 进入省级
chart.on('click', function (param) {
console.log(param.name);
// 遍历取到provincesText 中的下标 去拿到对应的省js
for (var i = 0; i < provincesText.length; i++) {
if (param.name === provincesText[i]) {
//显示对应省份的方法
showProvince(provinces[i], provincesText[i]);
break;
}
}
if (param.componentType === 'series') {
var provinceName =param.name;
$('#box').css('display','block');
$("#box-title").html(provinceName);
}
});
} else { // 省份，添加双击 回退到全国
chart.on("dblclick", function () {
initEcharts("china", "中国");
});
}
}
// 展示对应的省
function showProvince(pName, Chinese_) {
//这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function () {
initEcharts(Chinese_);
});
}
// 加载对应的JS
function loadBdScript(scriptId, url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function () {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { // Others
script.onload = function () {
callback();
};
}
script.src = url;
script.id = scriptId;
document.getElementsByTagName("head")[0].appendChild(script);
};
</script>
</body>
</html>
参考
- https://echarts.apache.org/v4/zh/option.html
- 相关源码资源下载，请看文章顶部