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