mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
2 lines
17 KiB
JavaScript
2 lines
17 KiB
JavaScript
import{t as Ve,c as Ue}from"./lodash-es@4.17.21-b7de4195.js";import{s as Ne}from"./pinia@2.1.4_typescript@5.0.2_vue@3.3.4-ab93b4ec.js";import{e as Ze,j as B,o as qe,k as Ge,l as $}from"./index-a1c322e5.js";import{u as m,r as He,i as Xe,a as Ye,b as Je,c as Ke,d as Qe,e as Ie,f as eo,g as oo,h as to,j as ao,k as ro,l as lo,m as io,n as so,o as co,p as no,q as uo,s as ho}from"./echarts@5.4.0-fb0c89c7.js";import{k as T,A as W,m as C,v as bo,f as mo,n as fo,t as yo,b as t,p as c}from"./@vue_runtime-core@3.3.4-073fad6e.js";import{k as y,h as po,v as go}from"./@vue_reactivity@3.3.4-2b3a1c4e.js";import{_ as u,Y as So,e as D}from"./naive-ui@2.34.4_vue@3.3.4-18897d9a.js";import"./vue-demi@0.14.5_vue@3.3.4-71ba0ef2.js";import"./vue-router@4.2.4_vue@3.3.4-e93fe26b.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 O=["#fc97af","#87f7cf","#f7f494","#72ccff","#f7c5a0","#d4a4eb","#d2f5a6","#76f2f2"],R="rgba(41,52,65,1)",z={},_={textStyle:{color:"#ffffff"},subtextStyle:{color:"#dddddd"}},j={itemStyle:{borderWidth:"4"},lineStyle:{width:"3"},symbolSize:"0",symbol:"circle",smooth:!0},P={itemStyle:{borderWidth:"4"},lineStyle:{width:"3"},symbolSize:"0",symbol:"circle",smooth:!0},M={itemStyle:{barBorderWidth:0,barBorderColor:"#ccc"}},V={itemStyle:{borderWidth:0,borderColor:"#ccc"}},U={itemStyle:{borderWidth:0,borderColor:"#ccc"}},N={itemStyle:{borderWidth:0,borderColor:"#ccc"}},Z={itemStyle:{borderWidth:0,borderColor:"#ccc"}},q={itemStyle:{borderWidth:0,borderColor:"#ccc"}},G={itemStyle:{borderWidth:0,borderColor:"#ccc"}},H={itemStyle:{borderWidth:0,borderColor:"#ccc"}},X={itemStyle:{color:"#fc97af",color0:"transparent",borderColor:"#fc97af",borderColor0:"#87f7cf",borderWidth:"2"}},Y={itemStyle:{borderWidth:0,borderColor:"#ccc"},lineStyle:{width:"1",color:"#ffffff"},symbolSize:"0",symbol:"circle",smooth:!0,color:["#fc97af","#87f7cf","#f7f494","#72ccff","#f7c5a0","#d4a4eb","#d2f5a6","#76f2f2"],label:{color:"#293441"}},J={itemStyle:{areaColor:"#f3f3f3",borderColor:"#999999",borderWidth:.5},label:{color:"#893448"},emphasis:{itemStyle:{areaColor:"rgba(255,178,72,1)",borderColor:"#eb8146",borderWidth:1},label:{color:"rgb(137,52,72)"}}},K={itemStyle:{areaColor:"#f3f3f3",borderColor:"#999999",borderWidth:.5},label:{color:"#893448"},emphasis:{itemStyle:{areaColor:"rgba(255,178,72,1)",borderColor:"#eb8146",borderWidth:1},label:{color:"rgb(137,52,72)"}}},Q={axisLine:{show:!0,lineStyle:{color:"#666666"}},axisTick:{show:!1,lineStyle:{color:"#333"}},axisLabel:{show:!0,color:"#aaaaaa"},splitLine:{show:!1,lineStyle:{color:["#e6e6e6"]}},splitArea:{show:!1,areaStyle:{color:["rgba(250,250,250,0.05)","rgba(200,200,200,0.02)"]}}},I={axisLine:{show:!0,lineStyle:{color:"#666666"}},axisTick:{show:!1,lineStyle:{color:"#333"}},axisLabel:{show:!0,color:"#aaaaaa"},splitLine:{show:!1,lineStyle:{color:["#e6e6e6"]}},splitArea:{show:!1,areaStyle:{color:["rgba(250,250,250,0.05)","rgba(200,200,200,0.02)"]}}},ee={axisLine:{show:!0,lineStyle:{color:"#666666"}},axisTick:{show:!1,lineStyle:{color:"#333"}},axisLabel:{show:!0,color:"#aaaaaa"},splitLine:{show:!1,lineStyle:{color:["#e6e6e6"]}},splitArea:{show:!1,areaStyle:{color:["rgba(250,250,250,0.05)","rgba(200,200,200,0.02)"]}}},oe={axisLine:{show:!0,lineStyle:{color:"#666666"}},axisTick:{show:!1,lineStyle:{color:"#333"}},axisLabel:{show:!0,color:"#aaaaaa"},splitLine:{show:!1,lineStyle:{color:["#e6e6e6"]}},splitArea:{show:!1,areaStyle:{color:["rgba(250,250,250,0.05)","rgba(200,200,200,0.02)"]}}},te={iconStyle:{borderColor:"#999999"},emphasis:{iconStyle:{borderColor:"#666666"}}},ae={textStyle:{color:"#999999"}},re={axisPointer:{lineStyle:{color:"#cccccc",width:1},crossStyle:{color:"#cccccc",width:1}}},le={lineStyle:{color:"#87f7cf",width:1},itemStyle:{color:"#87f7cf",borderWidth:1},controlStyle:{color:"#87f7cf",borderColor:"#87f7cf",borderWidth:.5},checkpointStyle:{color:"#fc97af",borderColor:"#fc97af"},label:{color:"#87f7cf"},emphasis:{itemStyle:{color:"#f7f494"},controlStyle:{color:"#87f7cf",borderColor:"#87f7cf",borderWidth:.5},label:{color:"#87f7cf"}}},ie={color:["#fc97af","#87f7cf"]},se={backgroundColor:"rgba(255,255,255,0)",dataBackgroundColor:"rgba(114,204,255,1)",fillerColor:"rgba(114,204,255,0.2)",handleColor:"#72ccff",handleSize:"100%",textStyle:{color:"#333333"}},ce={label:{color:"#293441"},emphasis:{label:{color:"#293441"}}},Co={color:O,backgroundColor:R,textStyle:z,title:_,line:j,radar:P,bar:M,pie:V,scatter:U,boxplot:N,parallel:Z,sankey:q,funnel:G,gauge:H,candlestick:X,graph:Y,map:J,geo:K,categoryAxis:Q,valueAxis:I,logAxis:ee,timeAxis:oe,toolbox:te,legend:ae,tooltip:re,timeline:le,visualMap:ie,dataZoom:se,markPoint:ce},wo=Object.freeze(Object.defineProperty({__proto__:null,backgroundColor:R,bar:M,boxplot:N,candlestick:X,categoryAxis:Q,color:O,dataZoom:se,default:Co,funnel:G,gauge:H,geo:K,graph:Y,legend:ae,line:j,logAxis:ee,map:J,markPoint:ce,parallel:Z,pie:V,radar:P,sankey:q,scatter:U,textStyle:z,timeAxis:oe,timeline:le,title:_,toolbox:te,tooltip:re,valueAxis:I,visualMap:ie},Symbol.toStringTag,{value:"Module"})),ne=["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"],ue="rgba(0,0,0,0)",de={},he={textStyle:{color:"#008acd"},subtextStyle:{color:"#aaaaaa"}},be={itemStyle:{borderWidth:1},lineStyle:{width:2},symbolSize:3,symbol:"emptyCircle",smooth:!0},me={itemStyle:{borderWidth:1},lineStyle:{width:2},symbolSize:3,symbol:"emptyCircle",smooth:!0},fe={itemStyle:{barBorderWidth:0,barBorderColor:"#ccc"}},ye={itemStyle:{borderWidth:0,borderColor:"#ccc"}},pe={itemStyle:{borderWidth:0,borderColor:"#ccc"}},ge={itemStyle:{borderWidth:0,borderColor:"#ccc"}},Se={itemStyle:{borderWidth:0,borderColor:"#ccc"}},Ce={itemStyle:{borderWidth:0,borderColor:"#ccc"}},we={itemStyle:{borderWidth:0,borderColor:"#ccc"}},xe={itemStyle:{borderWidth:0,borderColor:"#ccc"}},Ee={itemStyle:{color:"#d87a80",color0:"#2ec7c9",borderColor:"#d87a80",borderColor0:"#2ec7c9",borderWidth:1}},Ae={itemStyle:{borderWidth:0,borderColor:"#ccc"},lineStyle:{width:1,color:"#aaa"},symbolSize:3,symbol:"emptyCircle",smooth:!0,color:["#2ec7c9","#b6a2de","#5ab1ef","#ffb980","#d87a80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"],label:{color:"#eee"}},Fe={itemStyle:{areaColor:"#dddddd",borderColor:"#eeeeee",borderWidth:.5},label:{color:"#d87a80"},emphasis:{itemStyle:{areaColor:"rgba(254,153,78,1)",borderColor:"#444",borderWidth:1},label:{color:"rgb(100,0,0)"}}},ke={itemStyle:{areaColor:"#dddddd",borderColor:"#eeeeee",borderWidth:.5},label:{color:"#d87a80"},emphasis:{itemStyle:{areaColor:"rgba(254,153,78,1)",borderColor:"#444",borderWidth:1},label:{color:"rgb(100,0,0)"}}},ve={axisLine:{show:!0,lineStyle:{color:"#008acd"}},axisTick:{show:!0,lineStyle:{color:"#333"}},axisLabel:{show:!0,color:"#333"},splitLine:{show:!1,lineStyle:{color:["#eee"]}},splitArea:{show:!1,areaStyle:{color:["rgba(250,250,250,0.3)","rgba(200,200,200,0.3)"]}}},Be={axisLine:{show:!0,lineStyle:{color:"#008acd"}},axisTick:{show:!0,lineStyle:{color:"#333"}},axisLabel:{show:!0,color:"#333"},splitLine:{show:!0,lineStyle:{color:["#eee"]}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.3)","rgba(200,200,200,0.3)"]}}},$e={axisLine:{show:!0,lineStyle:{color:"#008acd"}},axisTick:{show:!0,lineStyle:{color:"#333"}},axisLabel:{show:!0,color:"#333"},splitLine:{show:!0,lineStyle:{color:["#eee"]}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.3)","rgba(200,200,200,0.3)"]}}},We={axisLine:{show:!0,lineStyle:{color:"#008acd"}},axisTick:{show:!0,lineStyle:{color:"#333"}},axisLabel:{show:!0,color:"#333"},splitLine:{show:!0,lineStyle:{color:["#eee"]}},splitArea:{show:!1,areaStyle:{color:["rgba(250,250,250,0.3)","rgba(200,200,200,0.3)"]}}},De={iconStyle:{borderColor:"#2ec7c9"},emphasis:{iconStyle:{borderColor:"#18a4a6"}}},Le={textStyle:{color:"#333333"}},Te={axisPointer:{lineStyle:{color:"#008acd",width:"1"},crossStyle:{color:"#008acd",width:"1"}}},Oe={lineStyle:{color:"#008acd",width:1},itemStyle:{color:"#008acd",borderWidth:1},controlStyle:{color:"#008acd",borderColor:"#008acd",borderWidth:.5},checkpointStyle:{color:"#2ec7c9",borderColor:"#2ec7c9"},label:{color:"#008acd"},emphasis:{itemStyle:{color:"#a9334c"},controlStyle:{color:"#008acd",borderColor:"#008acd",borderWidth:.5},label:{color:"#008acd"}}},Re={color:["#5ab1ef","#e0ffff"]},ze={backgroundColor:"rgba(47,69,84,0)",dataBackgroundColor:"#efefff",fillerColor:"rgba(182,162,222,0.2)",handleColor:"#008acd",handleSize:"100%",textStyle:{color:"#333333"}},_e={label:{color:"#eee"},emphasis:{label:{color:"#eee"}}},xo={color:ne,backgroundColor:ue,textStyle:de,title:he,line:be,radar:me,bar:fe,pie:ye,scatter:pe,boxplot:ge,parallel:Se,sankey:Ce,funnel:we,gauge:xe,candlestick:Ee,graph:Ae,map:Fe,geo:ke,categoryAxis:ve,valueAxis:Be,logAxis:$e,timeAxis:We,toolbox:De,legend:Le,tooltip:Te,timeline:Oe,visualMap:Re,dataZoom:ze,markPoint:_e},Eo=Object.freeze(Object.defineProperty({__proto__:null,backgroundColor:ue,bar:fe,boxplot:ge,candlestick:Ee,categoryAxis:ve,color:ne,dataZoom:ze,default:xo,funnel:we,gauge:xe,geo:ke,graph:Ae,legend:Le,line:be,logAxis:$e,map:Fe,markPoint:_e,parallel:Se,pie:ye,radar:me,sankey:Ce,scatter:pe,textStyle:de,timeAxis:We,timeline:Oe,title:he,toolbox:De,tooltip:Te,valueAxis:Be,visualMap:Re},Symbol.toStringTag,{value:"Module"})),Ao=()=>{const e=Object.assign({"/src/components/RayChart/theme/macarons/macarons-dark.json":wo,"/src/components/RayChart/theme/macarons/macarons.json":Eo}),d=/\/([^/]+)\.json$/;return Object.keys(e).reduce((r,n)=>{var o;const i=(o=n.match(d))==null?void 0:o[1];if(i)return r.push({name:i,theme:e[n].default}),r;throw new Error("theme name is not found")},[])},L=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),f=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,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:()=>L()}},setup(e,{expose:d}){const h=Ze(),{themeValue:r}=Ne(h),n=y(),i=y();let o,b;const x=W(()=>({"--ray-chart-width":B(e.width),"--ray-chart-height":B(e.height)})),E=W(()=>L(e.loadingOptions)),s=async()=>{m([Ye,Je,Ke,Qe,Ie,eo,oo,to]),m([ao,ro,lo,io,so,co]),m([no,uo]),m([ho]);try{m(e.use)}catch{console.error("Error: wrong property and method passed in extend attribute")}},A=()=>{let a=Ue(e.options);const p=g=>Object.assign({},a,g);return e.showAria&&(a=p({aria:{enabled:!0,decal:{show:!0}}})),a},l=(a="macarons")=>{const p=n.value,g=A(),{height:Pe,width:Me}=p.getBoundingClientRect(),{success:k,error:v}=e;try{Ao().forEach(S=>{He(S.name,S.theme)}),o=Xe(p,a,{width:Me===0?200:void 0,height:Pe===0?200:void 0}),i.value=o,g&&o.setOption(g),k&&$(k,o)}catch(S){v&&$(v),console.error("RayChart render error: ",S)}},F=a=>{if(e.autoChangeTheme){a?l("macarons-dark"):l();return}e.theme||l()},w=()=>{o&&(o.clear(),o.dispose())},je=()=>{o&&o.resize()};return C(()=>[r.value],([a])=>{e.autoChangeTheme&&(w(),F(a))}),C(()=>e.showAria,()=>{w(),(e.autoChangeTheme||e.theme)&&r.value?l("macarons-dark"):l()}),C(()=>e.loading,a=>{a?o==null||o.showLoading(E.value):o==null||o.hideLoading()}),e.watchOptions&&C(()=>e.watchOptions,()=>{const a=A();o==null||o.setOption(a)}),bo(async()=>{await s()}),mo(()=>{fo(()=>{e.autoChangeTheme?F(r.value):e.theme?l("macarons-dark"):l(),e.autoResize&&(b=Ve(je,1e3),qe(window,"resize",b))})}),yo(()=>{w(),Ge(window,"resize",b),b.cancel()}),d({echart:i}),{rayChartRef:n,cssVarsRef:x,echartInstance:i}},render(){return t("div",{class:"ray-chart",style:[this.cssVarsRef],ref:"rayChartRef"},null)}}),ut=T({name:"REchart",setup(){const e=y(),d=y(!1),h=y(!1),r=po({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)"}},{name:"数量",data:[12,220,250,180,20,10,190],type:"bar",showBackground:!0,backgroundStyle:{color:"rgba(180, 180, 180, 0.2)"}}]},baseChartRef:e,chartLoading:d,handleLoadingShow:s=>{r.loading=s},chartAria:h,handleAriaShow:s=>{h.value=s},handleChartRenderSuccess:s=>{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]}]},...go(r)}},render(){return t("div",{class:"echart"},[t(u,null,{default:()=>[c("RayChart 组件使用")]}),t(So,null,{default:()=>[c("该组件会默认以 200*200 宽高进行填充。预设了常用的图、方法组件,如果不满足需求,需要用 use 方法进行手动拓展。该组件实现了自动跟随模板主题切换功能,但是动态切换损耗较大,所以默认不启用。 该组件可以让你只需要关注 options 的配置,无需关心 chart 图的资源管理。并且该组件可以自动监听 options 的变化,所以天生支持响应式,可以让你放心的加载异步数据。")]}),t(u,null,{default:()=>[c("能跟随主题切换的可视化图")]}),t("div",{class:"chart--container"},[t(f,{autoChangeTheme:!0,options:this.baseLineOptions,showAria:this.chartAria},null)]),t(u,null,{default:()=>[c("渲染成功后运行回调函数")]}),t("div",{class:"chart--container"},[t(f,{ref:"baseChartRef",options:this.basePieOptions,success:this.handleChartRenderSuccess.bind(this)},null)]),t(u,null,{default:()=>[c("不跟随主题切换的暗色主题可视化图")]}),t("div",{class:"chart--container"},[t(f,{theme:"dark",options:this.baseOptions},null)]),t(u,null,{default:()=>[c("加载动画")]}),t(D,{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(f,{loading:this.loading,options:this.baseOptions},null)]),t(u,null,{default:()=>[c("贴画可视化图")]}),t(D,{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(f,{options:this.baseOptions,showAria:this.chartAria},null)])])}});export{ut as default};
|