| 1 |
- import{i as R,L as A}from"./echarts.594b4072.js";import{b as O,d as T}from"./enum.aabc75ad.js";import{X as q}from"./index.e6340fb7.js";import B from"./index.57b02206.js";import{e as U}from"./emitter.e2cc3330.js";import{p as N}from"./tools.d766791a.js";import{f as P,r as f,e as j,x as G,d as X,m as $,w as k,a7 as S,af as H,H as K,h as Q,i as Y,M as p,G as h,K as g,j as F}from"./vue.9083513e.js";import{_ as J}from"./_plugin-vue_export-helper.c27b6911.js";import"./elementPlus.5243d764.js";import"./mCard.0bce9c93.js";import"./index.1699d3f0.js";const Z=P({name:"DataTendencyChart",__name:"index",props:{fetchCard:{},fetchCardWeek:{},fetchCardMonth:{},fetchLine:{},fetchLineMonth:{},fetchLineWeek:{},query:{},initMetric:{default:()=>O.value},metricEnum:{default:()=>T}},setup(E){const i=E,r=f(i.initMetric),y=f([]);let l;const b=f(),n=f("day"),o={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:"16px",yAxisIndex:0,itemStyle:{color:"",borderRadius:4}},{id:1,name:"",type:"line",encode:{x:"data_datetime",y:""},barWidth:"16px",yAxisIndex:0,itemStyle:{color:"",borderRadius:4}},{id:2,name:"",type:"line",encode:{x:"data_datetime",y:""},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:2,itemStyle:{},areaStyle:{},emphasis:{focus:"series"}}]},m=f(!0),d=j(()=>N(i.query));G("statDim",n),X(()=>{L(),D(),setTimeout(()=>{_()},0)}),$(()=>{l&&(l.dispose(),l=null),z()});function v(){o.yAxis=r.value.map((t,e)=>({id:e,name:t.label,type:"value",position:e===0?"left":"right",offset:e>1?(e-1)*80:0,axisLine:{show:!0,lineStyle:{color:t.color}},splitLine:{show:e===0},show:!0}))}async function _(){if(l=R(b.value),o.dataset.source=await I(),o.series=r.value.map((t,e)=>({id:e,name:t.label,type:e===0?"bar":"line",encode:{x:"data_datetime",y:t.metric},yAxisIndex:e,itemStyle:{color:e===0?"#0085ff":t.color,borderRadius:[6,6,6,6]},lineStyle:{color:t.color},barWidth:"16px",areaStyle:e!==0?{color:new A(0,0,0,1,[{offset:0,color:t.color+"53"},{offset:1,color:t.color+"03"}])}:void 0})),v(),o.legend.selected=i.metricEnum.reduce((t,e)=>(t[e.label]=r.value.some(a=>a.metric===e.value),t),{}),l.setOption(o),n.value!=="week"){const t=["销售额","上年销售额","上月销售额"];let e=1/0,a=-1/0;o.yAxis.forEach((s,c)=>{if(t.includes(s.name)){const u=l.getModel().getComponent("yAxis",c),[x,w]=u.axis.scale.getExtent();e=Math.min(e,x),a=Math.max(a,w)}}),o.yAxis.forEach((s,c)=>{t.includes(s.name)&&(o.yAxis[c]={...s,min:e,max:a,interval:(a-e)/5})}),l.setOption(o,!0)}m.value=!1}async function I(){if(n.value==="week"){if(i.fetchLineWeek)return(await i.fetchLineWeek(d.value)).data}else if(n.value==="month"){if(i.fetchLineMonth)return(await i.fetchLineMonth(d.value)).data}else return(await i.fetchLine(d.value)).data}const L=async()=>{let t;n.value==="week"&&i.fetchCardWeek?t=await i.fetchCardWeek(d.value):n.value==="month"&&i.fetchCardMonth?t=await i.fetchCardMonth(d.value):i.fetchCard&&(t=await i.fetchCard(d.value));const e=t.data;y.value.length=0,q.arrayEach(i.metricEnum,a=>{const s={label:a.label,value:a.value,metricVal:e[a.value],gapVal:e[`gap${a.value}`],preVal:e[`prev${a.value}`]};y.value.push(s)})};function V(){for(o.legend.selected=i.metricEnum.reduce((t,e)=>(t[e.label]=r.value.some(a=>a.metric===e.value),t),{}),o.series=r.value.map((t,e)=>{const a={id:e,name:t.label,type:t.color==="#0085ff"?"bar":"line",encode:{x:"data_datetime",y:t.metric},yAxisIndex:e,itemStyle:{color:t.color,borderRadius:[6,6,6,6]},lineStyle:{color:t.color},barWidth:"16px"};return a.type!="bar"&&(a.areaStyle={color:new A(0,0,0,1,[{offset:0,color:t.color+"53"},{offset:1,color:t.color+"03"}])}),a}),o.yAxis=r.value.map((t,e)=>({id:e,name:t.label,type:"value",position:e===0?"left":"right",offset:e>1?(e-1)*80:0,axisLine:{show:!0,lineStyle:{color:t.color}},splitLine:{show:e===0},show:!0}));o.yAxis.length>r.value.length;)o.yAxis.pop();if(l.setOption(o,!0),console.log("123",n.value),n.value!="week"){const t=["销售额","上年销售额","上月销售额"];let e=1/0,a=-1/0;o.yAxis.forEach((s,c)=>{if(t.includes(s.name)){const u=l.getModel().getComponent("yAxis",c),[x,w]=u.axis.scale.getExtent();e=Math.min(e,x),a=Math.max(a,w)}}),o.yAxis.forEach((s,c)=>{t.includes(s.name)&&(o.yAxis[c]={...s,min:e,max:a,interval:(a-e)/5})}),l.setOption(o,!0)}m.value=!1}async function W(){U.emit("DateTendency-dateChange",n.value),v(),l.setOption(o,!0)}let M=!1;k(i.query,async()=>{if(!M){M=!0;return}m.value=!0,await L(),v(),l.setOption(o,!0),await _(),m.value=!1}),k(()=>i.initMetric,t=>{r.value=t},{immediate:!0});function C(){l.resize()}function D(){window.addEventListener("resize",C)}function z(){window.removeEventListener("resize",C)}return(t,e)=>{const a=S("el-radio-button"),s=S("el-radio-group"),c=H("loading");return K((Q(),Y("div",null,[p(B,{modelValue:r.value,"onUpdate:modelValue":e[0]||(e[0]=u=>r.value=u),"metric-items":y.value,onChange:V},null,8,["modelValue","metric-items"]),p(s,{modelValue:n.value,"onUpdate:modelValue":e[1]||(e[1]=u=>n.value=u),class:"chart-button-group",onChange:W},{default:h(()=>[p(a,{label:"day"},{default:h(()=>[g("日")]),_:1}),p(a,{disabled:!i.fetchLineWeek,label:"week"},{default:h(()=>[g("周")]),_:1},8,["disabled"]),p(a,{disabled:!i.fetchLineWeek,label:"month"},{default:h(()=>[g("月")]),_:1},8,["disabled"])]),_:1},8,["modelValue"]),F("div",{ref_key:"chartRef",ref:b,style:{height:"350px"}},null,512)])),[[c,m.value]])}}});const de=J(Z,[["__scopeId","data-v-536c8877"]]);export{de as default};
|
