| 1 |
- import{i as O,L as A}from"./echarts.72dc8373.js";import{b as T,d as q}from"./enum.fecd7982.js";import{X as B}from"./index.390c1e9e.js";import U from"./index.6894192e.js";import{e as N}from"./emitter.a41ba58e.js";import{p as P}from"./tools.98f32932.js";import{d as j,r as m,k as G,x as X,j as $,p as H,w as k,a8 as S,ae as K,H as Q,o as Y,c as F,M as p,G as h,K as w,a as J}from"./vue.8d1e6c5e.js";import{_ as Z}from"./_plugin-vue_export-helper.c27b6911.js";import"./elementPlus.ea8b940b.js";import"./mCard.13dd7095.js";import"./index.d2a0efc7.js";const ee=j({name:"DataTendencyChart",__name:"index",props:{fetchCard:{},fetchCardWeek:{},fetchCardMonth:{},fetchLine:{},fetchLineMonth:{},fetchLineWeek:{},query:{},initMetric:{default:()=>T.value},metricEnum:{default:()=>q}},setup(E){const i=E,r=m(i.initMetric),g=m([]),y=m([]);let l;const _=m(),s=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(()=>P(i.query));X("statDim",s),$(()=>{z(),setTimeout(()=>{M()},0)}),H(()=>{l&&(l.dispose(),l=null),R()});function v(){o.yAxis=r.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 M(){if(l=O(_.value),o.dataset.source=g.value,o.series=r.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]=r.value.some(a=>a.metric===t.value),e),{}),l.setOption(o),s.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,b]=u.axis.scale.getExtent();t=Math.min(t,x),a=Math.max(a,b)}}),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;s.value==="week"?i.fetchLineWeek&&(e=await i.fetchLineWeek(d.value)):s.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;s.value==="week"&&i.fetchCardWeek?e=await i.fetchCardWeek(d.value):s.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,B.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]=r.value.some(a=>a.metric===t.value),e),{}),o.series=r.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=r.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>r.value.length;)o.yAxis.pop();if(l.setOption(o,!0),console.log("123",s.value),s.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,b]=u.axis.scale.getExtent();t=Math.min(t,x),a=Math.max(a,b)}}),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(){N.emit("DateTendency-dateChange",s.value),v(),l.setOption(o,!0)}let L=!1;k(i.query,async()=>{if(!L){L=!0;return}f.value=!0,await V(),v(),l.setOption(o,!0),await I(),await M(),f.value=!1}),k(()=>i.initMetric,e=>{r.value=e},{immediate:!0});function C(){l.resize()}function z(){window.addEventListener("resize",C)}function R(){window.removeEventListener("resize",C)}return(e,t)=>{const a=S("el-radio-button"),n=S("el-radio-group"),c=K("loading");return Q((Y(),F("div",null,[p(U,{modelValue:r.value,"onUpdate:modelValue":t[0]||(t[0]=u=>r.value=u),"metric-items":y.value,onChange:W},null,8,["modelValue","metric-items"]),p(n,{modelValue:s.value,"onUpdate:modelValue":t[1]||(t[1]=u=>s.value=u),class:"chart-button-group",onChange:D},{default:h(()=>[p(a,{label:"day"},{default:h(()=>[w("日")]),_:1}),p(a,{disabled:!i.fetchLineWeek,label:"week"},{default:h(()=>[w("周")]),_:1},8,["disabled"]),p(a,{disabled:!i.fetchLineWeek,label:"month"},{default:h(()=>[w("月")]),_:1},8,["disabled"])]),_:1},8,["modelValue"]),J("div",{ref_key:"chartRef",ref:_,style:{height:"350px"}},null,512)])),[[c,f.value]])}}});const me=Z(ee,[["__scopeId","data-v-09e64c9b"]]);export{me as default};
|
