【Echart地图】jQuery+html5基于echarts.js中国地图点击弹出下级城市地图（附完整源码下载）
以下是一个简化的代码示例，展示了如何使用jQuery和ECharts创建一个简单的中国地图，点击省份后弹出该省份的城市地图。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 中国省市地图</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 地图数据
var mapData = {};
mapData['北京'] = []; // 假设北京没有下级城市
mapData['上海'] = []; // 假设上海没有下级城市
mapData['广东'] = ['广州', '深圳', '佛山', '佛门'];
// ... 其他省份和城市数据
// 指定图表的配置项和数据
var option = {
series: [{
type: 'map',
map: 'china'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 点击事件
myChart.on('click', function (params) {
var cityName = params.name;
var cities = mapData[cityName];
if (cities && cities.length > 0) {
// 创建城市地图的 ECharts 实例
var cityChart = echarts.init(document.createElement('div'));
cityChart.setOption({
series: [{
type: 'map',
map: 'china',
data: cities.map(function (city) {
return {
name: city,
value: Math.round(Math.random() * 1000)
};
})
}]
});
// 显示城市地图
document.body.appendChild(cityChart.getDom());
// 弹出地图
cityChart.showLoading();
setTimeout(function () {
cityChart.hideLoading();
}, 1000);
}
});
// 为了简化示例，这里使用了定时器来隐藏加载动画，实际使用时应该在数据加载完成后隐藏
</script>
</body>
</html>这段代码创建了一个基础的中国地图，并且当用户点击某个省份时，会检查是否有下级城市地图，如果有，则会创建一个新的ECharts实例来显示这些城市的数据。这里使用了一个简化的mapData对象来表示省份和城市之间的关系，实际应用中可以通过AJAX从服务器获取动态数据。
评论已关闭