You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
3.7 KiB
2 lines
3.7 KiB
3 days ago
|
import{d as a,r as e,c as l,o as t,R as s,w as u,a as d,b as c,_ as v,p as n,m as r,n as i,t as o,q as f,z as h,u as _,$ as x,O as y,v as m,F as p,x as g}from"./index-Cu9ZRBys.js";import{_ as k}from"./_plugin-vue_export-helper.BCo6x5W8.js";const S="trafficLineChart",w=k(a({__name:"index",setup(a){const k=e("week"),w={week:[{date:"04-03",value:12358},{date:"04-04",value:15540},{date:"04-05",value:14200},{date:"04-06",value:18680},{date:"04-07",value:14820},{date:"04-08",value:20550},{date:"04-09",value:32100}],month:[{date:"04-01",value:12800},{date:"04-05",value:18800},{date:"04-10",value:17600},{date:"04-15",value:22900},{date:"04-20",value:19600},{date:"04-25",value:26400},{date:"04-30",value:30100}],year:[{date:"01月",value:268e3},{date:"03月",value:292e3},{date:"05月",value:318e3},{date:"07月",value:346e3},{date:"09月",value:332e3},{date:"11月",value:368e3},{date:"12月",value:392e3}]},b=l(()=>w[k.value]),T=l(()=>{var a,e;return`${(null==(a=b.value[0])?void 0:a.date)||"-"} 至 ${(null==(e=b.value[b.value.length-1])?void 0:e.date)||"-"}`}),C=l(()=>b.value.reduce((a,e)=>e.value>a.value?e:a,b.value[0]));function F(){const a=b.value;if(!a.length)return;const e=v(S),l=24,t=18,s=24,u=18,d=260,c=Math.min(...a.map(a=>a.value)),n=Math.max(...a.map(a=>a.value)),r=Math.max(1,n-c),i=680-u-t,o=d-l-s;e.clearRect(0,0,680,d);const f=e.createLinearGradient(0,l,0,d);f.addColorStop(0,"rgba(5,201,172,0.35)"),f.addColorStop(1,"rgba(5,201,172,0.02)");const h=a.map((e,t)=>({x:u+i*t/Math.max(1,a.length-1),y:l+(n-e.value)/r*o,value:e.value,date:e.date}));e.beginPath(),h.forEach((a,l)=>0===l?e.moveTo(a.x,a.y):e.lineTo(a.x,a.y)),e.lineTo(h[h.length-1].x,252),e.lineTo(h[0].x,252),e.closePath(),e.setFillStyle(f),e.fill(),e.beginPath(),h.forEach((a,l)=>0===l?e.moveTo(a.x,a.y):e.lineTo(a.x,a.y)),e.setStrokeStyle("#05c9ac"),e.setLineWidth(5),e.stroke(),e.setFillStyle("#ff7d00"),h.forEach(a=>{e.beginPath(),e.arc(a.x,a.y,6,0,2*Math.PI),e.fill(),e.setFillStyle("#4e5969"),e.setFontSize(20),e.fillText(a.value.toLocaleString(),a.x-34,a.y-12),e.setFillStyle("#ff7d00")}),e.draw()}return t(async()=>{await s(),F()}),u(k,async()=>{await s(),F()}),(a,e)=>{const l=n,t=f,s=x;return r(),d(l,{class:"page"},{default:c(()=>[i(l,{class:"head"},{default:c(()=>[o("客流统计")]),_:1}),i(l,{class:"section-title"},{default:c(()=>[i(l,{class:"bar"}),i(t,{class:"title"},{default:c(()=>[o("全市参观人数")]),_:1}),i(l,{class:"period"},{default:c(()=>[i(t,{class:h({active:"week"===k.value}),onClick:e[0]||(e[0]=a=>k.value="week")},{default:c(()=>[o("周")]),_:1},8,["class"]),i(t,{class:h({active:"month"===k.value}),onClick:e[1]||(e[1]=a=>k.value="month")},{default:c(()=>[o("月")]),_:1},8,["class"]),i(t,{class:h({active:"year"===k.value}),onClick:e[2]||(e[2]=a=>k.value="year")},{default:c(()=>[o("年")]),_:1},8,["class"])]),_:1})]),_:1}),i(l,{class:"date-range"},{default:c(()=>[o(_(T.value),1)]),_:1}),i(l,{class:"chart-card"},{default:c(()=>[i(s,{"canvas-id":S,id:S,class:"chart-canvas",style:y("width:680rpx;height:260rpx;")},null,8,["style"]),i(l,{class:"x-axis"},{default:c(()=>[(r(!0),m(p,null,g(b.value,a=>(r(),d(t,{key:a.date},{default:c(()=>[o(_(a.date),1)]),_:2},1024))),128))]),_:1})]),_:1}),i(l,{class:"list-card"},{default:c(()=>[i(l,{class:"list-title"},{default:c(()=>[o("参观人数列表")]),_:1}),(r(!0),m(p,null,g(b.value,a=>(r(),d(l,{key:a.date,class:"row"},{default:c(()=>{var e;return[i(t,{class:"d"},{default:c(()=>[o(_(a.date),1)]),_:2},1024),i(t,{class:h(["c",{hot:a.date===(null==(e=C.value)?void 0:e.date)}])},{default:c(()=>{return[o(_((e=a.value,`${e.toLocaleString()}人`)),1)];var e}),_:2},1032,["class"])]}),_:2},1024))),128))]),_:1})]),_:1})}}}),[["__scopeId","data-v-5553bcc5"]]);export{w as default};
|