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