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.6 KiB
2 lines
3.6 KiB
import{d as a,e,f as l,j as t,a3 as s,w as u,k as d,l as c,ac as v,n,U as i,p as r,q as o,v as f,y as h,x as y,D as x,ad as _,J as g,F as m,G as p,H as k,_ as S}from"./index-BFumin6Y.js";const w="trafficLineChart",b=S(a({__name:"index",setup(a){const S=e("week"),b={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}]},T=l(()=>b[S.value]),C=l(()=>{var a,e;return`${(null==(a=T.value[0])?void 0:a.date)||"-"} 至 ${(null==(e=T.value[T.value.length-1])?void 0:e.date)||"-"}`}),F=l(()=>T.value.reduce((a,e)=>e.value>a.value?e:a,T.value[0]));function P(){const a=T.value;if(!a.length)return;const e=v(w),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)),i=Math.max(1,n-c),r=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+r*t/Math.max(1,a.length-1),y:l+(n-e.value)/i*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(),P()}),u(S,async()=>{await s(),P()}),(a,e)=>{const l=i("SubPageBackBtn"),t=n,s=f,u=_;return r(),d(t,{class:"page"},{default:c(()=>[o(l),o(t,{class:"section-title"},{default:c(()=>[o(t,{class:"bar"}),o(s,{class:"title"},{default:c(()=>[h("全市参观人数")]),_:1}),o(t,{class:"period"},{default:c(()=>[o(s,{class:y({active:"week"===S.value}),onClick:e[0]||(e[0]=a=>S.value="week")},{default:c(()=>[h("周")]),_:1},8,["class"]),o(s,{class:y({active:"month"===S.value}),onClick:e[1]||(e[1]=a=>S.value="month")},{default:c(()=>[h("月")]),_:1},8,["class"]),o(s,{class:y({active:"year"===S.value}),onClick:e[2]||(e[2]=a=>S.value="year")},{default:c(()=>[h("年")]),_:1},8,["class"])]),_:1})]),_:1}),o(t,{class:"date-range"},{default:c(()=>[h(x(C.value),1)]),_:1}),o(t,{class:"chart-card"},{default:c(()=>[o(u,{"canvas-id":w,id:w,class:"chart-canvas",style:g("width:680rpx;height:260rpx;")},null,8,["style"]),o(t,{class:"x-axis"},{default:c(()=>[(r(!0),m(p,null,k(T.value,a=>(r(),d(s,{key:a.date},{default:c(()=>[h(x(a.date),1)]),_:2},1024))),128))]),_:1})]),_:1}),o(t,{class:"list-card"},{default:c(()=>[o(t,{class:"list-title"},{default:c(()=>[h("参观人数列表")]),_:1}),(r(!0),m(p,null,k(T.value,a=>(r(),d(t,{key:a.date,class:"row"},{default:c(()=>{var e;return[o(s,{class:"d"},{default:c(()=>[h(x(a.date),1)]),_:2},1024),o(s,{class:y(["c",{hot:a.date===(null==(e=F.value)?void 0:e.date)}])},{default:c(()=>{return[h(x((e=a.value,`${e.toLocaleString()}人`)),1)];var e}),_:2},1032,["class"])]}),_:2},1024))),128))]),_:1})]),_:1})}}}),[["__scopeId","data-v-90b339fd"]]);export{b as default};
|