import{t as j,c as M}from"./lodash-es@4.17.21-b7de4195.js";import{s as N}from"./pinia@2.1.4_typescript@5.0.2_vue@3.3.4-ab93b4ec.js";import{e as P,i as D,o as W,j as q,k as O,l as k}from"./index-6cc317bd.js";import{u as h,i as G,a as H,b as X,c as Y,d as _,e as J,f as K,g as Q,h as Z,j as I,k as ee,l as te,m as ae,n as se,o as ie,p as oe,q as ne,r as ue}from"./echarts@5.4.0-40235ba7.js";import{k as $,A as x,m as y,v as re,f as le,n as ce,t as de,b as t,p as o}from"./@vue_runtime-core@3.3.4-073fad6e.js";import{k as p,h as he,v as pe}from"./@vue_reactivity@3.3.4-2b3a1c4e.js";import{_ as u,Y as me,e as R}from"./naive-ui@2.34.4_vue@3.3.4-eb250861.js";import"./vue-demi@0.14.5_vue@3.3.4-71ba0ef2.js";import"./vue-router@4.2.4_vue@3.3.4-4991130b.js";import"./vue-i18n@9.2.2_vue@3.3.4-a7a92bd0.js";import"./@intlify_shared@9.2.2-e4047ebf.js";import"./@intlify_core-base@9.2.2-a0a8715c.js";import"./@intlify_message-compiler@9.2.2-8a818441.js";import"./@intlify_devtools-if@9.2.2-c61c979f.js";import"./dayjs@1.11.7-adc18375.js";import"./@babel_runtime@7.22.6-960cbc2f.js";import"./screenfull@6.0.2-b3e6dc1f.js";import"./@vue_runtime-dom@3.3.4-d86573ec.js";import"./@vue_shared@3.3.4-896c5ecf.js";import"./@vueuse_core@9.1.0_vue@3.3.4-f4b6b7e2.js";import"./@vueuse_shared@9.1.0_vue@3.3.4-e5bccb39.js";import"./pinia-plugin-persistedstate@3.1.0_pinia@2.1.4-4f3b1591.js";import"./clipboard@2.0.11-6193b289.js";import"./date-fns@2.30.0-0bf1b710.js";import"./vueuc@0.4.51_vue@3.3.4-6588b5bd.js";import"./evtd@0.2.4-b614532e.js";import"./seemly@0.3.6-dc6f1e91.js";import"./@css-render_vue3-ssr@0.15.12_vue@3.3.4-24369cc5.js";import"./vooks@0.2.12_vue@3.3.4-59877c34.js";import"./vdirs@0.1.8_vue@3.3.4-4519c5fd.js";import"./@juggle_resize-observer@3.4.0-41516555.js";import"./css-render@0.15.12-57b1a53f.js";import"./@emotion_hash@0.8.0-8a8e73f6.js";import"./treemate@0.3.11-25c27bff.js";import"./date-fns-tz@1.3.8_date-fns@2.30.0-7cff6900.js";import"./async-validator@4.2.5-dee29e8b.js";import"./@css-render_plugin-bem@0.15.12_css-render@0.15.12-9dde7ffe.js";import"./zrender@5.4.0-1cedba25.js";import"./tslib@2.3.0-54e39b60.js";const T=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=$({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,Array],default:null},error:{type:[Function,Array],default:null},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:()=>T()}},setup(e,{expose:F}){const m=P(),{themeValue:r}=N(m),C=p(),f=p();let a,d;const b=x(()=>({"--ray-chart-width":D(e.width),"--ray-chart-height":D(e.height)})),A=x(()=>T(e.loadingOptions)),n=async()=>{h([H,X,Y,_,J,K,Q,Z]),h([I,ee,te,ae,se,ie]),h([oe,ne]),h([ue]);try{h(e.use)}catch{console.error("Error: wrong property and method passed in extend attribute")}},w=()=>{let s=M(e.options);const l=g=>Object.assign({},s,g);return e.showAria&&(s=l({aria:{enabled:!0,decal:{show:!0}}})),s},i=s=>{const l=C.value,g=w(),{height:V,width:z}=l.getBoundingClientRect(),{success:S,error:B}=e;V===0&&O(l,{height:"200px"}),z===0&&O(l,{width:"200px"});try{a=G(l,s),f.value=a,g&&a.setOption(g),S&&k(S,a)}catch(U){B&&k(B),console.error("RayChart render error: ",U)}},v=s=>{if(e.autoChangeTheme){i(s?"dark":"");return}e.theme||i("")},E=()=>{a&&(a.clear(),a.dispose())},L=()=>{a&&a.resize()};return y(()=>[r.value],([s])=>{e.autoChangeTheme&&(E(),v(s))}),y(()=>e.showAria,()=>{E(),(e.autoChangeTheme||e.theme)&&r.value?i("dark"):i("")}),y(()=>e.loading,s=>{s?a==null||a.showLoading(A.value):a==null||a.hideLoading()}),e.watchOptions&&y(()=>e.watchOptions,()=>{const s=w();a==null||a.setOption(s)}),re(async()=>{await n()}),le(()=>{ce(()=>{e.autoChangeTheme?v(r.value):e.theme?i("dark"):i(""),e.autoResize&&(d=j(L,1e3),W(window,"resize",d))})}),de(()=>{E(),q(window,"resize",d),d.cancel()}),F({echart:f}),{rayChartRef:C,cssVarsRef:b,echartInstance:f}},render(){return t("div",{class:"ray-chart",style:[this.cssVarsRef],ref:"rayChartRef"},null)}}),et=$({name:"REchart",setup(){const e=p(),F=p(!1),m=p(!1),r=he({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:F,handleLoadingShow:n=>{r.loading=n},chartAria:m,handleAriaShow:n=>{m.value=n},handleChartRenderSuccess:n=>{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]}]},...pe(r)}},render(){return t("div",{class:"echart"},[t(u,null,{default:()=>[o("RayChart 组件使用")]}),t(me,null,{default:()=>[o("该组件会默认以 200*200 宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use 方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用")]}),t(u,null,{default:()=>[o("基础使用")]}),t("div",{class:"chart--container"},[t(c,{options:this.baseOptions},null)]),t(u,null,{default:()=>[o("渲染成功后运行回调函数")]}),t("div",{class:"chart--container"},[t(c,{ref:"baseChartRef",options:this.basePieOptions,success:this.handleChartRenderSuccess.bind(this)},null)]),t(u,null,{default:()=>[o("能跟随主题切换的可视化图")]}),t("div",{class:"chart--container"},[t(c,{autoChangeTheme:!0,options:this.baseLineOptions,showAria:this.chartAria},null)]),t(u,null,{default:()=>[o("不跟随主题切换的暗色主题可视化图")]}),t("div",{class:"chart--container"},[t(c,{theme:"dark",options:this.baseOptions},null)]),t(u,null,{default:()=>[o("加载动画")]}),t(R,{value:this.chartLoading,"onUpdate:value":e=>this.chartLoading=e,onUpdateValue:this.handleLoadingShow.bind(this),style:["padding: 18px 0"]},{checked:()=>"隐藏加载动画",unchecked:()=>"显示加载动画"}),t("div",{class:"chart--container"},[t(c,{loading:this.loading,options:this.baseOptions},null)]),t(u,null,{default:()=>[o("贴画可视化图")]}),t(R,{value:this.chartAria,"onUpdate:value":e=>this.chartAria=e,onUpdateValue:this.handleAriaShow.bind(this),style:["padding: 18px 0"]},{checked:()=>"隐藏贴花",unchecked:()=>"显示贴花"}),t("div",{class:"chart--container"},[t(c,{options:this.baseOptions,showAria:this.chartAria},null)])])}});export{et as default};