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