useChart-B4uBReHb.js 5.6 KB

12
  1. var e=Object.defineProperty,t=Object.defineProperties,n=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,a=(t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,l=(e,t)=>{for(var n in t||(t={}))o.call(t,n)&&a(e,n,t[n]);if(r)for(var n of r(t))i.call(t,n)&&a(e,n,t[n]);return e},s=(e,r)=>t(e,n(r));import{i as c}from"./index-BIE_y9uC.js";import{c as u,s as p,r as h,w as m,n as d,d as v,O as f,p as y}from"./vendor-CgKklJ4r.js";import{g,a as b}from"./index-DF0Gm8tW.js";const w=()=>({chartHeight:"16rem",fontSize:13,fontColor:"#999",themeColor:g("--el-color-primary-light-1"),colors:[g("--el-color-primary-light-1"),"#4ABEFF","#EDF2FF","#14DEBA","#FFAF20","#FA8A6C","#FFAF20"]}),E=[50,100,200,350],C=[50,100,200];function S(e={}){const{initOptions:t,initDelay:n=0,threshold:r=.1,autoTheme:o=!0}=e,i=b(),{isDark:a,menuOpen:u,menuType:g}=p(i),S=h();let O=null,x=null,F=null,A=null,D=null,z=!1,T=null;const L=()=>{D&&cancelAnimationFrame(D),D=requestAnimationFrame((()=>{B(),D=null}))},j=()=>{A&&clearTimeout(A),A=window.setTimeout((()=>{L(),A=null}),100)},R=e=>{d(L),e.forEach((e=>{setTimeout(L,e)}))};m(u,(()=>R(E))),m(g,(()=>{d(L),setTimeout((()=>R(C)),0)})),o&&m(a,(()=>{P.updateStyle(),O&&!z&&requestAnimationFrame((()=>{if(O&&!z){const e=O.getOption();e&&H(e)}}))}));const k=(e,t=1,n)=>l({color:e,width:t},n&&{type:n}),I=()=>{x&&(x.disconnect(),x=null)},q=e=>{O||!S.value||z||(O=c(S.value)),O&&!z&&(O.setOption(e),F=null)},P={create:()=>{S.value&&!T&&(T=document.createElement("div"),T.style.cssText=`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n color: ${a.value?"#666":"#999"};\n background: transparent;\n z-index: 10;\n gap: 8px;\n `,T.innerHTML=`\n <i class="iconfont-sys" style="font-size: 48px; color: ${a.value?"#555":"#ccc"};">&#xe6da;</i>\n <span>暂无数据</span>\n `,"relative"!==S.value.style.position&&"absolute"!==S.value.style.position&&(S.value.style.position="relative"),S.value.appendChild(T))},remove:()=>{T&&S.value&&(S.value.removeChild(T),T=null)},updateStyle:()=>{if(T){T.style.color=a.value?"#666":"#999";const e=T.querySelector("i.iconfont-sys");e&&(e.style.color=a.value?"#555":"#ccc")}}},V=(e={},o=!1)=>{if(!S.value||z)return;const i=l(l({},t),e);try{if(o)return O&&O.clear(),void P.create();P.remove(),(e=>{const t=e.getBoundingClientRect();return t.width>0&&t.height>0&&t.top<window.innerHeight&&t.bottom>0})(S.value)?n>0?setTimeout((()=>q(i)),n):q(i):(F=i,!x&&S.value&&(x=new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting&&F&&!z&&requestAnimationFrame((()=>{if(!z&&F)try{O||(O=c(e.target));const t=new CustomEvent("chartVisible",{detail:{options:F}});e.target.dispatchEvent(t),F=null,I()}catch(t){}}))}))}),{threshold:r}),x.observe(S.value)))}catch(a){}},H=e=>{if(!z)try{if(!O)return void V(e);O.setOption(e)}catch(t){}},B=()=>{if(O&&!z)try{O.resize()}catch(e){}},M=()=>{if(z=!0,O)try{O.dispose()}catch(e){}finally{O=null}P.remove(),I(),A&&(clearTimeout(A),A=null),D&&(cancelAnimationFrame(D),D=null),F=null};return v((()=>{window.addEventListener("resize",j)})),f((()=>{window.removeEventListener("resize",j)})),y((()=>{M()})),{isDark:a,chartRef:S,initChart:V,updateChart:H,handleResize:B,destroyChart:M,getChartInstance:()=>O,isChartInitialized:()=>null!==O,emptyStateManager:P,getAxisLineStyle:(e=!0)=>({show:e,lineStyle:k(a.value?"#444":"#EDEDED")}),getSplitLineStyle:(e=!0)=>({show:e,lineStyle:k(a.value?"#444":"#EDEDED",1,"dashed")}),getAxisLabelStyle:(e=!0)=>{const{fontColor:t,fontSize:n}=w();return{show:e,color:t,fontSize:n}},getAxisTickStyle:()=>({show:!1}),getAnimationConfig:(e=50,t=1500)=>({animationDelay:t=>t*e+200,animationDuration:e=>t-50*e,animationEasing:"quarticOut"}),getTooltipStyle:(e="axis",t={})=>l({trigger:e,backgroundColor:a.value?"rgba(0, 0, 0, 0.8)":"rgba(255, 255, 255, 0.9)",borderColor:a.value?"#333":"#ddd",borderWidth:1,textStyle:{color:a.value?"#fff":"#333"}},t),getLegendStyle:(e="bottom",t={})=>{const n=l({textStyle:{color:a.value?"#fff":"#333"},itemWidth:12,itemHeight:12,itemGap:20},t);switch(e){case"bottom":return s(l({},n),{bottom:0,left:"center",orient:"horizontal",icon:"roundRect"});case"top":return s(l({},n),{top:0,left:"center",orient:"horizontal",icon:"roundRect"});case"left":return s(l({},n),{left:0,top:"center",orient:"vertical",icon:"roundRect"});case"right":return s(l({},n),{right:0,top:"center",orient:"vertical",icon:"roundRect"});default:return n}},useChartOps:w,getGridWithLegend:(e,t="bottom",n={})=>{const r=l({top:15,right:15,bottom:8,left:0,containLabel:!0},n);if(!e)return r;switch(t){case"bottom":return s(l({},r),{bottom:40});case"top":return s(l({},r),{top:40});case"left":return s(l({},r),{left:120});case"right":return s(l({},r),{right:120});default:return r}}}}function O(e){const{props:t,generateOptions:n,checkEmpty:r,watchSources:o=[],onVisible:i,chartOptions:a={}}=e,c=S(a),{chartRef:p,initChart:h,isDark:y,emptyStateManager:g}=c,b=u((()=>!!t.isEmpty||!!r&&r())),w=()=>{d((()=>{var e;b.value?(c.getChartInstance()&&(null==(e=c.getChartInstance())||e.clear()),g.create()):(g.remove(),h(n()))}))},E=()=>{i?i():w()};return o.length>0&&m(o,w,{deep:!0}),m(y,(()=>{g.updateStyle(),w()})),v((()=>{w(),p.value&&p.value.addEventListener("chartVisible",E)})),f((()=>{p.value&&p.value.removeEventListener("chartVisible",E),g.remove()})),s(l({},c),{isEmpty:b,updateChart:w,handleChartVisible:E})}export{O as a,S as b,w as u};