ECharts 是一款使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表能够直观地展示地理信息，非常适合展示地域分布、数据比较等。下面，我将通过10个实用案例，教你如何轻松上手 ECharts 地图图表，包括绘制中国地图、世界地图等。
1. 中国地图绘制
1.1 准备工作
首先，你需要引入 ECharts 库和地图数据。可以通过以下代码实现：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<!-- 引入中国地图数据 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/china.js"></script>
<script type="text/javascript">
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('container'));
// 指定图表的配置项和数据
var option = {
title: {
text: '中国地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '中国地图',
type: 'map',
mapType: 'china',
// 其他配置项...
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
1.2 配置项说明
mapType: 设置地图类型，这里使用'china'表示中国地图。tooltip: 设置鼠标悬停时的提示框。series: 地图系列配置，包括地图类型、名称等。
2. 世界地图绘制
2.1 准备工作
与世界地图绘制类似，你需要引入 ECharts 库和世界地图数据。以下是一个简单的示例：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<!-- 引入世界地图数据 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/map/js/world.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '世界地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '世界地图',
type: 'map',
mapType: 'world',
// 其他配置项...
}]
};
myChart.setOption(option);
</script>
</body>
</html>
2.2 配置项说明
mapType: 设置地图类型，这里使用'world'表示世界地图。- 其他配置项与 China 地图类似。
3. 地图数据可视化
3.1 准备工作
首先，你需要获取地图数据。ECharts 支持多种数据格式，如 JSON、XML 等。以下是一个简单的示例：
[
{
"name": "北京",
"value": 100
},
{
"name": "上海",
"value": 200
},
{
"name": "广州",
"value": 150
}
]
3.2 配置项说明
name: 地区名称。value: 地区对应的数据值。
4. 地图交互效果
4.1 准备工作
为了实现地图交互效果，你可以使用 ECharts 的 visualMap 组件。以下是一个示例：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '地图交互效果示例'
},
tooltip: {
trigger: 'item'
},
visualMap: {
type: 'continuous',
min: 0,
max: 300,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true
},
series: [{
name: '地图交互效果',
type: 'map',
mapType: 'china',
data: [
// 地区数据...
]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
4.2 配置项说明
visualMap: 设置视觉映射组件，用于控制图表的颜色、大小等属性。type: 设置视觉映射类型，这里使用'continuous'表示连续型。min和max: 设置最小值和最大值。left和top: 设置组件的位置。
5. 地图动画效果
5.1 准备工作
为了实现地图动画效果，你可以使用 ECharts 的 animation 属性。以下是一个示例：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '地图动画效果示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '地图动画效果',
type: 'map',
mapType: 'china',
data: [
// 地区数据...
],
animation: true
}]
};
myChart.setOption(option);
</script>
</body>
</html>
5.2 配置项说明
animation: 设置是否启用动画效果，这里使用true表示启用。
6. 地图缩放和拖拽
6.1 准备工作
为了实现地图缩放和拖拽功能，你可以使用 ECharts 的 toolbox 组件。以下是一个示例：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '地图缩放和拖拽示例'
},
tooltip: {
trigger: 'item'
},
toolbox: {
show: true,
feature: {
dataZoom: {
show: true
},
dataView: {
show: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: [{
name: '地图缩放和拖拽',
type: 'map',
mapType: 'china',
data: [
// 地区数据...
]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
6.2 配置项说明
toolbox: 设置工具栏组件，包括数据缩放、数据视图、恢复、保存为图片等功能。
7. 地图自定义样式
7.1 准备工作
为了自定义地图样式，你可以使用 ECharts 的 itemStyle 和 areaStyle 属性。以下是一个示例：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '地图自定义样式示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '地图自定义样式',
type: 'map',
mapType: 'china',
data: [
// 地区数据...
],
itemStyle: {
areaColor: '#fff', // 地图区域颜色
borderColor: '#000', // 地图边框颜色
emphasis: {
areaColor: '#f00', // 鼠标悬停区域颜色
borderColor: '#f00' // 鼠标悬停边框颜色
}
},
areaStyle: {
color: '#f00' // 地图区域颜色
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
7.2 配置项说明
itemStyle: 设置地图元素样式，包括区域颜色、边框颜色等。areaStyle: 设置地图区域样式，如颜色、阴影等。
8. 地图事件监听
8.1 准备工作
为了监听地图事件，你可以使用 ECharts 的 on 方法。以下是一个示例：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '地图事件监听示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '地图事件监听',
type: 'map',
mapType: 'china',
data: [
// 地区数据...
]
}]
};
myChart.setOption(option);
// 监听点击事件
myChart.on('click', function (params) {
console.log(params.name); // 地区名称
console.log(params.value); // 地区数据值
});
</script>
</body>
</html>
8.2 配置项说明
on: 设置事件监听器，这里使用'click'表示点击事件。
9. 地图联动
9.1 准备工作
为了实现地图联动，你可以创建多个地图实例，并通过 dispatchAction 方法进行联动。以下是一个示例：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container1" style="width: 50%; height: 100%"></div>
<div id="container2" style="width: 50%; height: 100%"></div>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('container1'));
var myChart2 = echarts.init(document.getElementById('container2'));
var option1 = {
// 中国地图配置...
};
var option2 = {
// 世界地图配置...
};
myChart1.setOption(option1);
myChart2.setOption(option2);
// 联动事件监听
myChart1.on('click', function (params) {
myChart2.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
});
myChart2.on('click', function (params) {
myChart1.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
});
</script>
</body>
</html>
9.2 配置项说明
dispatchAction: 设置触发动作，这里使用'highlight'表示高亮显示。
10. 地图应用场景
10.1 数据可视化
地图图表可以用于展示地域分布、数据比较等，例如：
- 展示各省市人口数量。
- 展示各省市GDP总量。
- 展示各省市自然灾害情况。
10.2 舆情分析
地图图表可以用于展示舆情分析，例如：
- 展示各省市热点话题。
- 展示各省市负面舆情数量。
10.3 位置服务
地图图表可以用于位置服务，例如：
- 展示公司分支机构分布。
- 展示旅游景点分布。
通过以上10个实用案例，相信你已经掌握了 ECharts 地图图表的绘制方法。在实际应用中，你可以根据需求进行个性化定制，打造出更具吸引力的地图图表。