r111/gallery.html · 约 6241 字符
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="gallery">11<div class="navbar"><div class="tt" style="padding-left:2px">图表库</div><div class="rt"><span id="cnt"></span></div></div>12<div class="wrap" style="padding-bottom:2px">13 <div style="position:relative">14 <input id="q" placeholder="搜索图表名称，如 折线 / 饼 / 雷达"15 style="width:100%;padding:10px 12px 10px 34px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px">16 <span style="position:absolute;left:11px;top:9px;color:#98a2b3">🔍</span>17 </div>18</div>19<div class="chips" id="cats" style="padding-top:10px;padding-bottom:10px">20 <button class="on" data-v="all">全部</button>21 <button data-v="trend">趋势</button>22 <button data-v="compare">对比</button>23 <button data-v="ratio">占比</button>24 <button data-v="relation">关系</button>25 <button data-v="dist">分布</button>26</div>27<div class="grid2" id="grid"></div>28<div class="card mt12" style="background:linear-gradient(135deg,#edf2ff,#f3f0ff)">29 <div class="ch"><b>关于图表选型</b></div>30 <div class="muted" style="line-height:1.85">31 看<b>趋势</b>用折线 / 面积；比<b>大小</b>用柱状 / 条形；看<b>占比</b>用饼 / 环形；<br>32 查<b>相关性</b>用散点 / 气泡；做<b>多维画像</b>用雷达；看<b>流程流失</b>用漏斗；看<b>时间密度</b>用热力图。33 </div>34</div>35<div style="height:10px"></div>3637<nav class="tabbar">38<a href="index.html" class=""><span class="ti">🏠</span>看板</a>39<a href="gallery.html" class="on"><span class="ti">📊</span>图表库</a>40<a href="data.html" class=""><span class="ti">🗂</span>数据源</a>41<a href="about.html" class=""><span class="ti">📘</span>文档</a>42</nav>43<div class="mask" id="mask"></div>44<div class="toast" id="toast"></div>45<script src="data/fallback.js"></script>46<script src="chart.js"></script>47<script src="app.js"></script>48<script>4950var 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"}];51var CAT = {52 line:'trend', curve:'trend', step:'trend', area:'trend', stackarea:'trend',53 bar:'compare', hbar:'compare', stackbar:'compare',54 pie:'ratio', donut:'ratio', rose:'ratio',55 scatter:'relation', bubble:'relation',56 radar:'dist', gauge:'dist', funnel:'dist', heat:'dist'57};58var cat='all', kw='';5960function render(){61 var box=$('#grid');62 box.innerHTML='';63 var list = KINDS.filter(function(k){64 var okc = cat==='all' || CAT[k.key]===cat;65 var okk = !kw || (k.name+k.desc).toLowerCase().indexOf(kw)>=0;66 return okc && okk;67 });68 $('#cnt').textContent = list.length + ' / ' + KINDS.length + ' 种';69 if(!list.length){ box.innerHTML='<div class="loading" style="grid-column:1/3">没有匹配的图表类型</div>'; return; }70 list.forEach(function(k,i){71 var a=document.createElement('a');72 a.className='gcard fadein'; a.href=k.href;73 a.style.animationDelay=(i*28)+'ms';74 a.innerHTML='<div class="gt"><i>'+k.icon+'</i>'+k.name+'</div><div class="gd">'+k.desc+'</div><div class="mini"></div>';75 box.appendChild(a);76 CH.mini(a.querySelector('.mini'), k.mini, k.color);77 });78}79segGroup('#cats', function(v){ cat=v; render(); });80$('#q').addEventListener('input', function(e){ kw=e.target.value.trim().toLowerCase(); render(); });81render();8283</script>84</body>85</html>86