mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
2 lines
6.7 KiB
JavaScript
2 lines
6.7 KiB
JavaScript
import{x as t}from"./hooks-BhHffBS8.js";import"./dayjs@1.11.10-BYZwCyGy.js";import"./print-js@1.6.0-C3lAJnMa.js";import"./currency.js@2.0.4-9OAR_aOO.js";import"./awesome-qr@2.1.5-rc.0-Ds7AaOTE.js";import"./vue-hooks-plus@1.8.8_vue@3.4.21-CBeGMwb0.js";import"./lodash@4.17.21-CM7ROh5r.js";import"./js-cookie@3.0.5-Z_8Sd105.js";import"./screenfull@5.2.0-DuGDi0R7.js";import"./qs@6.11.2-5yoVYNs7.js";import"./lodash-es@4.17.21-C8H4BJij.js";import"./@vueuse_core@10.9.0_vue@3.4.21-CShlBTir.js";import"./@vueuse_shared@10.9.0_vue@3.4.21-JDL3uqC1.js";import"./utils-Dx3WEey5.js";import"./interactjs@1.10.26-DmsZVOf4.js";import"./pinia-plugin-persistedstate@3.2.0_pinia@2.1.7-C45aYbGY.js";import"./dom-to-image@2.6.0-CaeIWam-.js";import"./echarts@5.5.0-BEyY33Zi.js";import"./zrender@5.5.0-JN1hODMT.js";import"./tslib@2.3.0-BDyQ-Jie.js";import"./@vue_runtime-core@3.4.21-DW3iHaBZ.js";import"./@vue_reactivity@3.4.21-8_tu8c_o.js";import"./@vue_shared@3.4.21-DCcVmNGw.js";import"./canvas@2.11.2-CVRTzJty.js";import"./js-binary-schema-parser@2.0.3-D0akQrQ7.js";import"./side-channel@1.0.4-DiPXwnX9.js";import"./get-intrinsic@1.2.1-5uWIhZOj.js";import"./has-symbols@1.0.3-eVqrYdw7.js";import"./has-proto@1.0.1-CgulNy6r.js";import"./function-bind@1.1.2-B8G-TZ45.js";import"./has@1.0.3-B6xjtObm.js";import"./call-bind@1.0.2-BD5aDJOM.js";const z=Vue.defineComponent({name:"REchart",setup(){const u=Vue.ref(),n=Vue.ref(!1),o=Vue.ref(!1),i=Vue.reactive({loading:!1}),s={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)"}}]},l={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)"}}}]},a=Vue.ref({tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#6a7985"}}},legend:{data:["Email","Union Ads","Video Ads","Direct","Search Engine"]},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]}]}),d=e=>{i.loading=e},c=e=>{o.value=e},h=()=>{var e,r;(e=u.value)!=null&&e.isDispose()?window.$message.warning("图表已经渲染"):(r=u.value)==null||r.render()},V=()=>{var e;(e=u.value)==null||e.dispose()},p=()=>{const e=()=>Math.floor((Math.random()+1)*100);a.value.series[0].data=new Array(7).fill(0).map(()=>e()),a.value.series[1].data=new Array(7).fill(0).map(()=>e())};return{baseOptions:s,baseChartRef:u,chartLoading:n,handleLoadingShow:d,chartAria:o,handleAriaShow:c,basePieOptions:l,baseLineOptions:a,...Vue.toRefs(i),mountChart:h,unmountChart:V,updateChartOptions:p}},render(){return Vue.createVNode("div",{class:"echart"},[Vue.createVNode(naive.NCard,{title:"chart 组件"},{default:()=>[Vue.createVNode("ul",null,[Vue.createVNode("li",null,[Vue.createVNode("h3",null,[Vue.createTextVNode("1. 当未获取到宽高时,组件会默认以 200*200 尺寸填充。")])]),Vue.createVNode("li",null,[Vue.createVNode("h3",null,[Vue.createTextVNode("2. 默认启用 autoChangeTheme,自动监听模板主题变化,如果设置为 false 则为 APP_THEME.echartTheme 配置项为渲染结果(RayTemplate 独有)")])]),Vue.createVNode("li",null,[Vue.createVNode("h3",null,[Vue.createTextVNode("3. 默认启用 watchOptions,自动监听配置项变化")])]),Vue.createVNode("li",null,[Vue.createVNode("h3",null,[Vue.createTextVNode("4. 默认启用 nextTick,强制在下一队列渲染图标内容")])]),Vue.createVNode("li",null,[Vue.createVNode("h3",null,[Vue.createTextVNode("5. 配置 setChartOptions 属性,可以定制化合并模式")])]),Vue.createVNode("li",null,[Vue.createVNode("h3",null,[Vue.createTextVNode("6. 默认启用 intersectionObserver 属性,只有元素在可见范围才会渲染图表,可以滚动查看效果")])])])]}),Vue.createVNode(naive.NCard,{title:"预设 card 风格图表"},{default:()=>[Vue.createVNode(naive.NFlex,{style:["padding: 18px 0"]},{default:()=>[Vue.createVNode(naive.NButton,{onClick:this.mountChart.bind(this)},{default:()=>[Vue.createTextVNode("渲染")]}),Vue.createVNode(naive.NButton,{onClick:this.unmountChart.bind(this)},{default:()=>[Vue.createTextVNode("卸载")]}),Vue.createVNode(naive.NButton,{onClick:this.updateChartOptions.bind(this)},{default:()=>[Vue.createTextVNode("更新配置项")]})]}),Vue.createVNode("div",{class:"chart--container"},[Vue.createVNode(t,{title:"周销售量",ref:"baseChartRef",autoChangeTheme:!0,options:this.baseLineOptions,showAria:this.chartAria,preset:"card"},null)])]}),Vue.createVNode(naive.NCard,{title:"不跟随主题切换的暗色主题可视化图,并且手动指定原始主题色"},{default:()=>[Vue.createVNode("div",{class:"chart--container"},[Vue.createVNode(t,{autoChangeTheme:!1,theme:"default",options:this.baseOptions},null)])]}),Vue.createVNode(naive.NCard,{title:"加载动画"},{default:()=>[Vue.createVNode(naive.NSwitch,{value:this.chartLoading,"onUpdate:value":u=>this.chartLoading=u,onUpdateValue:this.handleLoadingShow.bind(this),style:["padding: 18px 0"]},{checked:()=>"隐藏加载动画",unchecked:()=>"显示加载动画"}),Vue.createVNode("div",{class:"chart--container"},[Vue.createVNode(t,{loading:this.loading,options:this.baseOptions},null)])]}),Vue.createVNode(naive.NCard,{title:"贴画可视化图"},{default:()=>[Vue.createVNode(naive.NSwitch,{value:this.chartAria,"onUpdate:value":u=>this.chartAria=u,onUpdateValue:this.handleAriaShow.bind(this),style:["padding: 18px 0"]},{checked:()=>"隐藏贴花",unchecked:()=>"显示贴花"}),Vue.createVNode("div",{class:"chart--container"},[Vue.createVNode(t,{options:this.baseOptions,showAria:this.chartAria},null)])]})])}});export{z as default};
|