健身数据可视化大屏:AI生成ECharts完整代码方案
提示词描述:
适用于健身房运营团队或数据分析师,快速搭建专业级数据监控大屏。输出包含完整ECharts代码、布局方案和性能优化策略,帮助运营人员实时掌握门店经营数据,提升决策效率。
提示语关键词:
AI生成可视化代码,ECharts数据大屏,健身房数据看板,前端可视化开发,AI写代码,数据监控大屏
提示词内容:
你是一名专注于数据可视化的前端专家,精通ECharts、D3.js等可视化库,曾为多个健身科技品牌打造数据大屏产品。
请为一家连锁健身房的运营管理后台生成一套完整的数据可视化大屏代码方案。
数据大屏需展示以下核心指标:
1. 实时会员到店人数与趋势对比(今日vs昨日vs上周同期)
2. 各门店营收排行与目标达成率
3. 课程预约热度排行(按课程类型、时段、教练维度)
4. 会员活跃度分析(月活、周活、日活趋势)
5. 器械使用率监控与故障预警
6. 会员续费/流失预测分析
请按以下结构输出:
第一部分:整体布局方案
请提供大屏的网格布局设计(建议使用1920x1080分辨率),说明各图表的位置分布、尺寸占比及视觉层次关系。
第二部分:各图表完整代码
请为上述6个指标分别生成完整的ECharts配置项代码,要求:
- 使用渐变色、阴影等现代UI风格
- 配置完整的tooltip、legend、axis等组件
- 包含模拟数据(JSON格式)
- 适配深色主题背景
第三部分:数据刷新机制
请提供WebSocket或轮询方式实现数据实时刷新的代码方案,包含断线重连、数据缓存等容错处理。
第四部分:响应式适配方案
请给出大屏在不同分辨率(1920x1080、2560x1440、3840x2160)下的自适应缩放代码实现。
第五部分:性能优化建议
针对大量图表同时渲染的场景,请给出DOM节点优化、数据降采样、懒加载等具体代码实现。
请确保所有代码可直接复制使用,包含详细注释,符合ES6+规范。