r111/pie.html · 约 4229 字符
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="pie" 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="traffic">流量来源构成</button>14 <button data-v="device">终端设备分布</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:6px">19 <button class="on" data-v="pie">饼图</button>20 <button data-v="donut">环形图</button>21 <button data-v="rose">玫瑰图</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>点击扇区查看数值</span></div>29 <div id="detail"></div>30</div>3132<div class="card">33 <div class="ch"><b>两份数据源对照</b><span>环形图</span></div>34 <div style="display:flex;gap:6px">35 <div style="flex:1">36 <div class="muted" style="text-align:center;margin-bottom:2px">流量来源</div>37 <div class="chart" id="c2"></div>38 </div>39 <div style="flex:1">40 <div class="muted" style="text-align:center;margin-bottom:2px">终端设备</div>41 <div class="chart" id="c3"></div>42 </div>43 </div>44</div>45<div style="height:18px"></div>4647<div class="sheet" id="sjson">48 <div class="sh"><b>数据源 JSON</b><span class="x">×</span></div>49 <div class="sb"><pre class="code" id="jsonbox"></pre></div>50</div>515253<div class="mask" id="mask"></div>54<div class="toast" id="toast"></div>55<script src="data/fallback.js"></script>56<script src="chart.js"></script>57<script src="app.js"></script>58<script>5960var mode='pie', DATA=null;6162function draw(){63 if(!DATA) return;64 var live = DATA.items.filter(function(x){return !x.off;});65 var tot=0; live.forEach(function(x){ tot+=x.value; });66 CH.pie($('#c1'), {67 items: DATA.items, inner: mode==='donut' ? .6 : 0, rose: mode==='rose',68 h: 262, unit: DATA.unit, title: DATA.name,69 centerLabel: '合计', centerValue: tot.toFixed(1) + (DATA.unit||'')70 });71}72function detail(){73 var tot=0; DATA.items.forEach(function(x){ tot+=x.value; });74 var mx = Math.max.apply(null, DATA.items.map(function(x){return x.value;}));75 $('#detail').innerHTML = DATA.items.map(function(it,i){76 return '<div class="rank"><div class="rt"><span class="no'+(i<3?' t'+(i+1):'')+'">'+(i+1)+'</span>'+77 '<span>'+it.name+'</span><b>'+it.value+(DATA.unit||'')+' · '+(it.value/tot*100).toFixed(1)+'%</b></div>'+78 '<div class="bar"><i style="width:'+(it.value/mx*100).toFixed(1)+'%;background:'+it.color+'"></i></div></div>';79 }).join('');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(); detail();89 CH.legend($('#lg'), DATA.items, 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'); });9697DS.all(['traffic','device']).then(function(r){98 CH.pie($('#c2'), {items:r[0].items, inner:.58, h:170, unit:'%', showLabel:false,99 centerLabel:'渠道', centerValue:r[0].items.length+''});100 CH.pie($('#c3'), {items:r[1].items, inner:.58, h:170, unit:'%', showLabel:false,101 centerLabel:'终端', centerValue:r[1].items.length+''});102});103104var qm=(location.search.match(/mode=(\w+)/)||[])[1];105if(qm==='donut'||qm==='rose'){106 mode=qm;107 $$('#mode button').forEach(function(b){ b.classList.toggle('on', b.dataset.v===qm); });108}109load('traffic');110111</script>112</body>113</html>114