ray-template/assets/index-0b97e673.js

import{s as z}from"./pinia-be260704.js";import{d as U,c as j}from"./lodash-es-de060e62.js";import{c as M,o as N,d as P,e as D}from"./index-95ae5381.js";import{u as d,i as W,a as X,b as q,c as G,d as H,e as J,f as K,g as Q,h as Y,j as Z,k as _,l as I,m as ee,n as te,o as ae,p as se,q as ie,r as ne}from"./echarts-d6944f71.js";import{e as R,r as h,l as O,w as y,h as ue,o as oe,n as le,f as re,ac as t,E as ce,M as de,c as n}from"./@vue-ca1d80d4.js";import{X as o,V as he,n as x}from"./naive-ui-7856b6f0.js";import"./vue-demi-71ba0ef2.js";import"./vue-i18n-be16ad6b.js";import"./@intlify-deb68647.js";import"./vue-router-82e9991c.js";import"./@vueuse-108ac41f.js";import"./screenfull-b3e6dc1f.js";import"./pinia-plugin-persistedstate-d93b4f94.js";import"./date-fns-b95abe94.js";import"./vueuc-6e7de9b2.js";import"./evtd-b614532e.js";import"./seemly-dc6f1e91.js";import"./@css-render-4074ab64.js";import"./vooks-bade9760.js";import"./vdirs-b0483831.js";import"./@juggle-41516555.js";import"./css-render-d3958e6a.js";import"./@emotion-8a8e73f6.js";import"./treemate-25c27bff.js";import"./date-fns-tz-106dba0e.js";import"./async-validator-dee29e8b.js";import"./zrender-d1c4172f.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=R({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:F}){const f=M(),{themeValue:l}=z(f),E=h(),m=h();let a,p;const b=O(()=>({"--ray-chart-width":e.width,"--ray-chart-height":e.height})),A=O(()=>k(e.loadingOptions)),u=async()=>{d([X,q,G,H,J,K,Q,Y]),d([Z,_,I,ee,te,ae]),d([se,ie]),d([ne]);try{d(e.use)}catch{console.error("Error: wrong property and method passed in extend attribute")}},w=()=>{let s=j(e.options);const r=g=>Object.assign({},s,g);return e.showAria&&(s=r({aria:{enabled:!0,decal:{show:!0}}})),s},i=s=>{var B,S;const r=E.value,g=w(),{height:$,width:L}=r.getBoundingClientRect();$===0&&D(r,{height:"200px"}),L===0&&D(r,{width:"200px"});try{a=W(r,s),m.value=a,g&&a.setOption(g),(B=e.success)==null||B.call(e,a)}catch(V){(S=e.error)==null||S.call(e),console.error(V)}},v=s=>{if(e.autoChangeTheme){i(s?"dark":"");return}e.theme||i("")},C=()=>{a&&(a.clear(),a.dispose())},T=()=>{a&&a.resize()};return y(()=>[l.value],([s])=>{e.autoChangeTheme&&(C(),v(s))}),y(()=>e.showAria,()=>{C(),(e.autoChangeTheme||e.theme)&&l.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)}),ue(async()=>{await u()}),oe(()=>{le(()=>{e.autoChangeTheme?v(l.value):e.theme?i("dark"):i(""),e.autoResize&&(p=U(T,500),N(window,"resize",p))})}),re(()=>{C(),P(window,"resize",p)}),F({echart:m}),{rayChartRef:E,cssVarsRef:b,echartInstance:m}},render(){return t("div",{class:"ray-chart",style:[this.cssVarsRef],ref:"rayChartRef"},null)}}),Ne=R({name:"Echart",setup(){const e=h(),F=h(!1),f=h(!1),l=ce({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:u=>{l.loading=u},chartAria:f,handleAriaShow:u=>{f.value=u},handleChartRenderSuccess:u=>{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]}]},...de(l)}},render(){return t("div",{class:"echart"},[t(o,null,{default:()=>[n("RayChart 组件使用")]}),t(he,null,{default:()=>[n("该组件会默认以 200*200 宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use 方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用")]}),t(o,null,{default:()=>[n("基础使用")]}),t("div",{class:"chart--container"},[t(c,{options:this.baseOptions},null)]),t(o,null,{default:()=>[n("渲染成功后运行回调函数")]}),t("div",{class:"chart--container"},[t(c,{ref:"baseChartRef",options:this.basePieOptions,success:this.handleChartRenderSuccess.bind(this)},null)]),t(o,null,{default:()=>[n("能跟随主题切换的可视化图")]}),t("div",{class:"chart--container"},[t(c,{autoChangeTheme:!0,options:this.baseLineOptions,showAria:this.chartAria},null)]),t(o,null,{default:()=>[n("不跟随主题切换的暗色主题可视化图")]}),t("div",{class:"chart--container"},[t(c,{theme:"dark",options:this.baseOptions},null)]),t(o,null,{default:()=>[n("加载动画")]}),t(x,{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(o,null,{default:()=>[n("贴画可视化图")]}),t(x,{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{Ne as default};