import{f as T,o as U,e as h,g as D,w as F,aH as j,H as P,n as W,J as M,I as N,h as a,aO as d,a7 as H,aP as X,aQ as G,aR as J,aS as K,aT as Q,aU as Y,aV as Z,aW as _,aX as q,aY as I,aZ as ee,a_ as ae,a$ as te,b0 as se,b1 as ne,b2 as ue,b3 as ie,b4 as oe,r as le,t as re,b5 as o,ar as u,aK as ce,p as O}from"./.pnpm-8379147f.js";import{e as de,i as x,o as he,j as fe,k as R}from"./index-c4f56c3c.js";const k=e=>Object.assign({},{text:"loading",color:"#c23531",textColor:"#000",maskColor:"rgba(255, 255, 255, 0.9)",zlevel:0,fontSize:12,showSpinner:!0,spinnerRadius:10,lineWidth:5,fontWeight:"normal",fontStyle:"normal",fontFamily:"sans-serif"},e),c=T({name:"RayChart",props:{width:{type:String,default:"100%"},height:{type:String,default:"100%"},autoResize:{type:[Boolean,Object],default:!0},canvasRender:{type:Boolean,default:!0},showAria:{type:Boolean,default:!1},options:{type:Object,default:()=>({})},success:{type:Function,default:()=>({})},error:{type:Function,default:()=>({})},theme:{type:[String,Object],default:""},autoChangeTheme:{type:Boolean,default:!1},use:{type:Array,default:()=>[]},watchOptions:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingOptions:{type:Object,default:()=>k()}},setup(e,{expose:E}){const f=de(),{themeValue:l}=U(f),b=h(),g=h();let t,y;const p=D(()=>({"--ray-chart-width":x(e.width),"--ray-chart-height":x(e.height)})),A=D(()=>k(e.loadingOptions)),i=async()=>{d([G,J,K,Q,Y,Z,_,q]),d([I,ee,ae,te,se,ne]),d([ue,ie]),d([oe]);try{d(e.use)}catch{console.error("Error: wrong property and method passed in extend attribute")}},w=()=>{let s=H(e.options);const r=m=>Object.assign({},s,m);return e.showAria&&(s=r({aria:{enabled:!0,decal:{show:!0}}})),s},n=s=>{var v,B;const r=b.value,m=w(),{height:L,width:V}=r.getBoundingClientRect();L===0&&R(r,{height:"200px"}),V===0&&R(r,{width:"200px"});try{t=X(r,s),g.value=t,m&&t.setOption(m),(v=e.success)==null||v.call(e,t)}catch(z){(B=e.error)==null||B.call(e),console.error(z)}},S=s=>{if(e.autoChangeTheme){n(s?"dark":"");return}e.theme||n("")},C=()=>{t&&(t.clear(),t.dispose())},$=()=>{t&&t.resize()};return F(()=>[l.value],([s])=>{e.autoChangeTheme&&(C(),S(s))}),F(()=>e.showAria,()=>{C(),(e.autoChangeTheme||e.theme)&&l.value?n("dark"):n("")}),F(()=>e.loading,s=>{s?t==null||t.showLoading(A.value):t==null||t.hideLoading()}),e.watchOptions&&F(()=>e.watchOptions,()=>{const s=w();t==null||t.setOption(s)}),j(async()=>{await i()}),P(()=>{W(()=>{e.autoChangeTheme?S(l.value):e.theme?n("dark"):n(""),e.autoResize&&(y=M($,500),he(window,"resize",y))})}),N(()=>{C(),fe(window,"resize",y)}),E({echart:g}),{rayChartRef:b,cssVarsRef:p,echartInstance:g}},render(){return a("div",{class:"ray-chart",style:[this.cssVarsRef],ref:"rayChartRef"},null)}}),me=T({name:"REchart",setup(){const e=h(),E=h(!1),f=h(!1),l=le({loading:!1});return{baseOptions:{legend:{},tooltip:{},xAxis:{type:"category",data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},yAxis:{type:"value"},series:[{name:"日期",data:[120,200,150,80,70,110,130],type:"bar",showBackground:!0,backgroundStyle:{color:"rgba(180, 180, 180, 0.2)"}}]},baseChartRef:e,chartLoading:E,handleLoadingShow:i=>{l.loading=i},chartAria:f,handleAriaShow:i=>{f.value=i},handleChartRenderSuccess:i=>{window.$notification.info({title:"可视化图渲染成功回调函数",content:"可视化图渲染成功, 并且返回了当前可视化图实例",duration:5*1e3}),e.value},basePieOptions:{title:{text:"Referer of a Website",subtext:"Fake Data",left:"center"},tooltip:{trigger:"item"},legend:{orient:"vertical",left:"left"},series:[{name:"Access From",type:"pie",radius:"50%",data:[{value:1048,name:"Search Engine"},{value:735,name:"Direct"},{value:580,name:"Email"},{value:484,name:"Union Ads"},{value:300,name:"Video Ads"}],emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(0, 0, 0, 0.5)"}}}]},baseLineOptions:{title:{text:"Stacked Area Chart"},tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#6a7985"}}},legend:{data:["Email","Union Ads","Video Ads","Direct","Search Engine"]},toolbox:{feature:{saveAsImage:{}}},grid:{left:"3%",right:"4%",bottom:"3%",containLabel:!0},xAxis:[{type:"category",boundaryGap:!1,data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}],yAxis:[{type:"value"}],series:[{name:"Email",type:"line",stack:"Total",areaStyle:{},emphasis:{focus:"series"},data:[120,132,101,134,90,230,210]},{name:"Union Ads",type:"line",stack:"Total",areaStyle:{},emphasis:{focus:"series"},data:[220,182,191,234,290,330,310]},{name:"Video Ads",type:"line",stack:"Total",areaStyle:{},emphasis:{focus:"series"},data:[150,232,201,154,190,330,410]},{name:"Direct",type:"line",stack:"Total",areaStyle:{},emphasis:{focus:"series"},data:[320,332,301,334,390,330,320]},{name:"Search Engine",type:"line",stack:"Total",label:{show:!0,position:"top"},areaStyle:{},emphasis:{focus:"series"},data:[820,932,901,934,1290,1330,1320]}]},...re(l)}},render(){return a("div",{class:"echart"},[a(o,null,{default:()=>[u("RayChart 组件使用")]}),a(ce,null,{default:()=>[u("该组件会默认以 200*200 宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use 方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用")]}),a(o,null,{default:()=>[u("基础使用")]}),a("div",{class:"chart--container"},[a(c,{options:this.baseOptions},null)]),a(o,null,{default:()=>[u("渲染成功后运行回调函数")]}),a("div",{class:"chart--container"},[a(c,{ref:"baseChartRef",options:this.basePieOptions,success:this.handleChartRenderSuccess.bind(this)},null)]),a(o,null,{default:()=>[u("能跟随主题切换的可视化图")]}),a("div",{class:"chart--container"},[a(c,{autoChangeTheme:!0,options:this.baseLineOptions,showAria:this.chartAria},null)]),a(o,null,{default:()=>[u("不跟随主题切换的暗色主题可视化图")]}),a("div",{class:"chart--container"},[a(c,{theme:"dark",options:this.baseOptions},null)]),a(o,null,{default:()=>[u("加载动画")]}),a(O,{value:this.chartLoading,"onUpdate:value":e=>this.chartLoading=e,onUpdateValue:this.handleLoadingShow.bind(this),style:["padding: 18px 0"]},{checked:()=>"隐藏加载动画",unchecked:()=>"显示加载动画"}),a("div",{class:"chart--container"},[a(c,{loading:this.loading,options:this.baseOptions},null)]),a(o,null,{default:()=>[u("贴画可视化图")]}),a(O,{value:this.chartAria,"onUpdate:value":e=>this.chartAria=e,onUpdateValue:this.handleAriaShow.bind(this),style:["padding: 18px 0"]},{checked:()=>"隐藏贴花",unchecked:()=>"显示贴花"}),a("div",{class:"chart--container"},[a(c,{options:this.baseOptions,showAria:this.chartAria},null)])])}});export{me as default};