r111/radar.html · 约 5805 字符
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="radar" 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="wrap" style="padding-bottom:0">13 <div class="seg" id="tab">14 <button class="on" data-v="radar">雷达图</button>15 <button data-v="gauge">仪表盘</button>16 </div>17</div>1819<div id="pane-radar">20 <div class="card mt12">21 <div class="ch"><b id="tt">--</b><span id="src"></span></div>22 <div class="chart" id="c1"></div>23 <div class="legend" id="lg"></div>24 </div>25 <div class="card">26 <div class="ch"><b>维度得分对比</b><span>本店 vs 行业均值</span></div>27 <div id="cmp"></div>28 </div>29 <div class="card">30 <div class="ch"><b>能力短板诊断</b></div>31 <div id="diag"></div>32 </div>33</div>3435<div id="pane-gauge" style="display:none">36 <div class="card mt12">37 <div class="ch"><b>核心指标达成</b><span id="src2"></span></div>38 <div class="chips" id="kpisel" style="padding-left:0;padding-right:0"></div>39 <div class="chart" id="g1"></div>40 </div>41 <div class="card">42 <div class="ch"><b>全部指标</b><span>进度环</span></div>43 <div class="kpis4" style="padding:0" id="ring"></div>44 </div>45</div>46<div style="height:18px"></div>4748<div class="sheet" id="sjson">49 <div class="sh"><b>数据源 JSON</b><span class="x">×</span></div>50 <div class="sb"><pre class="code" id="jsonbox"></pre></div>51</div>525354<div class="mask" id="mask"></div>55<div class="toast" id="toast"></div>56<script src="data/fallback.js"></script>57<script src="chart.js"></script>58<script src="app.js"></script>59<script>6061var RD=null, KPI=null, gi=0;6263function drawRadar(){64 if(!RD) return;65 CH.radar($('#c1'), {indicators:RD.indicators, series:RD.series, h:290});66}67function cmp(){68 var a=RD.series[0], b=RD.series[1];69 $('#cmp').innerHTML = RD.indicators.map(function(ind,i){70 var d = a.data[i] - (b ? b.data[i] : 0);71 return '<div class="rank"><div class="rt"><span>'+ind.name+'</span>'+72 '<b>'+a.data[i]+' 分 <span style="color:'+(d>=0?'#12b886':'#fa5252')+';font-size:11px">('+(d>=0?'+':'')+d+')</span></b></div>'+73 '<div class="bar"><i style="width:'+(a.data[i]/ind.max*100)+'%;background:#4263eb"></i></div>'+74 (b ? '<div class="bar" style="margin-top:3px"><i style="width:'+(b.data[i]/ind.max*100)+'%;background:#f59f00"></i></div>' : '')+75 '</div>';76 }).join('');77}78function diag(){79 var a=RD.series[0];80 var arr = RD.indicators.map(function(ind,i){ return {name:ind.name, v:a.data[i], max:ind.max}; })81 .sort(function(x,y){ return x.v/x.max - y.v/y.max; });82 $('#diag').innerHTML = arr.slice(0,3).map(function(x,i){83 var lv = x.v/x.max;84 var tag = lv<0.7 ? '<span class="tag" style="background:var(--danger-l);color:#c92a2a">待提升</span>'85 : lv<0.85 ? '<span class="tag o">可优化</span>' : '<span class="tag g">表现良好</span>';86 return '<div class="row" style="padding:10px 0"><div class="ic">'+['🔧','⚙️','🛠'][i]+'</div>'+87 '<div class="mn"><b>'+x.name+'</b><span>得分 '+x.v+' / '+x.max+'，处于第 '+(i+1)+' 短板</span></div>'+tag+'</div>';88 }).join('');89}90function drawGauge(){91 if(!KPI) return;92 var it = KPI.items[gi];93 CH.gauge($('#g1'), {value:it.value, max:100, name:it.name, unit:'%', color:it.color, h:200});94}95function rings(){96 $('#ring').innerHTML = KPI.items.map(function(it){97 var r=26, c=2*Math.PI*r, off=c*(1-it.value/100);98 return '<div class="kpi" style="text-align:center">'+99 '<svg viewBox="0 0 70 70" style="width:70px;height:70px;display:block;margin:0 auto">'+100 '<circle cx="35" cy="35" r="'+r+'" fill="none" stroke="#eef1f7" stroke-width="7"/>'+101 '<circle cx="35" cy="35" r="'+r+'" fill="none" stroke="'+it.color+'" stroke-width="7" stroke-linecap="round"'+102 ' stroke-dasharray="'+c.toFixed(1)+'" stroke-dashoffset="'+off.toFixed(1)+'" transform="rotate(-90 35 35)"/>'+103 '<text x="35" y="39" text-anchor="middle" font-size="14" font-weight="800" fill="#1f2430">'+it.value+'</text>'+104 '</svg><div class="kn mt8">'+it.name+'</div></div>';105 }).join('');106}107108loading($('#c1'));109DS.all(['ability','kpi']).then(function(r){110 RD = JSON.parse(JSON.stringify(r[0])); RD.__from = r[0].__from;111 KPI = JSON.parse(JSON.stringify(r[1])); KPI.__from = r[1].__from;112 $('#tt').textContent = RD.name;113 $('#src').innerHTML = srcBadge(RD);114 $('#src2').innerHTML = srcBadge(KPI);115 drawRadar(); cmp(); diag();116 CH.legend($('#lg'), RD.series, drawRadar);117 $('#kpisel').innerHTML = KPI.items.map(function(it,i){118 return '<button class="'+(i===0?'on':'')+'" data-v="'+i+'">'+it.name+'</button>';119 }).join('');120 segGroup('#kpisel', function(v){ gi=+v; drawGauge(); });121 rings();122 $('#jsonbox').innerHTML = hlJSON(r[0]);123})['catch'](function(e){ failBox($('#c1'), e); });124125segGroup('#tab', function(v){126 $('#pane-radar').style.display = v==='radar' ? '' : 'none';127 $('#pane-gauge').style.display = v==='gauge' ? '' : 'none';128 if(v==='gauge') drawGauge(); else drawRadar();129});130$('#viewjson').addEventListener('click', function(e){ e.preventDefault(); openSheet('#sjson'); });131132if(/tab=gauge/.test(location.search)){133 $$('#tab button').forEach(function(b){ b.classList.toggle('on', b.dataset.v==='gauge'); });134 $('#pane-radar').style.display='none';135 $('#pane-gauge').style.display='';136 setTimeout(drawGauge, 300);137}138139</script>140</body>141</html>142