import{i as I,L as x}from"./echarts.2703a7ac.js";import{k as z}from"./enum.b537673d.js";import{M as N}from"./index.512d30c7.js";import{p as W,X as D}from"./index.ad090ffd.js";import{d as R,r as n,k as T,j as O,p as q,w as L,a8 as S,ae as B,H as U,o as P,c as j,M as c,G as p,K as v,a as G}from"./vue.95e072e2.js";import{_ as X}from"./_plugin-vue_export-helper.c27b6911.js";import"./index.df979911.js";import"./elementPlus.59866ea5.js";const $=R({name:"DataTendencyChart",__name:"dataTendency",props:{fetchCard:{},fetchLine:{},fetchLineMonth:{},fetchLineWeek:{},query:{},initMetric:{default:()=>[{metric:"Impression",color:"#0085ff",label:"曝光量"},{metric:"Click",color:"#3fd4cf",label:"点击量"},{metric:"Spend",color:"#ff9500",label:"花费"}]},metricEnum:{default:()=>z}},setup(C){const o=C,s=n(o.initMetric),m=n([]);let r;const b=n(),u=n("day"),l={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:"Name",y:""},barWidth:"18px",yAxisIndex:0,itemStyle:{color:"",borderRadius:[4,4,4,4]}},{id:1,name:"",type:"line",encode:{x:"Name",y:""},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:1,itemStyle:{},areaStyle:{},emphasis:{focus:"series"}},{id:2,name:"",type:"line",encode:{x:"Name",y:""},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:2,itemStyle:{},areaStyle:{},emphasis:{focus:"series"}}]},i=n(!0),d=T(()=>W(o.query));O(()=>{w(),V(),setTimeout(()=>{k()},0)}),q(()=>{r&&(r.dispose(),r=null),A()});async function k(){r=I(b.value),l.dataset.source=await f(),l.series=s.value.map((t,e)=>({id:e,name:t.label,type:e===0?"bar":"line",encode:{x:"Name",y:t.metric},yAxisIndex:e,itemStyle:{color:l.series.type=="bar"?"#0085ff":t.color,borderRadius:[6,6,6,6]},lineStyle:{color:t.color},barWidth:"10%",areaStyle:e!==0?{color:new x(0,0,0,1,[{offset:0,color:t.color+"53"},{offset:1,color:t.color+"03"}])}:void 0})),l.yAxis=s.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})),l.legend.selected=o.metricEnum.reduce((t,e)=>(t[e.label]=s.value.some(a=>a.metric===e.value),t),{}),r.setOption(l),i.value=!1}async function f(){if(u.value==="week"){if(o.fetchLineWeek)return(await o.fetchLineWeek(d.value)).data}else if(u.value==="month"){if(o.fetchLineMonth)return(await o.fetchLineMonth(d.value)).data}else return(await o.fetchLine(d.value)).data}async function w(){const e=(await o.fetchCard(d.value)).data;m.value.length=0,D.arrayEach(o.metricEnum,a=>{const y={label:a.label,value:a.value,metricVal:e[a.value],gapVal:e[`gap${a.value}`],preVal:e[`prev${a.value}`]};m.value.push(y)})}function g(){for(l.legend.selected=o.metricEnum.reduce((t,e)=>(t[e.label]=s.value.some(a=>a.metric===e.value),t),{}),l.series=s.value.map((t,e)=>{const a={id:e,name:t.label,type:t.color==="#0085ff"?"bar":"line",encode:{x:"Name",y:t.metric},yAxisIndex:e,itemStyle:{color:t.color,borderRadius:[6,6,6,6]},lineStyle:{color:t.color},barWidth:"10%"};return a!="bar"&&(a.areaStyle={color:new x(0,0,0,1,[{offset:0,color:t.color+"53"},{offset:1,color:t.color+"03"}])}),a}),l.yAxis=s.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}));l.yAxis.length>s.value.length;)l.yAxis.pop();r.setOption(l,!0)}L(s,()=>{g()},{deep:!0});async function M(){i.value=!0;let t=await f();t.length>0&&r.setOption({dataset:{source:t}}),i.value=!1}L(o.query,async()=>{i.value=!0,await w();const e={dataset:{source:await f()}};r.setOption(e),i.value=!1});function _(){r.resize()}function V(){window.addEventListener("resize",_)}function A(){window.removeEventListener("resize",_)}return(t,e)=>{const a=S("el-radio-button"),y=S("el-radio-group"),E=B("loading");return U((P(),j("div",null,[c(N,{modelValue:s.value,"onUpdate:modelValue":e[0]||(e[0]=h=>s.value=h),"metric-items":m.value,onChange:g},null,8,["modelValue","metric-items"]),c(y,{modelValue:u.value,"onUpdate:modelValue":e[1]||(e[1]=h=>u.value=h),class:"chart-button-group",onChange:M},{default:p(()=>[c(a,{label:"day"},{default:p(()=>[v("日")]),_:1}),c(a,{label:"week",disabled:!o.fetchLineWeek},{default:p(()=>[v("周")]),_:1},8,["disabled"]),c(a,{label:"month",disabled:!o.fetchLineWeek},{default:p(()=>[v("月")]),_:1},8,["disabled"])]),_:1},8,["modelValue"]),G("div",{style:{height:"350px"},ref_key:"chartRef",ref:b},null,512)])),[[E,i.value]])}}});const te=X($,[["__scopeId","data-v-f8a74516"]]);export{te as default};