| 1 |
- import{i as E,L as _}from"./echarts.72dc8373.js";import{k as I}from"./enum.b537673d.js";import{M as z}from"./index.787ef9b0.js";import{p as N,X as W}from"./index.5ce19447.js";import{d as D,r as n,k as R,j as T,w as O,p as q,a9 as x,af 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.65d9dadc.js";import{_ as X}from"./_plugin-vue_export-helper.c27b6911.js";import"./index.4dc9403e.js";import"./elementPlus.ff7602ba.js";const $=D({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:()=>I}},setup(L){const o=L,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=R(()=>N(o.query));T(()=>{w(),M(),setTimeout(()=>{S()},0)}),O(o.query,async()=>{i.value=!0,await w();const e={dataset:{source:await f()}};r.setOption(e),i.value=!1}),q(()=>{r&&(r.dispose(),r=null),V()});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,W.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)})}async function S(){r=E(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},barMaxWidth:"16px",areaStyle:e!==0?{color:new _(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}function C(){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},barMaxWidth:"16px"};return a.type!="bar"&&(a.areaStyle={color:new _(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)}async function k(){i.value=!0;let t=await f();t.length>0&&r.setOption({dataset:{source:t}}),i.value=!1}function g(){r.resize()}function M(){window.addEventListener("resize",g)}function V(){window.removeEventListener("resize",g)}return(t,e)=>{const a=x("el-radio-button"),y=x("el-radio-group"),A=B("loading");return U((P(),j("div",null,[c(z,{modelValue:s.value,"onUpdate:modelValue":e[0]||(e[0]=h=>s.value=h),"metric-items":m.value,onChange:C},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:k},{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)])),[[A,i.value]])}}});const te=X($,[["__scopeId","data-v-90a8a95d"]]);export{te as default};
|
