<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上海市地图</title>
<!-- 引入ECharts库 -->
<script src="echarts.min.js"></script>
<script src="data.js"></script>
<script src="shanghai.js"></script>
</head>
<body>
<!-- 图表容器 -->
<div id="map" style="width: 100%; height: 800px;"></div>
<script>
// 引入上海的GeoJSON数据文件
echarts.registerMap('shanghai', shanghai);
// 创建ECharts实例
var myChart = echarts.init(document.getElementById('map'));
// 配置地图选项
let data = source.filter(v => v.datetime == 201604010000).map(function (item) {
let name = item.name;
if (name == '浦东') {
name = name + '新区'
} else {
name = name + '区'
}
return {
name: name,
value: item.max_speed
}
});
// 计算数据的最大值和最小值
var minValue = Math.min.apply(null, data.map(function (item) {
return item.value;
}));
var maxValue = Math.max.apply(null, data.map(function (item) {
return item.value;
}));
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
title: {
text: '上海各地风速'
},
visualMap: {
min: minValue, // 最小值
max: maxValue, // 最大值，根据你的数据范围设置
left: '10', // visualMap 组件在容器中的水平位置
top: 'bottom', // visualMap 组件在容器中的垂直位置
text: ['高', '低'], // 图例的标签，根据数据含义设置
calculable: true, // 是否支持手动调整
inRange: {
color: ['#F5DEB3', '#FF4500'] // 定义颜色范围
}
},
series: [{
type: 'map',
map: 'shanghai',
zoom: 1.2, // 初始缩放级别
roam: true, // 启用缩放和拖动
selectedMode: 'single', // 单选模式
label: {
show: true,
formatter: '{b}', // 显示地名
fontSize: 12,
color: 'white'
},
emphasis: {
label: {
show: true
}
},
data: data
}]
};
console.info(option)
// 设置地图点击事件
myChart.on('click', function (params) {
// 获取点击地区的名称
var cityName = params.name;
var value = params.value;
// 在这里替换成你的数据弹出方式，例如使用alert
alert('你点击了 ' + cityName + '\t' + value);
});
// 使用配置项显示地图
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
