| 1 |
- import{i as I,L as O}from"./echarts.594b4072.js";import{d as R}from"./enum.aabc75ad.js";import{X as p}from"./index.4e34480b.js";import{e as L}from"./emitter.1b17da23.js";import{p as T,b as q}from"./tools.662d4d7b.js";import{f as B,r as u,e as U,d as N,m as P,w as j,a7 as b,af as G,H as X,h as $,i as H,M as m,G as h,K as g,j as K}from"./vue.9083513e.js";import{_ as Q}from"./_plugin-vue_export-helper.c27b6911.js";import"./elementPlus.5243d764.js";const F=B({name:"DataTendencyChart",__name:"index",props:{fetchCard:{},fetchCardWeek:{},fetchCardMonth:{},fetchLine:{},fetchLineMonth:{},fetchLineWeek:{},query:{},initMetric:{default:()=>[{metric:"sales",color:"#0085ff",label:"销售额"},{metric:"ad_cost",color:"#3fd4cf",label:"广告花费"},{metric:"ad_sales",color:"#ff9500",label:"广告销售额"}]},metricEnum:{default:()=>R}},emits:["changeStatDim"],setup(S,{emit:k}){const a=S,l=u(a.initMetric),f=u([]);let i;const w=u(),r=u("day"),n={dataset:{source:[]},tooltip:{trigger:"axis",axisPointer:{label:{backgroundColor:"#6a7985"}}},legend:{selected:{},show:!1},grid:{top:50,right:150,bottom:30,left:65},xAxis:{type:"category"},yAxis:[{id:0,type:"value",name:"",splitLine:{show:!0},axisLine:{show:!0,lineStyle:{color:""}},show:!0},{id:1,type:"value",name:"",position:"right",splitLine:{show:!1},axisLine:{show:!0,lineStyle:{color:""}},show:!0},{id:2,type:"value",position:"right",offset:90,name:"",splitLine:{show:!1},axisLine:{show:!0,lineStyle:{color:""}},show:!0}],series:[{id:0,name:"",type:"bar",encode:{x:"data_datetime",y:""},barWidth:"18px",yAxisIndex:0,itemStyle:{color:"",borderRadius:4}},{id:1,name:"",type:"line",encode:{x:"data_datetime",y:""},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:1,itemStyle:{},areaStyle:{},emphasis:{focus:"series"}},{id:2,name:"",type:"line",encode:{x:"data_datetime",y:""},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:2,itemStyle:{},areaStyle:{},emphasis:{focus:"series"}}]},c=u(!0),d=U(()=>T(a.query));N(()=>{v(),V(),setTimeout(()=>{M()},0)}),P(()=>{i&&(i.dispose(),i=null),W()});const M=async()=>{i=I(w.value);const t=await y();n.dataset.source=t,p.arrayEach(n.series,(e,s)=>{const o=l.value[s].color;e.name=l.value[s].label,e.encode.y=l.value[s].metric,e.type==="bar"?e.itemStyle.color=o:(e.itemStyle={color:o,borderColor:o},e.areaStyle={color:new O(0,0,0,1,[{offset:0,color:o+"53"},{offset:1,color:o+"03"}])})}),p.arrayEach(n.yAxis,(e,s)=>{e.name=l.value[s].label,e.axisLine.lineStyle.color=l.value[s].color}),p.arrayEach(a.metricEnum,e=>{n.legend.selected[e.label]=!1});for(const e of l.value)n.legend.selected[e.label]=!0;i.setOption(n),c.value=!1},y=async()=>{if(r.value==="week"){if(a.fetchLineWeek)return(await a.fetchLineWeek(d.value)).data}else if(r.value==="month"){if(a.fetchLineMonth)return(await a.fetchLineMonth(d.value)).data}else return(await a.fetchLine(d.value)).data},v=async()=>{let t;r.value==="week"&&a.fetchCardWeek?t=await a.fetchCardWeek(d.value):r.value==="month"&&a.fetchCardMonth?t=await a.fetchCardMonth(d.value):a.fetchCard&&(t=await a.fetchCard(d.value));const e=t.data;f.value.length=0,p.arrayEach(a.metricEnum,s=>{const o={label:s.label,value:s.value,metricVal:e[s.value],gapVal:e[`gap${s.value}`],preVal:e[`prev${s.value}`]};f.value.push(o)})},D=()=>{const t=q(n,l.value);i.setOption(t)},x=k,E=async()=>{L.emit("DateTendency-dateChange",r.value),c.value=!0;let t=await y();t.length>0&&i.setOption({dataset:{source:t}}),await v(),c.value=!1,x("changeStatDim",t)};j(a.query,async()=>{L.emit("DateTendency-changeStatDim"),c.value=!0,await v();const t=await y();x("changeStatDim",t);const e={dataset:{source:t}};i.setOption(e),c.value=!1});const C=()=>{i.resize()},V=()=>{window.addEventListener("resize",C)},W=()=>{window.removeEventListener("resize",C)};return(t,e)=>{const s=b("MetricsCards"),o=b("el-radio-button"),z=b("el-radio-group"),A=G("loading");return X(($(),H("div",null,[m(s,{modelValue:l.value,"onUpdate:modelValue":e[0]||(e[0]=_=>l.value=_),"metric-items":f.value,onChange:D},null,8,["modelValue","metric-items"]),m(z,{modelValue:r.value,"onUpdate:modelValue":e[1]||(e[1]=_=>r.value=_),class:"chart-button-group",onChange:E},{default:h(()=>[m(o,{label:"day"},{default:h(()=>[g("日")]),_:1}),m(o,{label:"week",disabled:!a.fetchLineWeek},{default:h(()=>[g("周")]),_:1},8,["disabled"]),m(o,{label:"month",disabled:!a.fetchLineWeek},{default:h(()=>[g("月")]),_:1},8,["disabled"])]),_:1},8,["modelValue"]),K("div",{style:{height:"350px"},ref_key:"chartRef",ref:w},null,512)])),[[A,c.value]])}}});const le=Q(F,[["__scopeId","data-v-be25dd83"]]);export{le as default};
|
