r111/about.html · 约 7893 字符
1<!DOCTYPE html>2<html lang="zh-CN">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">6<meta name="theme-color" content="#4263eb">7<title>使用文档 · 图表工具大全</title>8<link rel="stylesheet" href="style.css">9</head>10<body data-page="about">11<div class="navbar"><div class="tt" style="padding-left:2px">使用文档</div></div>12<div class="wrap">13 <div class="card" style="background:linear-gradient(135deg,#4263eb,#7048e8);color:#fff;border:0">14 <div class="row" style="align-items:center;gap:10px">15 <div class="ic" style="background:rgba(255,255,255,.18);color:#fff;font-size:22px">📊</div>16 <div>17 <div style="font-size:17px;font-weight:800">图表工具大全</div>18 <div style="font-size:12px;opacity:.9;margin-top:2px">移动端数据可视化组件库 · v1.0</div>19 </div>20 </div>21 <div style="font-size:12.5px;line-height:1.85;margin-top:12px;opacity:.95">22 纯原生 JavaScript 手写 SVG 图表引擎，不依赖 ECharts / Chart.js / jQuery 等任何第三方库，23 压缩后核心引擎仅十余 KB。所有业务数据统一从 <code style="background:rgba(255,255,255,.2);color:#fff">data/*.json</code>24 读取，替换 JSON 即可复用到你自己的项目。25 </div>26 </div>2728 <div class="card">29 <div class="ch"><b>📦 目录结构</b></div>30 <pre class="code">r111/31├── index.html 数据看板首页32├── gallery.html 图表库总览33├── line.html 折线 / 曲线 / 阶梯34├── area.html 面积 / 堆叠 / 百分比35├── bar.html 柱状 / 条形 / 堆叠36├── pie.html 饼图 / 环形 / 玫瑰37├── scatter.html 散点 / 气泡38├── radar.html 雷达 / 仪表盘39├── funnel.html 漏斗 / 日历热力40├── data.html 数据源浏览41├── about.html 使用文档42├── chart.js SVG 图表引擎43├── app.js 公共运行时 / 数据加载44├── style.css 全站样式45└── data/46 ├── index.json 数据集索引47 ├── sales.json 月度销售额48 ├── visits.json 一周访问量49 ├── ... 共 10 份数据50 └── fallback.js 离线兜底副本</pre>51 </div>5253 <div class="card">54 <div class="ch"><b>🚀 三步接入</b></div>55 <div class="list">56 <div class="row"><i class="no">1</i><div><b>引入两个文件</b><p class="muted">在页面底部依次引入 <code>chart.js</code> 与 <code>app.js</code>，前者提供 <code>CH</code> 命名空间，后者提供 <code>DS</code> 数据加载器。</p></div></div>57 <div class="row"><i class="no">2</i><div><b>准备数据 JSON</b><p class="muted">按 <a href="data.html">数据源页</a> 中的 5 种结构任选其一，放到 <code>data/</code> 目录并在 <code>index.json</code> 登记。</p></div></div>58 <div class="row"><i class="no">3</i><div><b>一行代码出图</b><p class="muted">拿到数据后调用对应绘制函数，容器宽度自适应，无需指定尺寸。</p></div></div>59 </div>60 <pre class="code">DS.get('sales').then(function (d) {61 CH.line(document.getElementById('box'), {62 cats: d.cats,63 series: d.series,64 mode: 'smooth', // line | smooth | step65 area: true,66 unit: d.unit,67 h: 24068 });69});</pre>70 </div>7172 <div class="card">73 <div class="ch"><b>🧩 API 速查</b><span>CH.*</span></div>74 <div class="tblwrap"><table class="tbl">75 <tr><th>方法</th><th>关键参数</th><th>用途</th></tr>76 <tr><td><code>CH.line</code></td><td>cats / series / mode / area / stack / percent</td><td>折线 曲线 阶梯 面积</td></tr>77 <tr><td><code>CH.bar</code></td><td>cats / series / stack / horizontal</td><td>柱状 条形 堆叠</td></tr>78 <tr><td><code>CH.pie</code></td><td>items / inner / rose</td><td>饼图 环形 玫瑰</td></tr>79 <tr><td><code>CH.scatter</code></td><td>series / bubble / xName / yName</td><td>散点 气泡</td></tr>80 <tr><td><code>CH.radar</code></td><td>indicators / series</td><td>多维能力对比</td></tr>81 <tr><td><code>CH.gauge</code></td><td>value / max / color</td><td>单指标达成率</td></tr>82 <tr><td><code>CH.funnel</code></td><td>items</td><td>转化漏斗</td></tr>83 <tr><td><code>CH.heat</code></td><td>values / weeks / days / start</td><td>日历热力</td></tr>84 <tr><td><code>CH.mini</code></td><td>kind / color</td><td>卡片缩略图</td></tr>85 <tr><td><code>CH.legend</code></td><td>series / onToggle</td><td>可点击图例</td></tr>86 </table></div>87 </div>8889 <div class="card">90 <div class="ch"><b>✨ 特性一览</b></div>91 <div class="tags" style="padding:0">92 <span class="tag">17 种图表类型</span><span class="tag">纯 SVG 手绘</span>93 <span class="tag">零第三方依赖</span><span class="tag">JSON 数据驱动</span>94 <span class="tag">图例点击切换系列</span><span class="tag">触摸 Tooltip</span>95 <span class="tag">入场动画</span><span class="tag">自适应宽度</span>96 <span class="tag">离线可运行</span><span class="tag">深色文本无障碍对比</span>97 </div>98 </div>99100 <div class="card">101 <div class="ch"><b>❓ 常见问题</b></div>102 <div class="list">103 <div class="row"><i class="no">Q</i><div><b>双击打开页面图表空白？</b><p class="muted"><code>file://</code> 协议下浏览器会拦截 fetch，本项目已自动回落 <code>data/fallback.js</code>。若仍空白，请用任意静态服务器打开，例如 <code>python -m http.server</code>。</p></div></div>104 <div class="row"><i class="no">Q</i><div><b>如何换成自己的数据？</b><p class="muted">保持 JSON 字段结构不变，替换 <code>data/</code> 下同名文件即可，页面无需改动一行代码。</p></div></div>105 <div class="row"><i class="no">Q</i><div><b>能接入后端接口吗？</b><p class="muted">可以。修改 <code>app.js</code> 中 <code>DS.get</code> 的 url 拼接规则，指向你的 API 即可，返回体保持同样结构。</p></div></div>106 <div class="row"><i class="no">Q</i><div><b>支持哪些浏览器？</b><p class="muted">iOS Safari 11+ / Android Chrome 60+ / 微信内置浏览器，均已实测通过。</p></div></div>107 </div>108 </div>109110 <div class="card">111 <div class="ch"><b>📄 版权说明</b></div>112 <p class="muted" style="font-size:12px;line-height:1.85">本源码由驰旭教育整理发布，仅供学习交流与二次开发参考使用。可自由用于个人项目与商业项目，但请勿直接转售源码本身。</p>113 <div class="kv"><span>项目编号</span><b>r111</b></div>114 <div class="kv"><span>技术栈</span><b>原生 HTML + CSS + JavaScript</b></div>115 <div class="kv"><span>页面数量</span><b>11 个独立页面</b></div>116 <div class="kv"><span>发布站点</span><b>chixujiaoyu.com</b></div>117 </div>118 <div style="height:12px"></div>119</div>120121<nav class="tabbar">122<a href="index.html" class=""><span class="ti">🏠</span>看板</a>123<a href="gallery.html" class=""><span class="ti">📊</span>图表库</a>124<a href="data.html" class=""><span class="ti">🗂</span>数据源</a>125<a href="about.html" class="on"><span class="ti">📘</span>文档</a>126</nav>127<div class="mask" id="mask"></div>128<div class="toast" id="toast"></div>129<script src="data/fallback.js"></script>130<script src="chart.js"></script>131<script src="app.js"></script>132<script>133134$$('.card .code').forEach(function(p){135 p.addEventListener('click', function(){136 if(navigator.clipboard && navigator.clipboard.writeText){137 navigator.clipboard.writeText(p.textContent).then(function(){ toast('代码已复制'); }, function(){});138 }139 });140});141142</script>143</body>144</html>145