2 lines
1.8 KiB
JavaScript
2 lines
1.8 KiB
JavaScript
(()=>{function h(v){return String(v??"").replace(/[&<>"']/g,c=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[c]))}function m(arr){return arr.reduce((x,y)=>Math.max(x,Number(y)||0),0)||1}function line(el,o){const cats=o?.xAxis?.data||[];const a=o?.series?.[0]?.data||[];const b=o?.series?.[1]?.data||[];const max=m(a.concat(b));const pts=(vals)=>vals.map((v,i)=>{const x=cats.length>1?(i*100)/(cats.length-1):0;const y=90-((Number(v)||0)/max)*80;return `${x},${y}`}).join(" ");el.innerHTML=`<div style="font:12px sans-serif;color:#0f172a"><svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width:100%;height:260px;background:#fff"><polyline fill="none" stroke="#2563eb" stroke-width="2" points="${pts(a)}"></polyline><polyline fill="none" stroke="#059669" stroke-width="2" points="${pts(b)}"></polyline></svg><div style="display:grid;grid-template-columns:repeat(${Math.max(cats.length,1)},minmax(0,1fr));gap:4px;color:#64748b">${cats.map(x=>`<span>${h(x)}</span>`).join("")}</div></div>`}function bar(el,o){const cats=o?.xAxis?.data||[];const vals=o?.series?.[0]?.data||[];const color=o?.series?.[0]?.itemStyle?.color||"#2563eb";const max=m(vals);el.innerHTML=`<div style="padding:8px 4px">${cats.map((cat,i)=>{const value=Number(vals[i]||0);const width=Math.max(6,Math.round((value/max)*100));return `<div style="margin:10px 0"><div style="display:flex;justify-content:space-between;font:12px sans-serif;color:#475569"><span>${h(cat)}</span><span>${value}</span></div><div style="height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden"><div style="width:${width}%;height:100%;background:${h(color)}"></div></div></div>`}).join("")}</div>`}window.echarts={init(el){return{setOption(o){if((o?.series||[])[0]?.type==="bar"){bar(el,o);return}line(el,o)},resize(){}}}}})();
|