| 1 |
- import{L as v,i as C}from"./echarts.72dc8373.js";import{a as S,u as L,X as h,I}from"./index.34b03be2.js";import{g as z,c as D}from"./api.9b255e53.js";import{k as V}from"./enum.e566fd6e.js";import{M as k}from"./index.149cd6a8.js";import{d as E,j as R,A,r as c,ay as M,w as T,aq as O,P as B,o as U,c as P,U as j,a as N}from"./vue.adf17aba.js";import{_ as X}from"./_plugin-vue_export-helper.c27b6911.js";import"./elementPlus.4833989a.js";import"./index.05a2d588.js";const $=E({name:"DataTendencyChart",__name:"dataTendency",setup(q){R(()=>{m(),w(),setTimeout(()=>{b()},0)}),A(()=>{t&&(t.dispose(),t=null),x()});const g=S(),i=c([{metric:"Impression",color:"#0085ff",label:"曝光量"},{metric:"Click",color:"#3fd4cf",label:"点击量"},{metric:"Spend",color:"#ff9500",label:"花费"}]),f=L(),l=c([]);let t;const p=c(),s={dataset:{source:[]},tooltip:{trigger:"axis",axisPointer:{label:{backgroundColor:"#6a7985"}}},legend:{selected:{},show:!1},grid:{top:50,right:150,bottom:30,left:55},xAxis:{type:"category"},yAxis:[{id:0,type:"value",name:"曝光量",splitLine:{show:!0},axisLine:{show:!0,lineStyle:{color:"#0085ff"}},show:!0},{id:1,type:"value",name:"点击量",position:"right",splitLine:{show:!1},axisLine:{show:!0,lineStyle:{color:"#3fd4cf"}},show:!0},{id:2,type:"value",position:"right",offset:90,name:"花费",splitLine:{show:!1},axisLine:{show:!0,lineStyle:{color:"#ff9500"}},show:!0}],series:[{id:0,name:"曝光量",type:"bar",encode:{x:"date",y:"Impression"},barWidth:"20px",yAxisIndex:0,itemStyle:{color:"#0085ff",borderRadius:[6,6,6,6]}},{id:1,name:"点击量",type:"line",encode:{x:"date",y:"Click"},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:1,itemStyle:{color:"#3fd4cf",borderColor:"#3fd4cf"},areaStyle:{color:new v(0,0,0,1,[{offset:0,color:"#3fd4cf53"},{offset:1,color:"#3fd4cf03"}])},emphasis:{focus:"series"}},{id:2,name:"花费",type:"line",encode:{x:"date",y:"Spend"},symbolSize:6,symbol:"circle",smooth:!0,yAxisIndex:2,itemStyle:{color:"#ff9500",borderColor:"#ff9500"},areaStyle:{color:new v(0,0,0,1,[{offset:0,color:"#ff950053"},{offset:1,color:"#ff950003"}])},emphasis:{focus:"series"}}]},{dateRange:r}=M(g),n=c(!0),u=async()=>(await D({profile:f.profile.profile_id,start:r.value[0],end:r.value[1]})).data,b=async()=>{t=C(p.value);const a=await u();s.dataset.source=a,h.arrayEach(l.value,e=>{s.legend.selected[e.label]=!1});for(const e of i.value)s.legend.selected[e.label]=!0;t.setOption(s),n.value=!1},m=async()=>{const e=(await z({start:r.value[0],end:r.value[1],profile:f.profile.profile_id})).data;l.value.length=0,h.arrayEach(V,o=>{const d={label:o.label,value:o.value,metricVal:e[o.value],gapVal:e[`gap${o.value}`],preVal:e[`prev${o.value}`]};l.value.push(d)})},_=()=>{const a=I(s,i.value);t.setOption(a)};T(r,async()=>{n.value=!0,await m();const e={dataset:{source:await u()}};t.setOption(e),n.value=!1});const y=()=>{t.resize()},w=()=>{window.addEventListener("resize",y)},x=()=>{window.removeEventListener("resize",y)};return(a,e)=>{const o=O("loading");return B((U(),P("div",null,[j(k,{modelValue:i.value,"onUpdate:modelValue":e[0]||(e[0]=d=>i.value=d),"metric-items":l.value,onChange:_},null,8,["modelValue","metric-items"]),N("div",{style:{height:"350px"},ref_key:"chartRef",ref:p},null,512)])),[[o,n.value]])}}});const ee=X($,[["__scopeId","data-v-1a2b82d2"]]);export{ee as default};
|
