@techui/scifi/dist/modules/tuiEchartsMap.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{nextTick as y,markRaw as Q,inject as W,ref as Z,shallowRef as I,reactive as ee,computed as T,watch as b,onMounted as te,onBeforeUnmount as ae,resolveComponent as ie,resolveDirective as re,createBlock as oe,openBlock as C,withCtx as ne,withDirectives as le,createElementBlock as D,createCommentVNode as ue,createElementVNode as B,normalizeStyle as x,normalizeClass as ce,unref as N,Fragment as se,renderList as de,toDisplayString as fe}from"vue";import{cidGen as pe,cssVarGen as ve}from"@techui/scifi";import{tEvent as me,tStr as ge,tType as j}from"@techui/utils";import*as U from"echarts";const he=(e,a,t,i,l)=>{if(!e.value)return;const r=(a,t)=>{e.value&&e.value.on(a,t)};r("click",me.debounce((t=>{let l,r=t;if(t.value&&!a.chartOption.geo3D)l=e.value.convertToPixel("geo",[t.value[0],t.value[1]]),r.domPosition=l;else if("geo"==t.componentType&&t.event?.offsetX){const{offsetX:a,offsetY:i}=t.event;l=e.value.convertFromPixel("geo",[a,i]),r.coordPosition=l}i("chartClick",r,t)}),500,!0)),r("dblclick",(e=>i("chartDblClick",e))),r("mousedown",(e=>i("chartMouseDown",e))),r("mouseup",(e=>i("chartMouseUp",e))),r("mouseover",(e=>i("chartMouseOver",e))),r("globalout",(e=>i("chartGlobalOut",e))),r("geoRoam",(e=>i("chartGeoRoam",e))),r("timelinechanged",(t=>{const{allAreaCodes:l,chartOption:{timeline:r}}=a;let o=t;if("geoTitle"==r.titleType){let a=r.data[t.currentIndex],i=l.find((e=>e.name.includes(a))),n=e.value.convertToPixel("geo",[i.lng,i.lat]);o.domPosition=n,o.current=i}i("chartTimelinechanged",o)})),r("rendered",(()=>{e.value&&"rendered"===a.t3DShadowUpdate&&P(l),i("chartRendered")})),r("finished",(()=>{e.value&&("finished"===a.t3DShadowUpdate&&P(l),i("chartFinished"),i("update:loading",!1),t.loading=!1,t.inited=!0)}))},P=e=>{e.value},be=e=>{e.value&&e.value.resize()},ye=e=>e.value,Oe=(e,a,t)=>{e.value&&e.value.setOption(a,t)},Ce=e=>{e.value&&e.value.clear()},ke=e=>{if(e.value)try{const a=e.value.getOption();a.geo&&a.geo[0]&&(a.geo[0].roam=!0,a.geo[0].zoom=1,a.geo[0].center=null,e.value.setOption(a,!1))}catch(e){}},G=(e,a)=>{try{return!!a&&(U.registerMap(e,a),!0)}catch(e){return!1}},we=async(e,a,t,i,l,r)=>{if(e.value)try{if(F(a),a.value)return;if(!G(t.mapName,t.geoJsonData))return;await y(),a.value=Q(U.init(e.value,"eTheme",{...t.initOptions,notMerge:!1})),l("chartInit",a.value),a.value.setOption(t.chartOption),r(),await y(),a.value&&l("chartReady",a.value)}catch(e){}},ze=(e,a,t,i,l=!1)=>{e.value&&(e.value.setOption(a,l),t.loading=!1,i("update:loading",!1),i("chartUpdate"))},F=e=>{e.value&&(e.value.dispose(),e.value=null)},Te=["onClick"],De={class:"breadcrumb-text"},E="TuiEchartsMap",Se=Object.assign({name:E},{__name:"tuiEchartsMap",props:{width:[Number,String],height:[Number,String],chartOption:{type:Object,required:!0},geoJsonData:{type:Object,required:!0},allAreaCodes:Object,mapName:{type:String,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)},updateReplace:{type:Boolean,default:!0},enableBreadcrumb:{type:Boolean,default:!1},breadcrumbConfig:{type:Object,default:()=>({data:[{code:1e5,name:"全国"}],position:{top:"5%",left:"5%"}})}},emits:["chartClick","chartDblClick","chartMouseDown","chartMouseUp","chartMouseOver","chartGlobalOut","chartInit","chartReady","chartRendered","chartFinished","chartGeoRoam","chartUpdate","chartTimelinechanged","breadcrumbClick","update:loading"],setup(e,{expose:a,emit:t}){const{$gT3D:i,$gTheme:l,$optResizeCounter:r,initResizeBy:o}=W("$global"),n=o(),u=pe(E),s="echart_map_"+ge.rdm(),c=Z(null),d=I(null);let p=null;const m=e,h=t,v=ee({loading:!0,inited:!1,resizing:!0}),g=T((()=>m.breadcrumbConfig?.data||[])),f=T((()=>{let e=m.breadcrumbConfig?.position||{},a={};for(let t in e)"number"==typeof e[t]?a[t]=e[t]+"px":a[t]=e[t];return a})),O=async()=>{await we(c,d,m,0,h,k,m.updateReplace)},w=()=>{ze(d,m.chartOption,v,h,m.updateReplace)},k=()=>{he(d,m,v,h,c)},z=()=>{F(d)},R=()=>{be(d)},S=T((()=>ve("cpt-echart-map",{...m.width&&{width:j.join("number",m.width,"px")},...m.height&&{height:j.join("number",m.height,"px")},...m.dataOpacity&&{opa:m.dataOpacity},...m.dataBlur&&{blur:m.dataBlur+"px"}})));b((()=>m.geoJsonData),(()=>{d.value&&(G(m.mapName,m.geoJsonData),y((()=>{w()})))}),{deep:!0}),b((()=>m.initHold),(e=>{e||O()})),b((()=>m.chartOption),(()=>{d.value&&y((()=>{w()}))}),{deep:!0}),b((()=>m.loading),(e=>{void 0!==e&&(v.loading=e)}),{immediate:!0}),b((()=>l.value),(e=>{d.value&&d.value.setTheme("eTheme")})),b((()=>r.value),((e,a)=>{"root"==n.value(m.resizeObserver)&&e>a&&M()}));const M=async()=>{v.resizing=!0,R(),await y(),setTimeout((()=>{v?.resizing&&(v.resizing=!1)}),500)};return te((()=>{m.initHold||(m.initDelay>0?p=setTimeout((()=>{p=null,c.value&&O()}),m.initDelay):y((()=>{O()})))})),ae((()=>{p&&(clearTimeout(p),p=null),z()})),a({resize:R,getChart:()=>ye(d),setOption:(e,a)=>{Oe(d,e,a)},clear:()=>{Ce(d)},resetMapView:()=>{ke(d)},dispose:z}),(a,t)=>{const i=ie("TuiLoaderPanel"),l=re("tui-resize");return C(),oe(i,{loading:v.loading,inited:v.inited},{default:ne((()=>[le(B("div",{ref_key:"mapRef",ref:c,class:ce(["tui-echarts-map",{"is-resizing":v.resizing}]),style:x(S.value)},null,6),[[l,{callback:M,uid:s,cid:N(u),disabled:"self"!=N(n)(e.resizeObserver)}]]),e.enableBreadcrumb&&g.value.length>0?(C(),D("div",{key:0,class:"tui-map-breadcrumb",style:x(f.value)},[(C(!0),D(se,null,de(g.value,((e,a)=>(C(),D("div",{key:`${e.code}-${a}`,class:"breadcrumb-item",onClick:t=>((e,a)=>{const t=g.value.slice(0,a+1);h("breadcrumbClick",{item:e,index:a,breadcrumb:t,chart:d.value})})(e,a)},[B("span",De,fe(e.name),1)],8,Te)))),128)),t[0]||(t[0]=B("i",{class:"tui-icon ti-map breadcrumb-icon"},null,-1))],4)):ue("",!0)])),_:1},8,["loading","inited"])}}});export{Se as default};