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

TechUI Prime is a paid component library developed based on Vue3, which includes three component libraries: TehcUI Admin, TechUI Base, and TechUI Scifi. These three component libraries can be used independently and are free.

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