重庆市旅游数据可视化系统基于Vue 3 ECharts Three.js Express SQLite的全栈旅游数据可视化大屏面向重庆全市 38 个行政区与著名景点提供三维地图交互、二维区划地图、图表分析、客流智能预测以及后台数据/用户管理能力。目录项目简介技术栈功能模块系统架构页面与路由三维大屏操作说明客流智能预测角色与权限演示账号快速启动目录结构后端 API 概览数据说明开发与构建常见问题项目简介本系统以重庆市旅游数据为核心将区县空间分布、著名景点、客流与营收指标、图表分析、客流预测整合到同一套可视化应用中能力说明三维大屏真实重庆 GeoJSON 行政区立体地图 景点标记点击区县进入该地区著名景点 3D 展厅区划地图ECharts 二维地图按分类/客流/营收着色点击查看区县景点图表大屏 / 分析多页 ECharts / ECharts-GL 图表客流、营收、酒店、交通、舆情等客流预测输入地区与景点地图定位 多维预测曲线 / 分时 / 一周对比 / 客源结构后台管理数据 CRUD、Excel 导入导出、用户管理、样式配置、数据库信息登录后默认进入三维大屏/map3d顶部与底部导航可切换各业务页面。技术栈前端client/技术用途Vue 3Composition API页面与组件Vite 6开发与构建Vue RouterHash 模式路由与权限守卫Pinia用户 / 主题状态Three.js三维地图、景点模型、展厅ECharts / ECharts-GL二维地图与统计图表Axios请求后端 API经 Vite 代理后端server/技术用途ExpressREST APIbetter-sqlite3本地 SQLite 数据库JWT bcryptjs登录鉴权与密码哈希svg-captcha图形验证码multer图片 / Excel 上传xlsx数据导入导出端口服务默认地址前端开发服务器http://localhost:5173后端 APIhttp://localhost:3001代理/api、/uploads→3001功能模块1. 登录与鉴权抖音精选风格登录页支持用户名或手机号登录图形验证码校验JWT Token 存于localStorage路由守卫拦截未登录访问2. 三维大屏核心基于阿里云 DataV 风格重庆市行政区 GeoJSONclient/public/geo/chongqing.json构建立体区县两江长江 / 嘉陵江水系示意全市著名景点轻量 3D 标记保证流畅点击区县→ 打开该地区著名景点 3D 展厅精美程序化模型点击景点标记 / 侧边列表 → 查看评分、年访客、营收等详情支持鼠标拖动平移、右键旋转、滚轮缩放、方向键移动3. 区划地图EChartsmap展示重庆区县按分类 / 客流 / 营收切换着色点击区县查看旅游景点列表与访客对比柱状图4. 图表大屏与图表分析DashboardKPI 卡片 多块图表布局Charts分页切换多主题分析客流趋势、区县分布、营收、日历热力、3D 图表等5. 客流智能预测输入 / 选择地区名称、景点名称右侧展示对应ECharts 地图定位高亮区县 景点散点可调参数季节系数、节假日加成、天气、价格、促销、承载上限预测结果日均客流、置信度、峰谷值、营收估算图表14 日预测含上下限、分时客流、一周对比、客源结构饼图以所选地区 / 景点历史客流为基线进行估算6. 数据与系统管理数据管理admin / editor多表 CRUD、Excel 导入导出用户管理admin账号增删改、角色分配样式设置admin大屏主题色等配置数据库admin库表与基础信息查看系统架构┌─────────────────────────────────────────────────────────┐ │ Browser http://localhost:5173 │ │ Vue3 Router Pinia Three.js ECharts │ └──────────────────────────┬──────────────────────────────┘ │ /api /uploads (Vite Proxy) ┌──────────────────────────▼──────────────────────────────┐ │ Express http://localhost:3001 │ │ JWT Auth · Captcha · CRUD · Import/Export · Predict │ └──────────────────────────┬──────────────────────────────┘ │ ┌──────────────────────────▼──────────────────────────────┐ │ SQLitebetter-sqlite3 │ │ users / spots / visitor_stats / revenue / hotels ... │ └─────────────────────────────────────────────────────────┘页面与路由路径名称说明权限#/login登录验证码 账号/手机号公开#/map3d三维大屏Three.js 全市地图与景点展厅登录#/map区划地图ECharts 二维区县地图登录#/dashboard图表大屏KPI 图表总览登录#/charts图表分析分页深度分析登录#/predict客流预测地区/景点 地图 预测图登录#/data数据管理业务表 CRUD / 导入导出admin, editor#/users用户管理用户与角色admin#/theme样式设置主题配置admin#/db数据库库信息admin布局为顶部导航 全屏内容 底部导航无左侧侧边栏。三维大屏操作说明全市地图操作说明左键拖动平移地图右键拖动旋转视角滚轮缩放↑↓←→键盘平移先点击画布获得焦点单击区县打开该地区著名景点 3D 展厅单击景点标记 / 列表查看景点详情并飞向位置地区景点展厅操作说明左键拖动 / 方向键平移展厅视角右键拖动旋转滚轮缩放点击模型或左侧列表查看景点详情「返回全市地图」关闭展厅恢复全市视图全市地图使用轻量景点标记以保证流畅展厅内使用更精细的程序化 3D 模型洪崖洞、解放碑、古镇、天生三桥、索道、码头、瀑布、峡谷等。客流智能预测在左侧输入或选择地区如「渝中区」与景点如「洪崖洞」可使用快捷标签或直接点击地图区县调节预测参数后点击开始预测查看目标区县高亮地图与景点定位指标卡片与文字建议四类 ECharts14 日曲线、分时柱状、一周对比、客源结构后端接口POST /api/predictFormData含地区、景点、基线客流与参数。角色与权限角色说明主要权限admin管理员全部页面用户/样式/数据库数据读写与导入导出editor编辑员查看大屏与预测数据读写与导入导出viewer访客查看大屏、区划、图表、预测只读演示账号用户名密码角色adminadmin123管理员editoreditor123编辑员viewerviewer123访客手机号登录示例手机号密码13800000001admin123具体手机号以数据库初始化数据为准默认与上述账号绑定。快速启动环境要求Node.js 18推荐 20 LTSWindows / macOS / Linux1. 安装依赖cd server npm install cd ../client npm install2. 启动后端端口 3001cd server npm start成功后控制台会输出类似数据库初始化完成! 默认账号: admin/admin123 ... 重庆旅游数据服务已启动: http://localhost:3001开发时可使用热重载cd server npm run dev如需重建数据库种子数据cd server npm run init-db3. 启动前端端口 5173cd client npm run dev浏览器访问http://localhost:5173登录成功后默认进入三维大屏。4. 生产构建cd client npm run build npm run preview # 本地预览构建产物部署时需将前端静态资源与后端 API 同源或配置反向代理/api、/uploads。目录结构Vue22/ ├── README.md # 本说明文档 ├── client/ # 前端 │ ├── public/ │ │ └── geo/ │ │ └── chongqing.json # 重庆市行政区 GeoJSON │ ├── src/ │ │ ├── api/ # Axios 接口封装 │ │ ├── components/ │ │ │ ├── ChongqingMap3D.vue # 全市三维地图 │ │ │ ├── DistrictSpotStage.vue # 区县景点 3D 展厅 │ │ │ └── ChartPanel.vue # ECharts 容器 │ │ ├── views/ │ │ │ ├── Login.vue / Layout.vue │ │ │ ├── Map3D.vue / MapScreen.vue │ │ │ ├── Dashboard.vue / Charts.vue │ │ │ ├── Predict.vue │ │ │ ├── DataManage.vue / UserManage.vue │ │ │ ├── ThemeSettings.vue / DbSettings.vue │ │ ├── utils/ │ │ │ ├── chongqingGeo.js # 区县、景点、主题数据 │ │ │ ├── geoMapBuilder.js # GeoJSON → 三维区县 │ │ │ ├── themeModels.js # 景点 3D 模型精美/轻量 │ │ │ └── chartOptions.js # 图表配置 │ │ ├── stores/ # Pinia │ │ ├── router/ │ │ └── main.js │ ├── vite.config.js │ └── package.json └── server/ # 后端 ├── index.js # Express 入口与路由 ├── init-db.js # 建表与演示数据 ├── data/ # SQLite 数据文件目录 ├── uploads/ # 上传文件 └── package.json后端 API 概览除验证码外业务接口均需Authorization: Bearer token。方法路径说明GET/api/captcha获取验证码POST/api/login登录GET/api/me当前用户GET/POST/PUT/DELETE/api/users用户管理adminGET/POST/PUT/DELETE/api/data/:table通用数据表 CRUDGET/api/export/:table导出 ExcelPOST/api/import/:table导入 ExcelGET/api/dashboard/*概览、景点、客流、营收、酒店、交通、舆情GET/PUT/api/config系统配置GET/api/db/info数据库信息adminPOST/api/predict客流预测FormData常用数据表名示例spots、visitor_stats、revenue、hotels等详见数据管理页与init-db.js。数据说明著名景点内置示例系统内置重庆代表性景点坐标与模型类型例如洪崖洞、解放碑、磁器口、长江索道、朝天门、人民大礼堂南山一棵树、白公馆、丰都鬼城武隆天生三桥、仙女山、金佛山、四面山大足石刻、万州大瀑布、瞿塘峡 等可在数据管理中维护景点业务数据三维侧会与内置模型做名称匹配融合。行政区覆盖重庆市主城与远郊区县约 38 个地图几何来自public/geo/chongqing.json属性游客、营收、类型等与chongqingGeo.js/ 数据库互补。开发与构建# 后端 cd server npm start # 生产方式启动 npm run dev # --watch 开发 npm run init-db # 重新初始化数据库 # 前端 cd client npm run dev # http://localhost:5173 npm run build # 输出 dist/ npm run preview # 预览构建结果前端通过 Vite 将/api、/uploads代理到http://localhost:3001开发时无需额外配置跨域。常见问题1. 前端能开接口 404 / 登录失败请确认后端已在3001端口运行cd server npm start。2. 三维地图空白或区县不显示检查client/public/geo/chongqing.json是否存在打开浏览器控制台查看 GeoJSON 加载错误。3. 端口被占用EADDRINUSE: 3001结束占用进程后重启后端或修改server/index.js中的PORT并同步改client/vite.config.js代理目标。4. better-sqlite3 安装失败需本机具备 Node 原生模块编译环境Windows 可安装 windows-build-tools / VS Build Tools。5. 方向键无法平移三维地图先用鼠标点击一次三维画布获得焦点再按方向键。6. 点击区县没反应 / 拖动误触发左键拖动用于平移需短按单击移动距离很小才会打开区县景点展厅。旋转请用右键。许可证本项目用于学习与演示。旅游统计数据为示例/模拟数据不作为官方统计依据。更新摘要相对初版三维大屏真实区县 GeoJSON、景点展厅、轻量标记与性能优化取消场景主题切换取消独立「景点模型」导航页客流预测支持地区/景点输入、地图定位与多维 ECharts交互左键平移、右键旋转、方向键移动、点击选区与景点GitHub - zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite10: 基于Vue 3 ECharts Three.js Express SQLite的全栈旅游数据可视化大屏面向重庆全市 38 个行政区与著名景点提供三维地图交互、二维区划地图、图表分析、客流智能预测以及后台数据/用户管理能力。 · GitHub基于Vue 3 ECharts Three.js Express SQLite的全栈旅游数据可视化大屏面向重庆全市 38 个行政区与著名景点提供三维地图交互、二维区划地图、图表分析、客流智能预测以及后台数据/用户管理能力。 - zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite10https://github.com/zhangsansh/Vue-3-ECharts-Three.js-Express-SQLite10.git
)
