冲刺记录9
今日任务：完成界面的完整功能，尝试将赵福齐实现的位置定位功能加上
遇到困难：他写的东西太复杂我看不懂
<template>
<div class="container">
<!-- Title -->
<div class="title">可视化平台</div>
<!-- Map container -->
<div ref="mapContainer" class="map-container"></div>
</div>
</template>
<script>
import * as echarts from 'echarts/core';
import { MapChart } from 'echarts/charts';
import { TooltipComponent, VisualMapComponent } from 'echarts/components';
import { registerMap } from 'echarts/core';
import chinaMapData from '@/static/china.json';
echarts.use([MapChart, TooltipComponent, VisualMapComponent]);
export default {
data() {
return {
records: [], // 保存记录的数组
map: null // 地图对象
};
},
computed: {
// 获取所有唯一的地点列表
uniquePlaces() {
const places = this.records.map(record => this.normalizePlaceName(record.place));
return [...new Set(places)];
}
},
methods: {
// 标准化地点名称，如将“河北省衡水市”转换为“河北省”
normalizePlaceName(place) {
const provinceList = [
'北京市', '天津市', '上海市', '重庆市', '河北省', '山西省', '辽宁省', '吉林省', '黑龙江省', '江苏省',
'浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '海南省',
'四川省', '贵州省', '云南省', '陕西省', '甘肃省', '青海省', '台湾省', '内蒙古自治区', '广西壮族自治区',
'西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区', '香港特别行政区', '澳门特别行政区'
];
for (const province of provinceList) {
if (place.includes(province)) {
return province;
}
}
// 如果没有匹配到省或直辖市，则返回原始地点名称
return place;
},
// 统计特定地点在记录中出现的次数
countOccurrences(place) {
return this.records.filter(record => this.normalizePlaceName(record.place) === place).length;
},
// 加载记录数据
loadRecords() {
this.records = uni.getStorageSync('records') || [];
},
// 初始化地图
async initMap() {
// 注册中国地图
registerMap('china', chinaMapData);
// 使用 ECharts 绘制中国地图
const myChart = echarts.init(this.$refs.mapContainer);
// 配置项
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
visualMap: {
show:false,
min: 0,
max: 10,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['#e0ffff', '#006edd']
}
},
series: [{
name: '中国',
type: 'map',
map: 'china', // 指定使用的地图类型
selectedMode: 'single',
label: {
show: true
},
roam: true, // 启用地图的自由缩放和拖动功能
itemStyle: {
normal: {
areaColor: '#f4f4f4',
borderColor: '#999'
},
emphasis: {
areaColor: '#f4f4f4'
}
},
data: this.uniquePlaces.map(place => ({
name: place,
value: this.countOccurrences(place)
}))
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 添加鼠标悬停事件监听器
myChart.on('click', params => {
if (params.componentType === 'series') {
const placeName = params.name;
const occurrences = this.countOccurrences(placeName);
const placesVisited = this.records
.filter(record => this.normalizePlaceName(record.place) === placeName)
.map(record => `${record.place} ${record.date}`)
.join('\n');
let content = `${placeName}: 共 ${occurrences} 次\n`; // 地点次数单独一行
if (placesVisited.length > 0) {
content += placesVisited; // 其余地点和日期各占一行
}
uni.showModal({
title: '地点详情',
content: content,
showCancel: false,
confirmText: '关闭',
success(res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
});
}
});
}
},
mounted() {
// 加载记录数据
this.loadRecords();
// 初始化地图
this.initMap();
}
};
</script>
<style scoped>
.container {
padding: 20px;
background-image: url('/static/OIP.jpg');
background-size: cover;
background-position: center;
min-height: 100vh; /* 确保容器至少填满整个视口高度 */
background-attachment: fixed; /* 背景图像固定在视口 */
overflow-y: auto; /* 允许垂直滚动 */
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
.map-container {
width: 100%;
height: 600px; /* 设置地图容器的高度 */
}
</style>
