@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 I,shallowRef as U,reactive as q,watch as h,nextTick as f,computed as H,onMounted as L,onBeforeUnmount as W,resolveComponent as F,resolveDirective as V,createBlock as Q,openBlock as J,withCtx as K,withDirectives as X,createElementVNode as Y,normalizeStyle as Z,normalizeClass as ee,unref as B}from"vue";import{cidGen as te,cssVarGen as ie}from"@techui/scifi";import{tQuery as T,tClass as E,tStr as ae,tType as _}from"@techui/utils";import*as re from"echarts";import{$c as ne}from"@techui/colors";const oe=(e,t,a="358")=>{const i=T.get1stParent(e,".tui-3d-panel");if(!i)return;if(E.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:${ne.darken("none"!=a?a:i,2.5)}`),e.appendChild(r)})),r.insertBefore(e,r.firstChild)}},le=e=>{const t="pathG"+e,a=T.el(`#${t}`);a&&a.remove()},P="TuiEcharts",he=Object.assign({name:P},{__name:"tuiEcharts",props:{width:[Number,String],height:[Number,String],chartOption:{type:Object,required:!0},initOptions:{type:Object,default:()=>({})},loading:{type:Boolean,default:!0},initT3DShadow:{type:Boolean,default:!1},t3DShadowUpdate:{type:String,default:"finished",validator:e=>["rendered","finished"].includes(e)},initHold:{type:Boolean,default:!1},dataOpacity:Number,dataBlur:Number,initDelay:{type:Number,default:0},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"),s=n(),o=te(P),u="echart_"+ae.rdm(),c=e,d=a,p=I(null),v=U(null);let g=null;const m=q({loading:!0,inited:!1,resizing:!0}),b=async()=>{if(p.value)try{if(S(),v.value)return;await f(),v.value=re.init(p.value,"eTheme",{...c.initOptions,renderer:"svg"}),d("chartInit",v.value),v.value.setOption(c.chartOption),y(),await f(),v.value&&d("chartReady",v.value)}catch(e){}},y=()=>{if(!v.value)return;const e=(e,t)=>{v.value&&v.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",(()=>{v.value&&"rendered"==c.t3DShadowUpdate&&w(),d("chartRendered")})),e("finished",(function(){v.value&&("finished"==c.t3DShadowUpdate&&w(),d("chartFinished"),d("update:loading",!1),m.loading=!1,m.inited=!1)}))},w=()=>{if(!p.value)return;let e=!0;const t=T.get1stParent(p.value,".tui-3d-panel");(!t||t&&E.has(t,"is-3doff"))&&(e=!1),c.initT3DShadow&&e?oe(p.value,u):le(u)},O=D("TuiT3DPanel");h((()=>[i.value,c.initT3DShadow,O?.view3d?.value]),(([e,t,a])=>{w()})),h((()=>r.value),(async e=>{v.value&&(await f(),v.value.setTheme("eTheme"))}));const S=()=>{v.value&&(v.value.dispose(),v.value=null)},z=()=>{v.value&&v.value.resize()};h((()=>c.initHold),(e=>{e||b()})),h((()=>c.chartOption),(()=>{v.value&&f((()=>{v.value&&(v.value.setOption(c.chartOption),m.loading=!1,d("update:loading",!1))}))}),{deep:!0}),h((()=>c.loading),(e=>{null!=e&&(m.loading=e)}),{immediate:!0});const k=H((()=>ie("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"}})));h((()=>l.value),((e,t)=>{"root"==s.value(c.resizeObserver)&&e>t&&C()}));const C=async()=>{m.resizing=!0,z(),await f(),setTimeout((()=>{m?.resizing&&(m.resizing=!1)}),500)};return L((()=>{c.initHold||(c.initDelay>0?g=setTimeout((()=>{g=null,p.value&&b()}),c.initDelay):f((()=>{b()})))})),W((()=>{g&&(clearTimeout(g),g=null),S()})),t({resize:z,getChart:()=>v.value,setOption:(e,t)=>{v.value&&v.value.setOption(e,t)},clear:()=>{v.value&&v.value.clear()},dispose:S}),(t,a)=>{const i=F("TuiLoaderPanel"),r=V("tui-resize");return J(),Q(i,{loading:m.loading,inited:m.inited},{default:K((()=>[X(Y("div",{ref_key:"chartRef",ref:p,class:ee(["tui-echarts",{"is-resizing":m.resizing}]),style:Z(k.value)},null,6),[[r,{callback:C,uid:u,cid:B(o),disabled:"self"!=B(s)(e.resizeObserver)}]])])),_:1},8,["loading","inited"])}}});export{he as default};