| 1 |
- import{i as v,S}from"./index-D24Y9HKj.js";import{P as C}from"./index-C__Mp2q5.js";/* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css */import{d as L,r as s,ac as k,c as p,b as m,a as e,u as h,A as o,F as w,h as R,q as T,o as y,t as b,_ as A}from"./index-hZHbf6Qq.js";const $={class:"page-container"},z={class:"chart-section"},D={class:"chart-header"},B={class:"chart-filter"},F={class:"chart-row"},N={class:"chart-section half"},O={class:"chart-header"},P={class:"chart-filter"},V={class:"chart-content-row"},q={class:"category-stats"},E={class:"category-name"},I={class:"category-value"},M={class:"chart-section half"},j=L({__name:"index",setup(G){const i=s("month"),l=s("month"),r=s(),n=s(),c=s(),u=[{value:"10,239.00",label:"购买金额(元)"},{value:"3",label:"购买数量(件)"},{value:"45",label:"订单量(单)"},{value:"78",label:"客单价(元/单)"}],f=[{name:"品类01",value:600},{name:"品类02",value:200},{name:"品类03",value:200}];k(()=>{_(),x(),g()});const _=()=>{if(!r.value)return;v(r.value).setOption({grid:{left:60,right:20,top:30,bottom:30},xAxis:{type:"category",data:["2025/01","2025/02","2025/03","2025/04","2025/05","2025/06","2025/07","2025/08","2025/09","2025/10","2025/11","2025/12"],axisLine:{lineStyle:{color:"#eee"}},axisLabel:{color:"#999"}},yAxis:{type:"value",name:"销量(万元)",nameTextStyle:{color:"#999"},axisLine:{show:!1},splitLine:{lineStyle:{color:"#eee"}},axisLabel:{color:"#999"}},series:[{type:"line",data:[300,980,450,600,400,550,900,700,650,800,500,750],lineStyle:{color:"#e60012",width:2},itemStyle:{color:"#e60012"},symbol:"circle",symbolSize:6}],tooltip:{trigger:"axis",formatter:t=>`${t[0].name}<br/>¥${t[0].value.toFixed(2)}`}})},x=()=>{if(!n.value)return;v(n.value).setOption({series:[{type:"pie",radius:["40%","70%"],center:["50%","50%"],data:[{value:600,name:"品类01",itemStyle:{color:"#f4c542"}},{value:200,name:"品类02",itemStyle:{color:"#3498db"}},{value:200,name:"品类03",itemStyle:{color:"#1abc9c"}}],label:{formatter:"{b} {d}%",color:"#666"}}],tooltip:{formatter:"{b}: {c} ({d}%)"}})},g=()=>{if(!c.value)return;v(c.value).setOption({grid:{left:60,right:20,top:40,bottom:30},xAxis:{type:"category",data:["1","2","3","4","5","6","7","8","9","10","11","12"],axisLine:{lineStyle:{color:"#eee"}},axisLabel:{color:"#999"}},yAxis:{type:"value",name:"销量(万元)",nameTextStyle:{color:"#999"},axisLine:{show:!1},splitLine:{lineStyle:{color:"#eee"}},axisLabel:{color:"#999"}},series:[{name:"购买金额",type:"line",data:[400,500,350,600,450,640,500,550,400,600,450,500],lineStyle:{color:"#f4c542",width:2},itemStyle:{color:"#f4c542"},symbol:"circle",symbolSize:6},{name:"购买数量",type:"line",data:[300,400,250,500,350,332,400,450,300,500,350,400],lineStyle:{color:"#3498db",width:2},itemStyle:{color:"#3498db"},symbol:"circle",symbolSize:6}],tooltip:{trigger:"axis"}})};return(d,t)=>(y(),p("div",$,[m(h(C),{title:"订单交易分析"}),m(h(S),{data:u}),e("div",z,[e("div",D,[t[3]||(t[3]=e("span",{class:"chart-title"},"采购金额趋势",-1)),e("div",B,[e("span",{class:o({active:i.value==="month"}),onClick:t[0]||(t[0]=a=>i.value="month")},"筛选",2),e("span",{class:o({active:i.value==="month"})},"月度",2)])]),e("div",{class:"chart-container",ref_key:"trendChartRef",ref:r},null,512)]),e("div",F,[e("div",N,[e("div",O,[t[4]||(t[4]=e("span",{class:"chart-title"},"采购品类占比",-1)),e("div",P,[e("span",{class:o({active:l.value==="month"}),onClick:t[1]||(t[1]=a=>l.value="month")},"本月",2),e("span",{class:o({active:l.value==="year"}),onClick:t[2]||(t[2]=a=>l.value="year")},"本年",2)])]),e("div",V,[e("div",{class:"chart-container pie",ref_key:"pieChartRef",ref:n},null,512),e("div",q,[(y(),p(w,null,R(f,a=>e("div",{class:"category-item",key:a.name},[e("span",E,b(a.name),1),e("span",I,b(a.value),1)])),64))])])]),e("div",M,[t[5]||(t[5]=T('<div class="chart-header" data-v-bdd2c72b><span class="chart-title" data-v-bdd2c72b>采购商品日变化图</span><div class="chart-filter" data-v-bdd2c72b><span data-v-bdd2c72b>筛选</span><span data-v-bdd2c72b>月度</span></div><div class="chart-legend" data-v-bdd2c72b><span class="legend-item" data-v-bdd2c72b><i class="dot yellow" data-v-bdd2c72b></i>购买金额</span><span class="legend-item" data-v-bdd2c72b><i class="dot blue" data-v-bdd2c72b></i>购买数量</span></div></div>',1)),e("div",{class:"chart-container",ref_key:"dailyChartRef",ref:c},null,512)])])]))}}),le=A(j,[["__scopeId","data-v-bdd2c72b"]]);export{le as default};
|
