| 1 |
- import{i as E,L as _}from"./echarts.72dc8373.js";import{k as I}from"./enum.e566fd6e.js";import{M as z}from"./index.a064c771.js";import{p as N,X as W}from"./index.b098562c.js";import{d as D,r as n,k as R,j as O,w as T,A as q,ai as x,aq as U,P as B,o as P,c as j,U as c,O as p,S as v,a as X}from"./vue.adf17aba.js";import{_ as $}from"./_plugin-vue_export-helper.c27b6911.js";import"./index.05a2d588.js";import"./elementPlus.4833989a.js";const G=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 i;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"}}]},r=n(!0),d=R(()=>N(o.query));O(()=>{w(),M(),setTimeout(()=>{S()},0)}),T(o.query,async()=>{r.value=!0,await w();const e={dataset:{source:await f()}};i.setOption(e),r.value=!1}),q(()=>{i&&(i.dispose(),i=null),A()});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(){i=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),{}),i.setOption(l),r.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();i.setOption(l,!0)}async function k(){r.value=!0;let t=await f();t.length>0&&i.setOption({dataset:{source:t}}),r.value=!1}function g(){i.resize()}function M(){window.addEventListener("resize",g)}function A(){window.removeEventListener("resize",g)}return(t,e)=>{const a=x("el-radio-button"),y=x("el-radio-group"),V=U("loading");return B((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"]),X("div",{style:{height:"350px"},ref_key:"chartRef",ref:b},null,512)])),[[V,r.value]])}}});const te=$(G,[["__scopeId","data-v-90a8a95d"]]);export{te as default};
|
