r111/index.html · 约 7501 字符
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="index">1112<div class="hero">13 <div class="hd">14 <div class="lg"><i>📊</i>图表工具大全</div>15 <a href="about.html" style="font-size:12px;opacity:.9">使用文档 ›</a>16 </div>17 <div class="sub">17 种图表类型 · 10 份 JSON 数据源 · 纯 SVG 手绘 · 零依赖</div>18 <div class="kpis">19 <div><b id="k1">--</b><span>年度销售(万元)</span></div>20 <div><b id="k2">--</b><span>周访问量</span></div>21 <div><b id="k3">--</b><span>支付转化率</span></div>22 </div>23</div>2425<div class="card pull">26 <div class="ch"><b>年度销售趋势</b><span id="src1"></span></div>27 <div class="chart" id="c1"></div>28 <div class="legend" id="l1"></div>29</div>3031<div class="sec"><h3><em></em>构成与排行</h3><a class="more" href="pie.html">更多 ›</a></div>32<div class="card">33 <div class="ch"><b>流量来源构成</b><span>环形图</span></div>34 <div class="chart" id="c2"></div>35 <div class="legend" id="l2"></div>36</div>37<div class="card">38 <div class="ch"><b>区域销售排行 2026</b><span>条形图</span></div>39 <div class="chart" id="c3"></div>40</div>4142<div class="sec"><h3><em></em>核心指标达成</h3><a class="more" href="radar.html?tab=gauge">仪表盘 ›</a></div>43<div class="card">44 <div class="chart" id="c4"></div>45 <div id="kpilist" class="mt8"></div>46</div>4748<div class="sec"><h3><em></em>常用图表</h3><a class="more" href="gallery.html">全部 17 种 ›</a></div>49<div class="grid2" id="quick"></div>50<div style="height:14px"></div>5152<nav class="tabbar">53<a href="index.html" class="on"><span class="ti">🏠</span>看板</a>54<a href="gallery.html" class=""><span class="ti">📊</span>图表库</a>55<a href="data.html" class=""><span class="ti">🗂</span>数据源</a>56<a href="about.html" class=""><span class="ti">📘</span>文档</a>57</nav>58<div class="mask" id="mask"></div>59<div class="toast" id="toast"></div>60<script src="data/fallback.js"></script>61<script src="chart.js"></script>62<script src="app.js"></script>63<script>6465var QUICK = ['line','area','bar','pie','scatter','radar'];66var KINDS = [{"key": "line", "href": "line.html", "icon": "📈", "name": "折线图", "desc": "趋势变化与多系列对比", "mini": "line", "color": "#4263eb"}, {"key": "curve", "href": "line.html?mode=smooth", "icon": "〰️", "name": "平滑曲线图", "desc": "弱化毛刺，突出走势", "mini": "curve", "color": "#5c7cfa"}, {"key": "step", "href": "line.html?mode=step", "icon": "🪜", "name": "阶梯图", "desc": "离散状态的跳变展示", "mini": "line", "color": "#1098ad"}, {"key": "area", "href": "area.html", "icon": "🌊", "name": "面积图", "desc": "填充面积强调体量", "mini": "area", "color": "#12b886"}, {"key": "stackarea", "href": "area.html?mode=stack", "icon": "🏞", "name": "堆叠面积图", "desc": "各部分累积构成", "mini": "area", "color": "#0ca678"}, {"key": "bar", "href": "bar.html", "icon": "📊", "name": "柱状图", "desc": "分类数值直观对比", "mini": "bar", "color": "#f59f00"}, {"key": "hbar", "href": "bar.html?mode=horizontal", "icon": "📶", "name": "条形图", "desc": "长名称分类排行", "mini": "bar", "color": "#e8590c"}, {"key": "stackbar", "href": "bar.html?mode=stack", "icon": "🧱", "name": "堆叠柱状图", "desc": "总量与构成同时呈现", "mini": "stack", "color": "#fab005"}, {"key": "pie", "href": "pie.html", "icon": "🥧", "name": "饼图", "desc": "占比构成一眼看清", "mini": "pie", "color": "#7048e8"}, {"key": "donut", "href": "pie.html?mode=donut", "icon": "🍩", "name": "环形图", "desc": "中心可放核心指标", "mini": "donut", "color": "#9775fa"}, {"key": "rose", "href": "pie.html?mode=rose", "icon": "🌹", "name": "玫瑰图", "desc": "半径编码数值大小", "mini": "rose", "color": "#e64980"}, {"key": "scatter", "href": "scatter.html", "icon": "✳️", "name": "散点图", "desc": "两变量相关性分析", "mini": "scatter", "color": "#1098ad"}, {"key": "bubble", "href": "scatter.html?mode=bubble", "icon": "🫧", "name": "气泡图", "desc": "第三维用面积编码", "mini": "scatter", "color": "#22b8cf"}, {"key": "radar", "href": "radar.html", "icon": "🕸️", "name": "雷达图", "desc": "多维能力画像对比", "mini": "radar", "color": "#4263eb"}, {"key": "gauge", "href": "radar.html?tab=gauge", "icon": "🎯", "name": "仪表盘", "desc": "单指标达成率", "mini": "gauge", "color": "#12b886"}, {"key": "funnel", "href": "funnel.html", "icon": "🔻", "name": "漏斗图", "desc": "转化流程逐级流失", "mini": "funnel", "color": "#e8590c"}, {"key": "heat", "href": "funnel.html?tab=heat", "icon": "🔥", "name": "日历热力图", "desc": "时间维度密度分布", "mini": "heat", "color": "#fa5252"}];6768function renderQuick(){69 var box = $('#quick');70 box.innerHTML = '';71 QUICK.forEach(function(key){72 var k = KINDS.filter(function(x){return x.key===key;})[0];73 if(!k) return;74 var a = document.createElement('a');75 a.className = 'gcard'; a.href = k.href;76 a.innerHTML = '<div class="gt"><i>'+k.icon+'</i>'+k.name+'</div><div class="gd">'+k.desc+'</div><div class="mini"></div>';77 box.appendChild(a);78 CH.mini(a.querySelector('.mini'), k.mini, k.color);79 });80}8182DS.all(['sales','traffic','region','kpi','funnel','visits']).then(function(r){83 var sales=r[0], traffic=r[1], region=r[2], kpi=r[3], funnel=r[4], visits=r[5];8485 var tot=0; sales.series.forEach(function(s){ s.data.forEach(function(v){ tot+=v; }); });86 $('#k1').textContent = CH.num(tot);87 var wk=0; visits.series.forEach(function(s){ s.data.forEach(function(v){ wk+=v; }); });88 $('#k2').textContent = CH.num(wk);89 $('#k3').textContent = (funnel.items[4].value / funnel.items[0].value * 100).toFixed(2) + '%';90 $('#src1').innerHTML = srcBadge(sales);9192 var host1=$('#c1');93 function draw1(){ CH.line(host1,{cats:sales.cats,series:sales.series,mode:'smooth',area:true,h:210,unit:sales.unit}); }94 draw1(); CH.legend($('#l1'), sales.series, draw1);9596 var host2=$('#c2');97 function draw2(){98 CH.pie(host2,{items:traffic.items,inner:.62,h:210,unit:'%',title:traffic.name,99 centerLabel:'来源渠道',centerValue:traffic.items.length+' 个'});100 }101 draw2(); CH.legend($('#l2'), traffic.items, draw2);102103 var top = region.cats.map(function(c,i){ return {name:c, v:region.series[1].data[i]}; })104 .sort(function(a,b){ return b.v-a.v; }).slice(0,6);105 CH.bar($('#c3'), {106 cats: top.map(function(x){return x.name;}),107 series:[{name:'2026 年',color:'#4263eb',data: top.map(function(x){return x.v;})}],108 horizontal:true, label:true, h:196, unit:region.unit109 });110111 CH.gauge($('#c4'), {value:kpi.items[0].value, max:100, name:kpi.items[0].name, unit:'%', color:kpi.items[0].color, h:180});112 $('#kpilist').innerHTML = kpi.items.slice(1).map(function(it){113 return '<div class="rank"><div class="rt"><span>'+it.name+'</span><b style="color:'+it.color+'">'+it.value+'%</b></div>'+114 '<div class="bar"><i style="width:'+it.value+'%;background:'+it.color+'"></i></div></div>';115 }).join('');116}).catch(function(e){ failBox($('#c1'), e); });117118renderQuick();119120</script>121</body>122</html>123