| 1 |
- import{i as z,L as I}from"./echarts.72dc8373.js";import{k as D}from"./enum.b537673d.js";import{M as A}from"./index.dbfd5d02.js";import{p as N,X as p,I as O}from"./index.ce5db57b.js";import{d as T,r as c,k as W,j as R,p as q,w as B,a9 as x,af as U,H as P,o as j,c as G,M as u,G as y,K as b,a as X}from"./vue.6daa721c.js";import{_ as $}from"./_plugin-vue_export-helper.c27b6911.js";import"./index.abe7750b.js";import"./elementPlus.346c766a.js";const H=T({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:()=>D}},setup(L){const a=L,o=c(a.initMetric),f=c([]);let l;const _=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}],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"}}]},n=c(!0),m=W(()=>N(a.query));R(()=>{g(),E(),setTimeout(()=>{C()},0)}),q(()=>{l&&(l.dispose(),l=null),M()});const C=async()=>{l=z(_.value);const s=await h();i.dataset.source=s,p.arrayEach(i.series,(e,t)=>{const r=o.value[t].color;e.name=o.value[t].label,e.encode.y=o.value[t].metric,e.type==="bar"?e.itemStyle.color=r:(e.itemStyle={color:r,borderColor:r},e.areaStyle={color:new I(0,0,0,1,[{offset:0,color:r+"53"},{offset:1,color:r+"03"}])})}),p.arrayEach(i.yAxis,(e,t)=>{e.name=o.value[t].label,e.axisLine.lineStyle.color=o.value[t].color}),p.arrayEach(a.metricEnum,e=>{i.legend.selected[e.label]=!1});for(const e of o.value)i.legend.selected[e.label]=!0;l.setOption(i),n.value=!1},h=async()=>{if(d.value==="week"){if(a.fetchLineWeek)return(await a.fetchLineWeek(m.value)).data}else if(d.value==="month"){if(a.fetchLineMonth)return(await a.fetchLineMonth(m.value)).data}else return(await a.fetchLine(m.value)).data},g=async()=>{const e=(await a.fetchCard(m.value)).data;f.value.length=0,p.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}`]};f.value.push(r)})},S=()=>{const s=O(i,o.value);l.setOption(s)},k=async()=>{n.value=!0;let s=await h();s.length>0&&l.setOption({dataset:{source:s}}),n.value=!1};B(a.query,async()=>{n.value=!0,await g();const e={dataset:{source:await h()}};l.setOption(e),n.value=!1});const w=()=>{l.resize()},E=()=>{window.addEventListener("resize",w)},M=()=>{window.removeEventListener("resize",w)};return(s,e)=>{const t=x("el-radio-button"),r=x("el-radio-group"),V=U("loading");return P((j(),G("div",null,[u(A,{modelValue:o.value,"onUpdate:modelValue":e[0]||(e[0]=v=>o.value=v),"metric-items":f.value,onChange:S},null,8,["modelValue","metric-items"]),u(r,{modelValue:d.value,"onUpdate:modelValue":e[1]||(e[1]=v=>d.value=v),class:"chart-button-group",onChange:k},{default:y(()=>[u(t,{label:"day"},{default:y(()=>[b("日")]),_:1}),u(t,{label:"week",disabled:!a.fetchLineWeek},{default:y(()=>[b("周")]),_:1},8,["disabled"]),u(t,{label:"month",disabled:!a.fetchLineWeek},{default:y(()=>[b("月")]),_:1},8,["disabled"])]),_:1},8,["modelValue"]),X("div",{style:{height:"350px"},ref_key:"chartRef",ref:_},null,512)])),[[V,n.value]])}}});const ae=$(H,[["__scopeId","data-v-76a5ba80"]]);export{ae as default};
|
