| 1 |
- import{i as L,L as S}from"./echarts.72dc8373.js";import{k as C}from"./enum.e566fd6e.js";import{M as E}from"./index.a064c771.js";import{p as k,X as m,I as M}from"./index.b098562c.js";import{d as z,r as n,k as I,j as V,A,w as D,aq as q,P as N,o as O,c as R,U as T,a as B}from"./vue.adf17aba.js";import{_ as P}from"./_plugin-vue_export-helper.c27b6911.js";import"./index.05a2d588.js";import"./elementPlus.4833989a.js";const U=z({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:()=>C}},setup(b){const a=b,s=n(a.initMetric),d=n([]);let i;const p=n(),y=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:"20px",yAxisIndex:0,itemStyle:{color:"",borderRadius:[6,6,6,6]}},{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"}}]},c=n(!0),u=I(()=>k(a.query));V(()=>{f(),x(),setTimeout(()=>{w()},0)}),A(()=>{i&&(i.dispose(),i=null),_()});const w=async()=>{i=L(p.value);const o=await h();l.dataset.source=o,m.arrayEach(l.series,(e,t)=>{const r=s.value[t].color;e.name=s.value[t].label,e.encode.y=s.value[t].metric,e.type==="bar"?e.itemStyle.color=r:(e.itemStyle={color:r,borderColor:r},e.areaStyle={color:new S(0,0,0,1,[{offset:0,color:r+"53"},{offset:1,color:r+"03"}])})}),m.arrayEach(l.yAxis,(e,t)=>{e.name=s.value[t].label,e.axisLine.lineStyle.color=s.value[t].color}),m.arrayEach(a.metricEnum,e=>{l.legend.selected[e.label]=!1});for(const e of s.value)l.legend.selected[e.label]=!0;i.setOption(l),c.value=!1},h=async()=>{if(y.value==="week"){if(a.fetchLineWeek)return(await a.fetchLineWeek(u.value)).data}else if(y.value==="month"){if(a.fetchLineMonth)return(await a.fetchLineMonth(u.value)).data}else return(await a.fetchLine(u.value)).data},f=async()=>{const e=(await a.fetchCard(u.value)).data;d.value.length=0,m.arrayEach(a.metricEnum,t=>{const r={label:t.label,value:t.value,metricVal:e[t.value],gapVal:e[`gap${t.value}`],preVal:e[`prev${t.value}`]};d.value.push(r)})},g=()=>{const o=M(l,s.value);i.setOption(o)};D(a.query,async()=>{c.value=!0,await f();const e={dataset:{source:await h()}};i.setOption(e),c.value=!1});const v=()=>{i.resize()},x=()=>{window.addEventListener("resize",v)},_=()=>{window.removeEventListener("resize",v)};return(o,e)=>{const t=q("loading");return N((O(),R("div",null,[T(E,{modelValue:s.value,"onUpdate:modelValue":e[0]||(e[0]=r=>s.value=r),"metric-items":d.value,onChange:g},null,8,["modelValue","metric-items"]),B("div",{style:{height:"350px"},ref_key:"chartRef",ref:p},null,512)])),[[t,c.value]])}}});const J=P(U,[["__scopeId","data-v-543cbcbd"]]);export{J as default};
|
