@techui/scifi/dist/modules/tuiEcharts.js

TechUI Scifi is a sci-fi SVG component library developed based on Vue3. It uses dynamically calculated SVG elements to generate a variety of cool, futuristic, and technological components.

import{inject as D,ref as U,shallowRef as q,reactive as L,computed as B,watch as v,nextTick as h,onMounted as W,onBeforeUnmount as F,resolveComponent as V,resolveDirective as H,createBlock as Q,openBlock as J,withCtx as K,withDirectives as X,renderSlot as Y,createElementVNode as Z,normalizeStyle as ee,normalizeClass as te,unref as P}from"vue";import{cidGen as ie,cssVarGen as ae}from"@techui/scifi";import{tQuery as z,tClass as R,tStr as re,tType as _}from"@techui/utils";import*as ne from"echarts";import{$c as oe}from"@techui/colors";const se=(e,t,a="358")=>{const i=z.get1stParent(e,".tui-3d-panel");if(!i)return;if(R.has(i,"is-3doff"))return;if(!(e&&e instanceof HTMLElement&&"string"==typeof t&&""!==t.trim()))return;const r=e.querySelector("svg");if(!r)return;const l="pathG"+t,n=r.querySelector(`g#${CSS.escape(l)}`);n&&r.removeChild(n);const s=r.querySelectorAll("path"),o=[];if(s.forEach((e=>{const t=e.getAttribute("stroke-width");null!=t&&""!==t.trim()&&String(t).includes(a)&&o.push(e)})),o.length>0){const e=document.createElementNS("http://www.w3.org/2000/svg","g");e.setAttribute("id",l),o.forEach((t=>{const a=t.getAttribute("fill"),i=t.getAttribute("stroke");t.setAttribute("class","ori-svg-item");const r=t.cloneNode(!0);r.setAttribute("class","t3d-shadow-item"),r.setAttribute("style",`--tui-t3d-thickcolor:${oe.darken("none"!=a?a:i,2.5)}`),e.appendChild(r)})),r.insertBefore(e,r.firstChild)}},le=e=>{const t="pathG"+e,a=z.el(`#${t}`);a&&a.remove()},E="TuiEcharts",fe=Object.assign({name:E},{__name:"tuiEcharts",props:{width:[Number,String],height:[Number,String],chartOption:{type:Object,required:!0},initOptions:{type:Object,default:()=>({})},loading:{type:Boolean,default:null},initT3DShadow:{type:Boolean,default:!1},t3DShadowUpdate:{type:String,default:"finished",validator:e=>["rendered","finished"].includes(e)},renderer:{type:String,default:"canvas",validator:e=>["svg","canvas"].includes(e)},ready:{type:Boolean,default:!1},dataOpacity:Number,dataBlur:Number,resizeObserver:{type:String,default:"global",validator:e=>["self","global","none"].includes(e)}},emits:["chartClick","chartDblClick","chartMouseDown","chartMouseUp","chartMouseOver","chartGlobalOut","chartInit","chartReady","chartRendered","chartFinished","update:loading"],setup(e,{expose:t,emit:a}){const{$gT3D:i,$gTheme:r,$optResizeCounter:l,initResizeBy:n}=D("$global",null),s=n(),o=ie(E),u="echart_"+re.rdm(),c=e,d=a,p=U(null),f=q(null),g=L({loading:!0,inited:!1,resizing:!0}),m=B({get:()=>c.loading??g.loading,set:e=>{null!==c.loading?d("update:loading",e):g.loading=e}}),b=async()=>{if(p.value)try{if(S(),f.value)return;await h(),f.value=ne.init(p.value,"eTheme",{...c.initOptions,renderer:c.initT3DShadow?"svg":c.renderer}),d("chartInit",f.value),f.value.setOption(c.chartOption),y(),await h(),f.value&&(d("chartReady",f.value),m.value=!1)}catch(e){console.error("ECharts initialization failed:",e)}},y=()=>{if(!f.value)return;const e=(e,t)=>{f.value&&f.value.on(e,t)};e("click",(e=>d("chartClick",e))),e("dblclick",(e=>d("chartDblClick",e))),e("mousedown",(e=>d("chartMouseDown",e))),e("mouseup",(e=>d("chartMouseUp",e))),e("mouseover",(e=>d("chartMouseOver",e))),e("globalout",(e=>d("chartGlobalOut",e))),e("rendered",(()=>{f.value&&"rendered"==c.t3DShadowUpdate&&w(),d("chartRendered")})),e("finished",(function(){f.value&&("finished"==c.t3DShadowUpdate&&w(),d("chartFinished"),m.value=!1,g.inited=!1)}))},w=()=>{if(!p.value)return;let e=!0;const t=z.get1stParent(p.value,".tui-3d-panel");(!t||t&&R.has(t,"is-3doff"))&&(e=!1),c.initT3DShadow&&e?se(p.value,u):le(u)},O=D("TuiT3DPanel",null);v((()=>[i.value,c.initT3DShadow,O?.view3d?.value]),(([e,t,a])=>{w()})),v((()=>r.value),(async e=>{f.value&&(await h(),f.value.setTheme("eTheme"))}));const S=()=>{f.value&&(f.value.dispose(),f.value=null)},T=()=>{f.value&&f.value.resize()};v((()=>c.ready),(e=>{e&&b()})),v((()=>c.chartOption),(()=>{f.value&&h((()=>{f.value&&(f.value.setOption(c.chartOption),m.value=!1)}))}),{deep:!0});const C=B((()=>ae("cpt-echart",{...c.width&&{width:_.join("number",c.width,"px")},...c.height&&{height:_.join("number",c.height,"px")},...c.dataOpacity&&{opa:c.dataOpacity},...c.dataBlur&&{blur:c.dataBlur+"px"}})));v((()=>l.value),((e,t)=>{"root"==s.value(c.resizeObserver)&&e>t&&k()}));const k=async()=>{g.resizing=!0,T(),await h(),setTimeout((()=>{g?.resizing&&(g.resizing=!1)}),500)};return W((()=>{c.ready&&h((()=>{b()}))})),F((()=>{S()})),t({resize:T,getChart:()=>f.value,setOption:(e,t)=>{f.value&&f.value.setOption(e,t)},clear:()=>{f.value&&f.value.clear()},initChart:b,dispose:S}),(t,a)=>{const i=V("TuiLoaderPanel"),r=H("tui-resize");return J(),Q(i,{loading:m.value,inited:g.inited},{default:K((()=>[X(Z("div",{ref_key:"chartRef",ref:p,class:te(["tui-echarts",{"is-resizing":g.resizing}]),style:ee(C.value)},null,6),[[r,{callback:k,uid:u,cid:P(o),disabled:"self"!=P(s)(e.resizeObserver)}]]),Y(t.$slots,"default")])),_:3},8,["loading","inited"])}}});export{fe as default};