ECharts地图图表是一种非常强大的数据可视化工具，能够将地理信息数据以直观、美观的方式呈现出来。无论是展示国家、省份、城市，还是更细致的区域，ECharts地图图表都能满足你的需求。以下，我将通过10个实用案例，带你轻松入门ECharts地图图表的绘图技巧。
案例一：中国地图展示
代码示例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '中国地图'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '中国地图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '广东', value: Math.round(Math.random() * 1000)},
// ... 其他省份
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例解析： 通过设置mapType: 'china'，我们可以创建一个中国地图。然后，通过data属性，我们可以为每个省份指定一个值。
案例二：世界地图展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '世界地图'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}'
},
series: [
{
name: '世界地图',
type: 'map',
mapType: 'world',
roam: true,
label: {
show: true
},
data: [
{name: 'Afghanistan', value: Math.round(Math.random() * 1000)},
{name: 'Albania', value: Math.round(Math.random() * 1000)},
// ... 其他国家
]
}
]
};
myChart.setOption(option);
案例解析： 类似于中国地图，我们可以通过设置mapType: 'world'来创建一个世界地图。roam: true允许用户自由缩放和平移地图。
案例三：城市地图展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '北京地图'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '北京地图',
type: 'map',
mapType: 'beijing',
label: {
show: true
},
data: [
{name: '东城区', value: Math.round(Math.random() * 1000)},
{name: '西城区', value: Math.round(Math.random() * 1000)},
// ... 其他区域
]
}
]
};
myChart.setOption(option);
案例解析： ECharts提供了许多城市地图，例如北京地图，通过设置mapType: 'beijing'，我们可以创建一个北京地图。
案例四：热力地图展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '热力地图'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '热力地图',
type: 'heatmap',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
{name: '上海', value: [121.47, 31.23, Math.round(Math.random() * 1000)]},
// ... 其他城市
]
}
]
};
myChart.setOption(option);
案例解析： 热力地图适用于展示地理信息数据的热点分布。通过设置type: 'heatmap'，我们可以创建一个热力地图。
案例五：多级地图展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '多级地图'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '多级地图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '广东', value: Math.round(Math.random() * 1000)},
// ... 其他省份
],
levels: [
{
itemStyle: {
areaColor: '#fff'
}
},
{
itemStyle: {
areaColor: '#e6f7ff'
}
},
{
itemStyle: {
areaColor: '#b3e5fc'
}
},
{
itemStyle: {
areaColor: '#81d4fa'
}
},
{
itemStyle: {
areaColor: '#4fc3f7'
}
},
{
itemStyle: {
areaColor: '#29b6f6'
}
},
{
itemStyle: {
areaColor: '#26c6da'
}
}
]
}
]
};
myChart.setOption(option);
案例解析： 通过设置levels属性，我们可以为多级地图设置不同的颜色。
案例六：自定义地图展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '自定义地图'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '自定义地图',
type: 'map',
mapType: 'custom',
label: {
show: true
},
data: [
{name: '区域1', value: Math.round(Math.random() * 1000)},
{name: '区域2', value: Math.round(Math.random() * 1000)},
// ... 其他区域
],
regions: [
{
name: '区域1',
itemStyle: {
borderColor: '#f00',
borderWidth: 2
}
},
{
name: '区域2',
itemStyle: {
borderColor: '#0f0',
borderWidth: 2
}
}
// ... 其他区域
]
}
]
};
myChart.setOption(option);
案例解析： 通过设置mapType: 'custom'和regions属性，我们可以创建一个自定义地图。
案例七：动态地图展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '动态地图'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '动态地图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '广东', value: Math.round(Math.random() * 1000)},
// ... 其他省份
],
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
}
]
};
myChart.setOption(option);
案例解析： 通过设置animationDurationUpdate和animationEasingUpdate属性，我们可以使地图的更新动画更加平滑。
案例八：地图与折线图结合展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '地图与折线图结合'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '地图与折线图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '广东', value: Math.round(Math.random() * 1000)},
// ... 其他省份
],
itemStyle: {
areaColor: '#f00'
}
},
{
name: '折线图',
type: 'line',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
{name: '广东', value: [121.47, 31.23, Math.round(Math.random() * 1000)]},
// ... 其他城市
],
lineStyle: {
color: '#0f0'
}
}
]
};
myChart.setOption(option);
案例解析： 通过将地图与折线图结合，我们可以更直观地展示地理信息数据。
案例九：地图与散点图结合展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '地图与散点图结合'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '地图与散点图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '广东', value: Math.round(Math.random() * 1000)},
// ... 其他省份
],
itemStyle: {
areaColor: '#f00'
}
},
{
name: '散点图',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
{name: '广东', value: [121.47, 31.23, Math.round(Math.random() * 1000)]},
// ... 其他城市
],
symbolSize: 10,
itemStyle: {
color: '#0f0'
}
}
]
};
myChart.setOption(option);
案例解析： 通过将地图与散点图结合，我们可以更直观地展示地理信息数据的热点分布。
案例十：地图与柱状图结合展示
代码示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '地图与柱状图结合'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '地图与柱状图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '广东', value: Math.round(Math.random() * 1000)},
// ... 其他省份
],
itemStyle: {
areaColor: '#f00'
}
},
{
name: '柱状图',
type: 'bar',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, Math.round(Math.random() * 1000)]},
{name: '广东', value: [121.47, 31.23, Math.round(Math.random() * 1000)]},
// ... 其他城市
],
barWidth: 10,
itemStyle: {
color: '#0f0'
}
}
]
};
myChart.setOption(option);
案例解析： 通过将地图与柱状图结合，我们可以更直观地展示地理信息数据的数量分布。
通过以上10个实用案例，相信你已经对ECharts地图图表的绘图技巧有了初步的了解。在实际应用中，你可以根据自己的需求，灵活运用这些技巧，创建出美观、实用的地图图表。