r111/bar.html · 约 4324 字符
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="bar" class="nopad">11<div class="navbar"><a class="bk" href="gallery.html">‹</a><div class="tt">柱状与条形图</div><div class="rt"><a href="#" id="viewjson">JSON</a></div></div>12<div class="chips" id="dsw" style="padding-top:12px">13 <button class="on" data-v="region">区域销售对比</button>14 <button data-v="visits">近七日访问量</button>15 <button data-v="sales">年度销售趋势</button>16</div>17<div class="card mt12">18 <div class="ch"><b id="tt">--</b><span id="src"></span></div>19 <div class="seg" id="mode" style="margin-bottom:10px">20 <button class="on" data-v="group">分组柱状</button>21 <button data-v="stack">堆叠柱状</button>22 <button data-v="horizontal">横向条形</button>23 </div>24 <div class="chart" id="c1"></div>25 <div class="legend" id="lg"></div>26</div>2728<div class="card">29 <div class="ch"><b>分类排行</b><span id="rkname"></span></div>30 <div id="rank"></div>31</div>3233<div class="card">34 <div class="ch"><b>同比 / 环比分析</b><span>自动计算</span></div>35 <div class="tblwrap"><table class="tbl" id="tbl"></table></div>36</div>37<div style="height:18px"></div>3839<div class="sheet" id="sjson">40 <div class="sh"><b>数据源 JSON</b><span class="x">×</span></div>41 <div class="sb"><pre class="code" id="jsonbox"></pre></div>42</div>434445<div class="mask" id="mask"></div>46<div class="toast" id="toast"></div>47<script src="data/fallback.js"></script>48<script src="chart.js"></script>49<script src="app.js"></script>50<script>5152var mode='group', DATA=null;5354function draw(){55 if(!DATA) return;56 CH.bar($('#c1'), {57 cats:DATA.cats, series:DATA.series,58 stack: mode==='stack', horizontal: mode==='horizontal',59 label: DATA.series.filter(function(s){return !s.off;}).length===1,60 h: mode==='horizontal' ? Math.max(220, DATA.cats.length*30+50) : 240,61 unit:DATA.unit62 });63}64function rank(){65 var last = DATA.series[DATA.series.length-1];66 $('#rkname').textContent = last.name;67 var arr = DATA.cats.map(function(c,i){ return {name:c, v:last.data[i]}; })68 .sort(function(a,b){ return b.v-a.v; });69 var mx = arr[0] ? arr[0].v : 1;70 $('#rank').innerHTML = arr.map(function(x,i){71 return '<div class="rank"><div class="rt"><span class="no'+(i<3?' t'+(i+1):'')+'">'+(i+1)+'</span>'+72 '<span>'+x.name+'</span><b>'+CH.thousand(x.v)+(DATA.unit||'')+'</b></div>'+73 '<div class="bar"><i style="width:'+(x.v/mx*100).toFixed(1)+'%;background:'+(last.color||'#4263eb')+'"></i></div></div>';74 }).join('');75}76function table(){77 var s = DATA.series;78 var h='<thead><tr><th>分类</th>'+s.map(function(x){return '<th>'+x.name+'</th>';}).join('')+79 (s.length>1?'<th>增幅</th>':'')+'</tr></thead><tbody>';80 DATA.cats.forEach(function(c,i){81 h+='<tr><td>'+c+'</td>'+s.map(function(x){return '<td>'+CH.thousand(x.data[i])+'</td>';}).join('');82 if(s.length>1){83 var a=s[0].data[i]||1, b=s[s.length-1].data[i];84 var g=(b-a)/Math.abs(a)*100;85 h+='<td style="color:'+(g>=0?'#fa5252':'#12b886')+';font-weight:700">'+(g>=0?'+':'')+g.toFixed(1)+'%</td>';86 }87 h+='</tr>';88 });89 $('#tbl').innerHTML=h+'</tbody>';90}91function load(name){92 loading($('#c1'));93 DS.get(name).then(function(j){94 DATA = JSON.parse(JSON.stringify(j));95 DATA.__from = j.__from;96 $('#tt').textContent = DATA.name;97 $('#src').innerHTML = srcBadge(DATA);98 draw(); rank(); table();99 CH.legend($('#lg'), DATA.series, function(){ draw(); });100 $('#jsonbox').innerHTML = hlJSON(j);101 })['catch'](function(e){ failBox($('#c1'), e); });102}103segGroup('#dsw', function(v){ load(v); });104segGroup('#mode', function(v){ mode=v; draw(); });105$('#viewjson').addEventListener('click', function(e){ e.preventDefault(); openSheet('#sjson'); });106107var qm=(location.search.match(/mode=(\w+)/)||[])[1];108if(qm==='horizontal'||qm==='stack'){109 mode=qm;110 $$('#mode button').forEach(function(b){ b.classList.toggle('on', b.dataset.v===qm); });111}112load('region');113114</script>115</body>116</html>117