ECharts 是一款功能强大的可视化库,它可以帮助开发者轻松地创建各种类型的图表,包括地图图表。地图图表在展示地理信息、区域分布等方面具有独特的优势。下面,我将通过四大经典案例,带你快速上手 ECharts 地图图表的制作。
一、案例一:中国地图图表
1.1 准备工作
首先,确保你的项目中已经引入了 ECharts 库。你可以通过以下代码实现:
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
1.2 数据准备
接下来,你需要准备中国地图的数据。这里我们可以使用 ECharts 内置的中国地图数据,或者从其他数据源获取。
var geoCoordMap = {
'北京': [116.46, 39.92],
'上海': [121.48, 31.22],
// ... 其他城市
};
1.3 ECharts 配置
下面是一个简单的中国地图图表配置示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '中国地图图表',
subtext: '示例',
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本,默认为数值文本
calculable: true
},
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92, 100]},
{name: '上海', value: [121.48, 31.22, 80]},
// ... 其他城市
],
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}: {c}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: 'rgba(100, 100, 100, 0.5)'
}
}
}
]
};
myChart.setOption(option);
二、案例二:世界地图图表
2.1 准备工作
与世界地图图表制作类似,首先需要引入 ECharts 库。
2.2 数据准备
这里我们同样可以使用 ECharts 内置的世界地图数据。
var geoCoordMap = {
'北京': [116.46, 39.92],
'纽约': [-74.13, 40.71],
// ... 其他城市
};
2.3 ECharts 配置
下面是一个简单的世界地图图表配置示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
// ... 其他配置
geo: {
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
// ... 其他系列
]
};
myChart.setOption(option);
三、案例三:省市区地图图表
3.1 准备工作
引入 ECharts 库。
3.2 数据准备
这里我们可以使用 ECharts 内置的省市区地图数据。
var geoCoordMap = {
'北京市': [116.46, 39.92],
'上海市': [121.48, 31.22],
// ... 其他城市
};
3.3 ECharts 配置
下面是一个简单的省市区地图图表配置示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
// ... 其他配置
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
// ... 其他系列
]
};
myChart.setOption(option);
四、案例四:自定义地图图表
4.1 准备工作
引入 ECharts 库。
4.2 数据准备
这里我们需要准备自定义地图的数据,包括坐标、区域等。
var geoCoordMap = {
'点A': [116.46, 39.92],
'点B': [121.48, 31.22],
// ... 其他点
};
4.3 ECharts 配置
下面是一个简单的自定义地图图表配置示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
// ... 其他配置
geo: {
map: '自定义地图',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
// ... 其他系列
]
};
myChart.setOption(option);
通过以上四个案例,相信你已经对 ECharts 地图图表的制作有了初步的了解。在实际应用中,你可以根据自己的需求,对 ECharts 地图图表进行个性化的定制和优化。希望这篇文章能帮助你快速上手 ECharts 地图图表的制作!
