在数据可视化的世界里，ECharts 地图图表以其强大的功能和丰富的特性，成为了许多开发者首选的工具之一。对于新手来说，ECharts 地图图表可能显得有些复杂，但别担心，本文将带你通过20个实用案例，轻松上手 ECharts 地图图表，让你玩转数据可视化。
1. 基础地图展示
首先，我们从最基础的地图展示开始。通过 ECharts，你可以轻松地将一个国家或地区的地图展示出来。
var myChart = echarts.init(document.getElementById('main'));
var option = {
series: [{
type: 'map',
mapType: 'china'
}]
};
myChart.setOption(option);
2. 省级地图
接下来，我们可以展示省级地图，比如展示某个省份的地图。
var option = {
series: [{
type: 'map',
mapType: 'china',
selectedMode: 'single',
label: {
show: true
},
data: [{
name: '北京',
selected: true
}]
}]
};
3. 城市级地图
在更细粒度上，我们可以展示城市级的地图。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}]
};
4. 地图热力图
热力图可以直观地展示某个区域的热度。
var option = {
series: [{
type: 'heatmap',
coordinateSystem: 'geo',
data: [
[116.46,39.92,100],
[116.46,39.91,80],
// 更多数据...
]
}]
};
5. 地图点击事件
ECharts 地图支持点击事件，可以用来实现交互。
myChart.on('click', function (params) {
console.log(params.name);
});
6. 地图缩放与平移
用户可以通过鼠标滚轮或拖动来缩放和平移地图。
var option = {
series: [{
type: 'map',
mapType: 'china',
zoom: 1.2,
roam: true
}]
};
7. 地图自定义样式
你可以自定义地图的样式，比如颜色、边框等。
var option = {
series: [{
type: 'map',
mapType: 'china',
itemStyle: {
normal: {
borderColor: '#f0f0f0',
areaColor: '#c9c9c9'
},
emphasis: {
borderColor: '#f4e925',
areaColor: '#f4e925'
}
}
}]
};
8. 地图数据统计
通过地图展示数据统计结果，如人口、GDP 等。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 2000000
}]
}]
};
9. 地图动画效果
ECharts 地图支持丰富的动画效果，可以用来增强视觉效果。
var option = {
series: [{
type: 'map',
mapType: 'china',
animation: true,
data: [{
name: '北京市',
value: 100
}]
}]
};
10. 地图多层级展示
在地图上展示多个层级的数据，如国家、省份、城市等。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}]
};
11. 地图与折线图结合
将地图与折线图结合，展示数据趋势。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'line',
data: [
[116.46,39.92,100],
[116.46,39.91,80],
// 更多数据...
]
}]
};
12. 地图与散点图结合
将地图与散点图结合，展示数据分布。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'scatter',
coordinateSystem: 'geo',
data: [
[116.46,39.92,100],
[116.46,39.91,80],
// 更多数据...
]
}]
};
13. 地图与饼图结合
将地图与饼图结合，展示数据占比。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'pie',
center: ['50%', '50%'],
radius: '30%',
data: [
{value: 100, name: '北京'},
{value: 80, name: '上海'},
// 更多数据...
]
}]
};
14. 地图与柱状图结合
将地图与柱状图结合，展示数据对比。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'bar',
data: [
{name: '北京', value: 100},
{name: '上海', value: 80},
// 更多数据...
]
}]
};
15. 地图与雷达图结合
将地图与雷达图结合，展示多维度数据。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'radar',
data: [
{
name: '北京',
value: [100, 90, 80, 70, 60]
},
// 更多数据...
]
}]
};
16. 地图与漏斗图结合
将地图与漏斗图结合，展示数据筛选过程。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'funnel',
data: [
{value: 100, name: '北京'},
{value: 80, name: '上海'},
// 更多数据...
]
}]
};
17. 地图与仪表盘结合
将地图与仪表盘结合，展示实时数据。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'gauge',
center: ['50%', '50%'],
radius: '30%',
data: [
{value: 100, name: '北京'}
]
}]
};
18. 地图与词云结合
将地图与词云结合，展示关键词分布。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'wordCloud',
data: [
{name: '北京', value: 100},
{name: '上海', value: 80},
// 更多数据...
]
}]
};
19. 地图与地图结合
将多个地图叠加在一起，展示不同维度数据。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '上海市',
value: 80
}]
}]
};
20. 地图与自定义组件结合
将地图与自定义组件结合，展示个性化数据。
var option = {
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京市',
value: 100
}]
}, {
type: 'custom',
coordinateSystem: 'geo',
renderItem: function (params) {
return {
type: 'text',
position: [params.data.value[0], params.data.value[1]],
style: {
text: params.data.name,
fill: '#f00',
fontSize: 14
}
};
},
data: [
{name: '北京', value: [116.46,39.92]}
]
}]
};
通过以上20个实用案例，相信你已经对 ECharts 地图图表有了更深入的了解。接下来，你可以根据自己的需求，将这些案例进行组合和创新，创造出更多有趣的数据可视化作品。祝你在数据可视化的道路上越走越远！