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

import{Cn as e,Q as t,_n as n,mr as r,wn as i,xt as a}from"./common.js";import{t as o}from"./TextStyle.js";import{Fragment as s,createElementBlock as c,createElementVNode as l,createTextVNode as u,createVNode as d,defineComponent as f,normalizeClass as p,openBlock as m,ref as h,renderList as g,resolveComponent as _,toDisplayString as v,unref as y,watch as b,withCtx as x}from"vue";import{RadioButton as S,RadioGroup as C,Tooltip as w}from"ant-design-vue";import{useDesign as T}from"@mfish/core/hooks";import{Icon as E}from"@mfish/core/components/Icon";var D={class:`title`},O={class:`title`},k={class:`title`},A={class:`title`},j={style:{display:`flex`,gap:`6px`}},M={class:`title`},N=r(f({__name:`EchartsLegendConfig`,setup(r){let f=a(),{prefixCls:N}=T(`echarts-legend-config`),P=[{title:`普通图例`,value:`plain`},{title:`滚动图例`,value:`scroll`}],F=[{title:`横向`,value:`horizontal`},{title:`竖向`,value:`vertical`}],I=[{title:`左`,value:`left`,icon:`iconfont:icon-mfish-left-align`},{title:`中`,value:`center`,icon:`iconfont:icon-mfish-horizontal-center`},{title:`右`,value:`right`,icon:`iconfont:icon-mfish-right-align`}],L=[{title:`上`,value:`top`,icon:`iconfont:icon-mfish-top-align`},{title:`中`,value:`middle`,icon:`iconfont:icon-mfish-vertical-center`},{title:`下`,value:`bottom`,icon:`iconfont:icon-mfish-bottom-align`}],R=[{title:`多选`,value:`multiple`},{title:`单选`,value:`single`},{title:`不可选`,value:!1}],z=[{title:`默认`,value:``},{title:`圆形`,value:`circle`},{title:`方形`,value:`rect`},{title:`三角形`,value:`triangle`},{title:`菱形`,value:`diamond`},{title:`无`,value:`none`}],B=h({});b(()=>f.getCurConfigComponent,e=>{e&&V()},{immediate:!0});function V(){B.value={};let e=f.getCurConfigComponent?.chart?.options;if(!e)return;B.value.font=e.legend?.textStyle?.fontFamily,B.value.fontSize=e.legend?.textStyle?.fontSize?.replace(`px`,``),B.value.textColor=e.legend?.textStyle?.color;let t=e.legend?.textStyle?.fontStyle?{italic:!0}:{},n=e.legend?.textStyle?.fontWeight?{bold:!0}:{};B.value.fontStyle={...t,...n},B.value.hAlignType=e.legend?.left}function H(e){f.getCurConfigComponent.chart.options.legend.left=e.value}function U(e){delete f.getCurConfigComponent.chart.options.legend.textStyle?.fontStyle,delete f.getCurConfigComponent.chart.options.legend.textStyle?.fontWeight,W(e)}function W(e){f.getCurConfigComponent.chart.options.legend.textStyle={...f.getCurConfigComponent.chart.options.legend.textStyle,...e.style}}function G(e){f.getCurConfigComponent.chart.options.legend={...f.getCurConfigComponent.chart.options.legend,show:e}}return(r,a)=>{let h=_(`AInput`);return m(),c(`div`,{class:p(y(N))},[d(t,{title:`图例配置`,"default-expand":!1,"allow-check":!0,"title-check":y(f).getCurConfigComponent.chart.options.legend?.show,onChecked:G},{default:x(()=>[l(`div`,D,[a[10]||=u(` 图例类型 `,-1),l(`div`,null,[d(y(C),{size:`small`,value:y(f).getCurConfigComponent.chart.options.legend.type,"onUpdate:value":a[0]||=e=>y(f).getCurConfigComponent.chart.options.legend.type=e},{default:x(()=>[(m(),c(s,null,g(P,e=>d(y(S),{key:e.value,value:e.value},{default:x(()=>[u(v(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`])])]),l(`div`,O,[a[11]||=u(` 图例方向 `,-1),l(`div`,null,[d(y(C),{size:`small`,value:y(f).getCurConfigComponent.chart.options.legend.orient,"onUpdate:value":a[1]||=e=>y(f).getCurConfigComponent.chart.options.legend.orient=e},{default:x(()=>[(m(),c(s,null,g(F,e=>d(y(S),{key:e.value,value:e.value},{default:x(()=>[u(v(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`])])]),l(`div`,k,[a[12]||=u(` 选择模式 `,-1),l(`div`,null,[d(y(C),{size:`small`,value:y(f).getCurConfigComponent.chart.options.legend.selectedMode,"onUpdate:value":a[2]||=e=>y(f).getCurConfigComponent.chart.options.legend.selectedMode=e},{default:x(()=>[(m(),c(s,null,g(R,(e,t)=>d(y(S),{key:t,value:e.value},{default:x(()=>[u(v(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`])])]),l(`div`,A,[a[13]||=u(` 图例位置 `,-1),d(y(C),{size:`small`,value:y(f).getCurConfigComponent.chart.options.legend.left,"onUpdate:value":a[3]||=e=>y(f).getCurConfigComponent.chart.options.legend.left=e},{default:x(()=>[(m(),c(s,null,g(I,e=>d(y(w),{key:e.value,placement:`top`,title:e.title},{default:x(()=>[d(y(S),{class:`radio-button`,value:e.value},{default:x(()=>[d(y(E),{size:12,icon:e.icon},null,8,[`icon`])]),_:2},1032,[`value`])]),_:2},1032,[`title`])),64))]),_:1},8,[`value`]),d(y(C),{size:`small`,value:y(f).getCurConfigComponent.chart.options.legend.top,"onUpdate:value":a[4]||=e=>y(f).getCurConfigComponent.chart.options.legend.top=e},{default:x(()=>[(m(),c(s,null,g(L,e=>d(y(w),{key:e.value,placement:`top`,title:e.title},{default:x(()=>[d(y(S),{class:`radio-button`,value:e.value},{default:x(()=>[d(y(E),{size:12,icon:e.icon},null,8,[`icon`])]),_:2},1032,[`value`])]),_:2},1032,[`title`])),64))]),_:1},8,[`value`])]),l(`div`,j,[d(y(e),{prefix:`左`,"is-number":!1,placeholder:`数字或百分比`,value:y(f).getCurConfigComponent.chart.options.legend.left,"onUpdate:value":a[5]||=e=>y(f).getCurConfigComponent.chart.options.legend.left=e},null,8,[`value`]),d(y(e),{prefix:`上`,"is-number":!1,placeholder:`数字或百分比`,value:y(f).getCurConfigComponent.chart.options.legend.top,"onUpdate:value":a[6]||=e=>y(f).getCurConfigComponent.chart.options.legend.top=e},null,8,[`value`])]),a[15]||=l(`div`,{class:`title`},` 图例形状`,-1),d(y(C),{size:`small`,value:y(f).getCurConfigComponent.chart.options.legend.icon,"onUpdate:value":a[7]||=e=>y(f).getCurConfigComponent.chart.options.legend.icon=e},{default:x(()=>[(m(),c(s,null,g(z,e=>d(y(S),{key:e.value,value:e.value},{default:x(()=>[u(v(e.title),1)]),_:2},1032,[`value`])),64))]),_:1},8,[`value`]),a[16]||=l(`div`,{class:`title`},` 图例字体`,-1),d(o,{"hide-font-style":[y(n).Underline,y(n).Strikethrough],"hide-align":!0,"color-type":1,"text-style":B.value,onFontChange:W,onSizeChange:W,onHAlignChange:H,onFontStyleChange:U,onColorChange:W},null,8,[`hide-font-style`,`text-style`]),l(`div`,M,[a[14]||=u(` 图例格式 `,-1),l(`div`,null,[d(h,{value:y(f).getCurConfigComponent.chart.options.legend.formatter,"onUpdate:value":a[8]||=e=>y(f).getCurConfigComponent.chart.options.legend.formatter=e,placeholder:`格式****{name} 详情参考echarts formatter属性`},null,8,[`value`])])]),d(y(i),{checked:y(f).getCurConfigComponent.chart.options.legend.legendHoverLink,"onUpdate:checked":a[9]||=e=>y(f).getCurConfigComponent.chart.options.legend.legendHoverLink=e,title:`联动高亮`,tooltip:`鼠标移动到图例时高亮对应图形`},null,8,[`checked`])]),_:1},8,[`title-check`])],2)}}}),[[`__scopeId`,`data-v-8fab15b9`]]);export{N as t};