r111/area.html · 约 3938 字符
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="area" 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="visits">近七日访问量</button>14 <button data-v="sales">年度销售趋势</button>15</div>16<div class="card mt12">17 <div class="ch"><b id="tt">--</b><span id="src"></span></div>18 <div class="seg" id="mode" style="margin-bottom:10px">19 <button class="on" data-v="basic">基础面积</button>20 <button data-v="stack">堆叠面积</button>21 <button data-v="percent">百分比堆叠</button>22 </div>23 <div class="chart" id="c1"></div>24 <div class="legend" id="lg"></div>25</div>2627<div class="card">28 <div class="ch"><b>各系列占比</b><span id="totalv"></span></div>29 <div id="share"></div>30</div>3132<div class="card">33 <div class="ch"><b>逐期构成表</b><span>百分比</span></div>34 <div class="tblwrap"><table class="tbl" id="tbl"></table></div>35</div>36<div style="height:18px"></div>3738<div class="sheet" id="sjson">39 <div class="sh"><b>数据源 JSON</b><span class="x">×</span></div>40 <div class="sb"><pre class="code" id="jsonbox"></pre></div>41</div>424344<div class="mask" id="mask"></div>45<div class="toast" id="toast"></div>46<script src="data/fallback.js"></script>47<script src="chart.js"></script>48<script src="app.js"></script>49<script>5051var mode='basic', DATA=null;5253function draw(){54 if(!DATA) return;55 CH.line($('#c1'), {56 cats:DATA.cats, series:DATA.series, mode:'smooth',57 area:true, stack: mode!=='basic', percent: mode==='percent',58 dots: mode==='basic', h:240, unit:DATA.unit59 });60}61function share(){62 var sums = DATA.series.map(function(s){ return s.data.reduce(function(a,b){return a+b;},0); });63 var tot = sums.reduce(function(a,b){return a+b;},0) || 1;64 $('#totalv').textContent = '合计 ' + CH.thousand(tot) + (DATA.unit||'');65 $('#share').innerHTML = DATA.series.map(function(s,i){66 return '<div class="rank"><div class="rt"><span>'+s.name+'</span>'+67 '<b>'+CH.thousand(sums[i])+' · '+(sums[i]/tot*100).toFixed(1)+'%</b></div>'+68 '<div class="bar"><i style="width:'+(sums[i]/tot*100).toFixed(1)+'%;background:'+s.color+'"></i></div></div>';69 }).join('');70}71function table(){72 var h='<thead><tr><th>期间</th>'+DATA.series.map(function(s){return '<th>'+s.name+'</th>';}).join('')+'<th>合计</th></tr></thead><tbody>';73 DATA.cats.forEach(function(c,i){74 var t=0; DATA.series.forEach(function(s){ t+=s.data[i]; });75 h+='<tr><td>'+c+'</td>'+DATA.series.map(function(s){76 return '<td>'+(s.data[i]/t*100).toFixed(1)+'%</td>';77 }).join('')+'<td>'+CH.num(t)+'</td></tr>';78 });79 $('#tbl').innerHTML=h+'</tbody>';80}81function load(name){82 loading($('#c1'));83 DS.get(name).then(function(j){84 DATA = JSON.parse(JSON.stringify(j));85 DATA.__from = j.__from;86 $('#tt').textContent = DATA.name;87 $('#src').innerHTML = srcBadge(DATA);88 draw(); share(); table();89 CH.legend($('#lg'), DATA.series, draw);90 $('#jsonbox').innerHTML = hlJSON(j);91 })['catch'](function(e){ failBox($('#c1'), e); });92}93segGroup('#dsw', function(v){ load(v); });94segGroup('#mode', function(v){ mode=v; draw(); });95$('#viewjson').addEventListener('click', function(e){ e.preventDefault(); openSheet('#sjson'); });9697var qm=(location.search.match(/mode=(\w+)/)||[])[1];98if(qm==='stack'){ mode='stack'; $$('#mode button').forEach(function(b){ b.classList.toggle('on', b.dataset.v==='stack'); }); }99load('visits');100101</script>102</body>103</html>104