r111/README.txt · 约 3322 字符
1图表工具大全 · 移动端数据可视化图表库 (r111)2================================================34【项目简介】5纯原生 JavaScript 手写 SVG 图表引擎，不依赖 ECharts / Chart.js / D3 / jQuery6等任何第三方库。覆盖折线、曲线、阶梯、面积、堆叠面积、百分比堆叠、柱状、条形、7堆叠柱、饼图、环形、玫瑰、散点、气泡、雷达、仪表盘、漏斗、日历热力共 17 种图表。89【核心特性】101. 全部业务数据从 data/*.json 读取，页面与数据彻底解耦，换数据不改代码。112. 纯 SVG 手绘，无 canvas、无外部依赖，核心引擎 chart.js 单文件。123. 图例可点击切换系列、触摸 tooltip、入场动画、宽度自适应。134. file:// 直接双击打开也能运行（自动回落 data/fallback.js 离线副本）。1415【页面清单】共 11 个独立页面16 index.html 数据看板首页（KPI + 4 类图表概览 + 常用图表入口）17 gallery.html 图表库总览（17 种图表 + 分类筛选 + 关键词搜索）18 line.html 折线图 / 平滑曲线 / 阶梯图（?mode=smooth|step）19 area.html 面积图 / 堆叠面积 / 百分比堆叠（?mode=stack|percent）20 bar.html 柱状图 / 分组 / 堆叠 / 条形图（?mode=stack|horizontal）21 pie.html 饼图 / 环形图 / 玫瑰图（?mode=donut|rose）22 scatter.html 散点图 / 气泡图（?mode=bubble，含相关系数计算）23 radar.html 雷达图 / 仪表盘（?tab=gauge）24 funnel.html 漏斗图 / 日历热力图（?tab=heat）25 data.html 数据源浏览（10 份 JSON 在线预览与跳转）26 about.html 使用文档（目录结构 / 接入步骤 / API 速查 / FAQ）2728【数据源】data/ 目录，共 10 份业务 JSON + 1 份索引 + 1 份离线副本29 index.json 数据集索引30 sales.json 月度销售额（12 月 x 3 渠道）31 visits.json 一周访问量（7 日 x 3 终端）32 region.json 区域销售对比（8 区 x 2 年）33 traffic.json 流量来源构成（6 项占比）34 device.json 访问终端分布（4 项占比）35 ad.json 广告投放效果（散点/气泡，3 系列）36 ability.json 门店能力画像（雷达，6 维）37 funnel.json 电商转化漏斗（5 级）38 kpi.json 核心指标达成（仪表盘，4 项）39 heat.json 近十二周活跃热力（12 周 x 7 天）40 fallback.js 离线兜底副本4142【运行方式】43 方式一：直接双击 index.html（自动使用离线副本）44 方式二（推荐，走真实 JSON 请求）：45 在 r111 目录执行 python -m http.server 800046 浏览器访问 http://127.0.0.1:8000/index.html47 建议使用 Chrome / Edge 开发者工具的手机模拟视图（375~430px 宽）浏览。4849【二次开发】50 换数据：保持 JSON 字段结构不变，替换 data/ 下同名文件即可。51 接后端：修改 app.js 中 DS.get 的 url 拼接规则指向你的 API，返回体结构不变。52 改配色：修改 style.css 顶部 :root 中的 CSS 变量。5354【技术栈】HTML5 + CSS3 + 原生 JavaScript（ES5 语法，兼容性优先）+ SVG55【兼容性】iOS Safari 11+ / Android Chrome 60+ / 微信内置浏览器56【版权说明】由驰旭教育整理发布，仅供学习交流与二次开发参考，请勿直接转售源码。57