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