优化仪表界面
This commit is contained in:
parent
819ac1cdaa
commit
6c6fd1cc9f
@ -1285,7 +1285,7 @@ const Dashboard = (() => {
|
||||
if(!canvas) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const size = 280; // 足够容纳引出线
|
||||
const size = 360; // 足够容纳四周引出线文字
|
||||
canvas.width = size * dpr;
|
||||
canvas.height = size * dpr;
|
||||
canvas.style.width = size + 'px';
|
||||
@ -1601,10 +1601,10 @@ const Dashboard = (() => {
|
||||
if(!segs || segs.length === 0 || !tot) return;
|
||||
|
||||
const rect = shipmentDonutCanvas.getBoundingClientRect();
|
||||
const scaleX = shipmentDonutCanvas.offsetWidth > 0 ? (280 / shipmentDonutCanvas.offsetWidth) : 1;
|
||||
const scaleY = shipmentDonutCanvas.offsetHeight > 0 ? (280 / shipmentDonutCanvas.offsetHeight) : 1;
|
||||
const rx = (e.clientX - rect.left) * scaleX - 140;
|
||||
const ry = (e.clientY - rect.top) * scaleY - 140;
|
||||
const scaleX = shipmentDonutCanvas.offsetWidth > 0 ? (360 / shipmentDonutCanvas.offsetWidth) : 1;
|
||||
const scaleY = shipmentDonutCanvas.offsetHeight > 0 ? (360 / shipmentDonutCanvas.offsetHeight) : 1;
|
||||
const rx = (e.clientX - rect.left) * scaleX - 180;
|
||||
const ry = (e.clientY - rect.top) * scaleY - 180;
|
||||
const dist = Math.sqrt(rx * rx + ry * ry);
|
||||
|
||||
if(dist < 56 || dist > 100) {
|
||||
@ -2244,10 +2244,10 @@ const Dashboard = (() => {
|
||||
<div class="card" style="flex:1;padding:20px;border-radius:16px;display:flex;flex-direction:column;background:var(--surface);min-height:340px">
|
||||
<div style="font-weight:600;font-size:14px;margin-bottom:12px">产量占比</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center">
|
||||
<div style="display:flex;align-items:center;justify-content:center;position:relative;height:280px;width:280px;flex-shrink:0">
|
||||
<canvas id="shipment-donut-chart" style="width:280px;height:280px"></canvas>
|
||||
<div style="display:flex;align-items:center;justify-content:center;position:relative;height:360px;width:360px;flex-shrink:0">
|
||||
<canvas id="shipment-donut-chart" style="width:360px;height:360px"></canvas>
|
||||
</div>
|
||||
<div id="shipment-donut-legend" style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px;width:100%"></div>
|
||||
<div id="shipment-donut-legend" style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:-40px;width:100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user