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

TechUI Admin is an easy-to-use workbench component library developed based on Vue, with built-in dynamic routing, dynamic menu and TechUI Base component library.

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/admin";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(),d=e,c=a,p=U(null),f=q(null),g=L({loading:!0,inited:!1,resizing:!0}),m=B({get:()=>d.loading??g.loading,set:e=>{null!==d.loading?c("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",{...d.initOptions,renderer:d.initT3DShadow?"svg":d.renderer}),c("chartInit",f.value),f.value.setOption(d.chartOption),y(),await h(),f.value&&(c("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=>c("chartClick",e))),e("dblclick",(e=>c("chartDblClick",e))),e("mousedown",(e=>c("chartMouseDown",e))),e("mouseup",(e=>c("chartMouseUp",e))),e("mouseover",(e=>c("chartMouseOver",e))),e("globalout",(e=>c("chartGlobalOut",e))),e("rendered",(()=>{f.value&&"rendered"==d.t3DShadowUpdate&&w(),c("chartRendered")})),e("finished",(function(){f.value&&("finished"==d.t3DShadowUpdate&&w(),c("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),d.initT3DShadow&&e?se(p.value,u):le(u)},O=D("TuiT3DPanel",null);v((()=>[i.value,d.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((()=>d.ready),(e=>{e&&b()})),v((()=>d.chartOption),(()=>{f.value&&h((()=>{f.value&&(f.value.setOption(d.chartOption),m.value=!1)}))}),{deep:!0});const C=B((()=>ae("cpt-echart",{...d.width&&{width:_.join("number",d.width,"px")},...d.height&&{height:_.join("number",d.height,"px")},...d.dataOpacity&&{opa:d.dataOpacity},...d.dataBlur&&{blur:d.dataBlur+"px"}})));v((()=>l.value),((e,t)=>{"root"==s.value(d.resizeObserver)&&e>t&&k()}));const k=async()=>{g.resizing=!0,T(),await h(),setTimeout((()=>{g?.resizing&&(g.resizing=!1)}),500)};return W((()=>{d.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};