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

TechUI Base is a basic component library developed based on Vue

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/base";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};