mfish-nocode-view/packages/nocode/core/EchartsAxisConfig.js

import{Cn as e,Q as t,_n as n,mr as r,pr as i,xt as a}from"./common.js";import{t as o}from"./TextStyle.js";import{t as s}from"./EchartsBaseConfig.js";import{Fragment as c,computed as l,createBlock as u,createElementBlock as d,createElementVNode as f,createTextVNode as p,createVNode as m,defineComponent as h,normalizeClass as g,openBlock as _,ref as v,renderList as y,resolveComponent as b,toDisplayString as x,unref as S,watch as C,withCtx as w}from"vue";import{Checkbox as T,RadioButton as E,RadioGroup as D,Slider as O}from"ant-design-vue";import{useDesign as k}from"@mfish/core/hooks";var A={style:{display:`flex`,gap:`2px`}},j={class:`check-group`},M=r(h({__name:`EchartsGridConfig`,setup(t){let n=a(),{prefixCls:r}=k(`echarts-grid-config`),i=v(!1),o=v(``),c=v(``),l=v(``),d=v(``),h=v(!1);C(()=>n.getCurConfigComponent,e=>{e&&y()},{immediate:!0});function y(){h.value=n.getCurConfigComponent.chart.options.yAxis?.type===`category`,n.getCurConfigComponent.chart.options?.grid?.left!==void 0&&(o.value=n.getCurConfigComponent.chart.options.grid.left),n.getCurConfigComponent.chart.options?.grid?.right!==void 0&&(c.value=n.getCurConfigComponent.chart.options.grid.right),n.getCurConfigComponent.chart.options?.grid?.top!==void 0&&(l.value=n.getCurConfigComponent.chart.options.grid.top),n.getCurConfigComponent.chart.options?.grid?.bottom!==void 0&&(d.value=n.getCurConfigComponent.chart.options.grid.bottom)}function b(e){n.getCurConfigComponent.chart.options.grid.left=o.value}function x(){n.getCurConfigComponent.chart.options.grid.right=c.value}function E(){n.getCurConfigComponent.chart.options.grid.top=l.value}function D(){n.getCurConfigComponent.chart.options.grid.bottom=d.value}function O(){h.value?(delete n.getCurConfigComponent.chart.options.xAxis?.type,n.getCurConfigComponent.chart.options.yAxis.type=`category`):(delete n.getCurConfigComponent.chart.options.yAxis?.type,n.getCurConfigComponent.chart.options.xAxis.type=`category`)}function M(){n.getCurConfigComponent.chart.options.grid.show=i.value}return(t,n)=>(_(),u(s,{class:g(S(r))},{default:w(()=>[n[8]||=f(`div`,{class:`title`},` 图表边距`,-1),f(`div`,A,[m(S(e),{prefix:`左`,"is-number":!1,placeholder:`数字或百分比`,value:o.value,"onUpdate:value":n[0]||=e=>o.value=e,onChange:b},null,8,[`value`]),m(S(e),{prefix:`右`,"is-number":!1,placeholder:`数字或百分比`,value:c.value,"onUpdate:value":n[1]||=e=>c.value=e,onChange:x},null,8,[`value`]),m(S(e),{prefix:`上`,"is-number":!1,placeholder:`数字或百分比`,value:l.value,"onUpdate:value":n[2]||=e=>l.value=e,onChange:E},null,8,[`value`]),m(S(e),{prefix:`下`,"is-number":!1,placeholder:`数字或百分比`,value:d.value,"onUpdate:value":n[3]||=e=>d.value=e,onChange:D},null,8,[`value`])]),f(`div`,j,[m(S(T),{checked:h.value,"onUpdate:checked":n[4]||=e=>h.value=e,onChange:O},{default:w(()=>[...n[6]||=[p(` X、Y轴交换`,-1)]]),_:1},8,[`checked`]),m(S(T),{checked:i.value,"onUpdate:checked":n[5]||=e=>i.value=e,onChange:M},{default:w(()=>[...n[7]||=[p(` 显示网格`,-1)]]),_:1},8,[`checked`])])]),_:1},8,[`class`]))}}),[[`__scopeId`,`data-v-933ebb53`]]),N={class:`title`},P={class:`title`},F={class:`title`},I=r(h({__name:`EchartsLineConfig`,props:{axisType:{type:String,default:`X`},lineStyle:{type:Object,default:()=>({})}},emits:[`lineStyleChange`],setup(e,{emit:t}){let n=e,r=t,{prefixCls:o}=k(`echarts-line-config`),s=a(),u=v(n.lineStyle),h=v(),b=v(`solid`),T=[{title:`实线`,value:`solid`},{title:`方形虚线`,value:`dashed`},{title:`圆点虚线`,value:`dotted`}],A=l(()=>n.axisType===`X`?Math.round(s.getCurConfigComponent.chartContain.dropInfo.height/50):Math.round(s.getCurConfigComponent.chartContain.dropInfo.width/50));C(()=>s.getCurConfigComponent,e=>{e&&(n.lineStyle?.color!==void 0&&(h.value=n.lineStyle.color),n?.lineStyle?.type!==void 0&&(b.value=n.lineStyle.type),n?.lineStyle?.width!==void 0&&(j.value=n?.lineStyle?.width))},{immediate:!0});let j=v(1);function M(e){I(e),h.value=e}function I(e){if(!e){delete u.value.color,r(`lineStyleChange`,u.value);return}u.value={...u.value,color:e},r(`lineStyleChange`,u.value)}function L(){u.value={...u.value,type:b.value},r(`lineStyleChange`,u.value)}function R(){u.value={...u.value,width:j.value},r(`lineStyleChange`,u.value)}return(e,t)=>(_(),d(`div`,{class:g(S(o))},[f(`div`,N,[t[2]||=p(` 线条颜色 `,-1),f(`div`,null,[m(S(i),{placeholder:`设置线条颜色，格式#FFFFFF`,type:1,value:h.value,onConfirmChange:M,onInputChange:I},null,8,[`value`])])]),f(`div`,P,[t[3]||=p(` 线条类型 `,-1),m(S(D),{size:`small`,value:b.value,"onUpdate:value":t[0]||=e=>b.value=e,onChange:L},{default:w(()=>[(_(),d(c,null,y(T,(e,t)=>m(S(E),{key:t,value:e.value},{default:w(()=>[p(x(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`])]),f(`div`,F,[t[4]||=p(` 线条宽度 `,-1),m(S(O),{value:j.value,"onUpdate:value":t[1]||=e=>j.value=e,min:1,max:A.value,onChange:R},null,8,[`value`,`max`])])],2))}}),[[`__scopeId`,`data-v-8514ac74`]]),L={class:`title`},R={class:`title`},ee={class:`title`},te={class:`title`},ne={class:`title`},re={class:`title`},z={class:`title`},ie={class:`title`},ae={class:`title`},oe={class:`title`},B=r(h({__name:`EchartsAxisConfig`,props:{axisType:{type:String,default:`X`},axis:{type:Object,default:()=>{}}},emits:[`axisChange`],setup(e,{emit:r}){let i=e,s=r,h=v(i.axis),{prefixCls:T}=k(`echarts-axis-config`),A=a(),j=v(``),M=v({}),N=v({}),P=v(`auto`),F=l(()=>i.axisType===`X`?Math.round(A.getCurConfigComponent.chartContain.dropInfo.width/50):Math.round(A.getCurConfigComponent.chartContain.dropInfo.height/50)),B=l(()=>i.axisType===`X`?Math.round(A.getCurConfigComponent.chartContain.dropInfo.height/5):Math.round(A.getCurConfigComponent.chartContain.dropInfo.width/5)),se=[{title:`自动`,value:`auto`},{title:`全显示`,value:`0`}],V=v(!1),ce=[{title:`朝外`,value:!1},{title:`朝内`,value:!0}],H=v(`none`),le=[{title:`无`,value:`none`},{title:`右箭头`,value:`none,arrow`},{title:`左箭头`,value:`arrow,none`},{title:`两端箭头`,value:`arrow,arrow`}],U=v(),W={X:[{title:`底部`,value:`bottom`},{title:`顶部`,value:`top`}],Y:[{title:`左侧`,value:`left`},{title:`右侧`,value:`right`}]},G=v(`solid`),ue=[{title:`实线`,value:`solid`},{title:`方形虚线`,value:`dashed`},{title:`圆点虚线`,value:`dotted`}],K=v(8),q=v(0),J=v(),Y=v(5),X=v(1);C(()=>A.getCurConfigComponent,e=>{e&&de()},{immediate:!0});function de(){M.value={};let e=i.axis;if(!e)return;j.value=e?.name,M.value.font=e?.nameTextStyle?.fontFamily,M.value.fontSize=e?.nameTextStyle?.fontSize?.replace(`px`,``),M.value.textColor=e?.nameTextStyle?.color;let t=e?.nameTextStyle?.fontStyle?{italic:!0}:{},n=e?.nameTextStyle?.fontWeight?{bold:!0}:{};if(M.value.fontStyle={...t,...n},M.value.hAlignType=e?.nameLocation===`start`?`left`:e?.nameLocation===`end`?`right`:e?.nameLocation,e?.axisLabel?.interval!==void 0&&(P.value=e?.axisLabel?.interval),e?.axisLabel?.margin!==void 0&&(K.value=e?.axisLabel?.margin),e?.axisLabel?.rotate!==void 0&&(q.value=e?.axisLabel?.rotate),e?.axisLabel?.formatter!==void 0&&(J.value=e?.axisLabel?.formatter),e.position===void 0?U.value=W[i.axisType][0].value:U.value=e.position,N.value={},!e)return;N.value.font=e?.axisLabel?.fontFamily,N.value.fontSize=e?.axisLabel?.fontSize?.replace(`px`,``),N.value.textColor=e?.axisLabel?.color;let r=e?.axisLabel?.fontStyle?{italic:!0}:{},a=e?.axisLabel?.fontWeight?{bold:!0}:{};N.value.fontStyle={...r,...a},e?.axisLine?.symbol!==void 0&&(H.value=e.axisLine.symbol.join(`,`)),e?.axisTick?.inside!==void 0&&(V.value=e?.axisTick?.inside),e?.axisTick?.length!==void 0&&(Y.value=e.axisTick.length),e?.axisTick?.lineStyle?.width!==void 0&&(X.value=e.axisTick.lineStyle.width),e?.axisTick?.lineStyle?.type!==void 0&&(G.value=e?.axisTick.lineStyle.type)}function fe(){h.value.name=j.value}function pe(e){delete h.value.nameTextStyle?.fontStyle,delete h.value.nameTextStyle?.fontWeight,Z(e)}function Z(e){h.value.nameTextStyle={...h.value?.nameTextStyle,...e.style},s(`axisChange`,h.value)}function me(e){h.value.nameLocation=e.value===`left`?`start`:e.value===`right`?`end`:e.value,s(`axisChange`,h.value)}function he(e){h.value={...h.value,show:e},s(`axisChange`,h.value)}function ge(e){h.value.axisLabel={...h.value.axisLabel,show:e},s(`axisChange`,h.value)}function _e(){h.value.axisLabel={...h.value.axisLabel,interval:P.value},s(`axisChange`,h.value)}function ve(){h.value.axisLabel={...h.value.axisLabel,margin:K.value},s(`axisChange`,h.value)}function ye(){h.value.axisLabel={...h.value.axisLabel,rotate:q.value},s(`axisChange`,h.value)}function be(e){delete h.value.axisLabel?.fontStyle,delete h.value.axisLabel?.fontWeight,Q(e)}function Q(e){h.value.axisLabel={...h.value?.axisLabel,...e.style},s(`axisChange`,h.value)}function $(){h.value.axisLabel={...h.value.axisLabel,formatter:J.value},s(`axisChange`,h.value)}function xe(e){h.value.axisLine={...h.value.axisLine,show:e}}function Se(e){h.value.axisTick={...h.value.axisTick,show:e},s(`axisChange`,h.value)}function Ce(){h.value={...h.value,position:U.value},s(`axisChange`,h.value)}function we(){h.value.axisLine={...h.value.axisLine,symbol:H.value.split(`,`)},s(`axisChange`,h.value)}function Te(e){h.value.axisLine.lineStyle={...h.value.axisLine?.lineStyle,...e},s(`axisChange`,h.value)}function Ee(){h.value.axisTick={...h.value.axisTick,inside:V.value},s(`axisChange`,h.value)}function De(){h.value.axisTick={...h.value.axisTick,length:Y.value},s(`axisChange`,h.value)}function Oe(){h.value.axisTick.lineStyle={...h.value.axisTick?.lineStyle,width:X.value},s(`axisChange`,h.value)}function ke(){h.value.axisTick.lineStyle={...h.value.axisTick?.lineStyle,type:G.value},s(`axisChange`,h.value)}function Ae(e){h.value.splitLine={...h.value.splitLine,show:e},s(`axisChange`,h.value)}function je(e){h.value.splitLine.lineStyle={...h.value.splitLine?.lineStyle,...e},s(`axisChange`,h.value)}return(r,i)=>{let a=b(`AInput`);return _(),d(`div`,{class:g(S(T))},[m(t,{title:`${e.axisType}轴配置`,"default-expand":!1,"allow-check":!0,"title-check":e.axis?.show,onChecked:he},{default:w(()=>[f(`div`,L,[p(x(`${e.axisType}轴位置`)+` `,1),m(S(D),{size:`small`,value:U.value,"onUpdate:value":i[0]||=e=>U.value=e,onChange:Ce},{default:w(()=>[(_(!0),d(c,null,y(W[e.axisType],(e,t)=>(_(),u(S(E),{key:t,value:e.value},{default:w(()=>[p(x(e.title),1)]),_:2},1032,[`value`]))),128))]),_:1},8,[`value`])]),m(t,{title:`名称配置`},{default:w(()=>[f(`div`,R,[f(`div`,null,[m(a,{value:j.value,"onUpdate:value":i[1]||=e=>j.value=e,"show-count":``,maxlength:50,onChange:fe},null,8,[`value`])])]),m(o,{"hide-font-style":[S(n).Underline,S(n).Strikethrough],"color-type":1,"text-style":M.value,onFontChange:Z,onSizeChange:Z,onColorChange:Z,onHAlignChange:me,onFontStyleChange:pe},null,8,[`hide-font-style`,`text-style`])]),_:1}),m(t,{title:`标签配置`,"default-expand":!1,"allow-check":!0,"title-check":e.axis?.axisLabel?.show,onChecked:ge},{default:w(()=>[f(`div`,ee,[i[11]||=p(` 标签间隔 `,-1),m(S(D),{size:`small`,value:P.value,"onUpdate:value":i[2]||=e=>P.value=e,onChange:_e},{default:w(()=>[(_(),d(c,null,y(se,e=>m(S(E),{key:e.value,value:e.value},{default:w(()=>[p(x(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`])]),m(o,{"hide-font-style":[S(n).Underline,S(n).Strikethrough],"hide-align":!0,"color-type":1,"text-style":N.value,onFontChange:Q,onSizeChange:Q,onColorChange:Q,onFontStyleChange:be},null,8,[`hide-font-style`,`text-style`]),f(`div`,te,[i[12]||=p(` 标签与轴线间距 `,-1),m(S(O),{value:K.value,"onUpdate:value":i[3]||=e=>K.value=e,min:-100,max:100,onChange:ve},null,8,[`value`])]),f(`div`,ne,[i[13]||=p(` 标签角度 `,-1),m(S(O),{value:q.value,"onUpdate:value":i[4]||=e=>q.value=e,min:-90,max:90,onChange:ye},null,8,[`value`])]),f(`div`,re,[i[14]||=p(` 标签格式 `,-1),f(`div`,null,[m(a,{value:J.value,"onUpdate:value":i[5]||=e=>J.value=e,placeholder:`格式{value}kg 详情参考echarts formatter属性`,onChange:$},null,8,[`value`])])])]),_:1},8,[`title-check`]),m(t,{title:`轴线配置`,"default-expand":!1,"allow-check":!0,"title-check":e.axis?.axisLine?.show,onChecked:xe},{default:w(()=>[m(I,{"axis-type":e.axisType,"line-style":e.axis?.axisLine?.lineStyle,onLineStyleChange:Te},null,8,[`axis-type`,`line-style`]),f(`div`,z,[i[15]||=p(` 轴线箭头 `,-1),m(S(D),{size:`small`,value:H.value,"onUpdate:value":i[6]||=e=>H.value=e,onChange:we},{default:w(()=>[(_(),d(c,null,y(le,(e,t)=>m(S(E),{key:t,value:e.value},{default:w(()=>[p(x(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`])])]),_:1},8,[`title-check`]),m(t,{title:`刻度配置`,"default-expand":!1,"allow-check":!0,"title-check":e.axis?.axisTick?.show,onChecked:Se},{default:w(()=>[f(`div`,ie,[i[16]||=p(` 刻度方向 `,-1),m(S(D),{size:`small`,value:V.value,"onUpdate:value":i[7]||=e=>V.value=e,onChange:Ee},{default:w(()=>[(_(),d(c,null,y(ce,(e,t)=>m(S(E),{key:t,value:e.value},{default:w(()=>[p(x(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`])]),f(`div`,ae,[i[17]||=p(` 刻度类型 `,-1),m(S(D),{size:`small`,value:G.value,"onUpdate:value":i[8]||=e=>G.value=e,onChange:ke},{default:w(()=>[(_(),d(c,null,y(ue,(e,t)=>m(S(E),{key:t,value:e.value},{default:w(()=>[p(x(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`])]),f(`div`,oe,[i[18]||=p(` 刻度长度 `,-1),m(S(O),{value:Y.value,"onUpdate:value":i[9]||=e=>Y.value=e,min:1,max:B.value,onChange:De},null,8,[`value`,`max`]),i[19]||=p(` 刻度宽度 `,-1),m(S(O),{value:X.value,"onUpdate:value":i[10]||=e=>X.value=e,min:1,max:F.value,onChange:Oe},null,8,[`value`,`max`])])]),_:1},8,[`title-check`]),m(t,{title:`分隔线配置`,"default-expand":!1,"allow-check":!0,"title-check":e.axis?.splitLine?.show,onChecked:Ae},{default:w(()=>[m(I,{"axis-type":e.axisType,"line-style":e.axis?.splitLine.lineStyle,onLineStyleChange:je},null,8,[`axis-type`,`line-style`])]),_:1},8,[`title-check`])]),_:1},8,[`title`,`title-check`])],2)}}}),[[`__scopeId`,`data-v-8e9ce766`]]);export{M as n,B as t};