基础控件（13个）

fill radio buttonRadio iconRadio image imageSelect text switch stepper select keyboard slider checkbox

高频套件（4个）

suite font line margin

组合控件（3个）

tabs group menu

最终产出

通过本文档的学习，您将能够书写出一份华丽的配置，并使用该配置，通过ali/react-datav-gui渲染得到配置面板。例如：
image.png

  1. {
  2.   "options": {
  3.     "type": "menu",
  4.     "children": {
  5.       "chart": {
  6.         "name": "图表",
  7.         "children": {
  8.           "margin": {
  9.             "type": "margin",
  10.             "name": "边距",
  11.             "default": {
  12.               "top": 20,
  13.               "bottom": 30,
  14.               "left": 35,
  15.               "right": 15
  16.             }
  17.           },
  18.           "loadAmount": {
  19.             "name": "最多加载",
  20.             "description": "为保证大屏展示效果此组件开启数据加载限制，最多加载前指定条数据记录进行计算、布局与绘制",
  21.             "type": "stepper",
  22.             "default": 2000,
  23.             "step": 1
  24.           },
  25.           "bar": {
  26.             "name": "柱图样式",
  27.             "type": "group",
  28.             "children": {
  29.               "bgColor": {
  30.                 "name": "背景颜色",
  31.                 "type": "fill",
  32.                 "default": "RGBA(255,255,255,0.1)"
  33.               }
  34.             }
  35.           },
  36.           "numericalLabel": {
  37.             "name": "值标签",
  38.             "type": "group",
  39.             "children": {
  40.               "show": {
  41.                 "name": "显示/隐藏",
  42.                 "type": "boolean",
  43.                 "default": false
  44.               },
  45.               "textStyle": {
  46.                 "type": "font",
  47.                 "name": "文本",
  48.                 "default": {
  49.                   "fontFamily": "Microsoft Yahei",
  50.                   "fontWeight": "normal",
  51.                   "fontSize": 10,
  52.                   "color": "#000"
  53.                 }
  54.               },
  55.               "pos": {
  56.                 "name": "位置",
  57.                 "type": "iconRadio",
  58.                 "default": "center",
  59.                 "options": [
  60.                   {
  61.                     "label": "顶部",
  62.                     "value": "top",
  63.                     "src": "top-center-pos"
  64.                   },
  65.                   {
  66.                     "label": "中间",
  67.                     "value": "center",
  68.                     "src": "middle-center-pos"
  69.                   },
  70.                   {
  71.                     "label": "底部",
  72.                     "value": "bottom",
  73.                     "src": "bottom-center-pos"
  74.                   }
  75.                 ]
  76.               },
  77.               "emptyData": {
  78.                 "name": "空值数据",
  79.                 "type": "switch",
  80.                 "default": false
  81.               }
  82.             },
  83.             "enableHide": true
  84.           }
  85.         },
  86.         "type": "menuChild",
  87.         "mode": "single"
  88.       },
  89.       "axis": {
  90.         "name": "坐标轴",
  91.         "children": {
  92.           "xaxis": {
  93.             "name": "x轴",
  94.             "children": {
  95.               "isShow": {
  96.                 "type": "switch",
  97.                 "name": "x轴可见",
  98.                 "default": true
  99.               },
  100.               "boundaryGap": {
  101.                 "type": "slider",
  102.                 "name": "两边留白",
  103.                 "default": 0.6,
  104.                 "step": 0.01,
  105.                 "min": 0,
  106.                 "max": 1,
  107.                 "precision": 2,
  108.                 "showInPanel": {
  109.                   "conditions": [
  110.                     [
  111.                       ".isShow",
  112.                       "$eq",
  113.                       true
  114.                     ]
  115.                   ],
  116.                   "logicalType": "$and"
  117.                 }
  118.               },
  119.               "interval": {
  120.                 "type": "slider",
  121.                 "name": "分割间隔",
  122.                 "default": 0.6,
  123.                 "step": 0.01,
  124.                 "min": 0,
  125.                 "max": 0.95,
  126.                 "precision": 2,
  127.                 "showInPanel": {
  128.                   "conditions": [
  129.                     [
  130.                       ".isShow",
  131.                       "$eq",
  132.                       true
  133.                     ]
  134.                   ],
  135.                   "logicalType": "$and"
  136.                 }
  137.               },
  138.               "label": {
  139.                 "name": "轴标签",
  140.                 "type": "group",
  141.                 "enableHide": true,
  142.                 "children": {
  143.                   "show": {
  144.                     "default": true
  145.                   },
  146.                   "format": {
  147.                     "name": "显示格式",
  148.                     "type": "select",
  149.                     "default": "%m月",
  150.                     "description": "时间请参照 %m/%d/%Y %H:%M:%S, 整数参照 d, 浮点参照 .1f",
  151.                     "options": [
  152.                       {
  153.                         "value": "d",
  154.                         "label": "11(整数)"
  155.                       },
  156.                       {
  157.                         "value": ".1f",
  158.                         "label": "11.1(浮点数)"
  159.                       },
  160.                       {
  161.                         "value": ".2f",
  162.                         "label": "11.11(浮点数)"
  163.                       },
  164.                       {
  165.                         "value": "%Y年",
  166.                         "label": "2016年"
  167.                       },
  168.                       {
  169.                         "value": "%Y",
  170.                         "label": "2016(年份)"
  171.                       },
  172.                       {
  173.                         "value": "%m月%d日",
  174.                         "label": "01月01日"
  175.                       },
  176.                       {
  177.                         "value": "%m/%d",
  178.                         "label": "01/01(月/日)"
  179.                       },
  180.                       {
  181.                         "value": "%H:%M:%S",
  182.                         "label": "02:30:00"
  183.                       },
  184.                       {
  185.                         "value": "%H:%M",
  186.                         "label": "02:30(时:分)"
  187.                       },
  188.                       {
  189.                         "value": "%Y/%m/%d %H:%M",
  190.                         "label": "2016/01/01 02:30"
  191.                       },
  192.                       {
  193.                         "value": "%Y/%m/%d",
  194.                         "label": "2016/01/01"
  195.                       },
  196.                       {
  197.                         "value": "%m/%d %H:%M",
  198.                         "label": "01/01 02:30"
  199.                       },
  200.                       {
  201.                         "value": "%m月",
  202.                         "label": "1月"
  203.                       },
  204.                       {
  205.                         "value": "%d日",
  206.                         "label": "2日"
  207.                       },
  208.                       {
  209.                         "value": "%Hh",
  210.                         "label": "02h"
  211.                       },
  212.                       {
  213.                         "value": "%H",
  214.                         "label": "02(时)"
  215.                       },
  216.                       {
  217.                         "value": "%m-%d",
  218.                         "label": "01-01"
  219.                       },
  220.                       {
  221.                         "value": "%m.%d",
  222.                         "label": "01.01"
  223.                       }
  224.                     ],
  225.                     "filterable": true,
  226.                     "allowCustom": true,
  227.                     "showInPanel": {
  228.                       "conditions": [
  229.                         [
  230.                           "..type",
  231.                           "$ne",
  232.                           "category"
  233.                         ]
  234.                       ]
  235.                     }
  236.                   },
  237.                   "textarea": {
  238.                     "type": "font",
  239.                     "name": "文本",
  240.                     "default": {
  241.                       "fontFamily": "Microsoft Yahei",
  242.                       "fontWeight": "normal",
  243.                       "fontSize": 12,
  244.                       "color": "rgb(144, 160, 174)"
  245.                     }
  246.                   },
  247.                   "display": {
  248.                     "type": "suite",
  249.                     "name": "轴标签展示",
  250.                     "children": {
  251.                       "angle": {
  252.                         "name": "角度",
  253.                         "type": "iconRadio",
  254.                         "default": "0",
  255.                         "options": [
  256.                           {
  257.                             "value": "0",
  258.                             "label": "水平",
  259.                             "src": "horizontal"
  260.                           },
  261.                           {
  262.                             "value": "45",
  263.                             "label": "斜角",
  264.                             "src": "incline"
  265.                           },
  266.                           {
  267.                             "value": "90",
  268.                             "label": "垂直",
  269.                             "src": "vertical"
  270.                           }
  271.                         ],
  272.                         "col": 12
  273.                       },
  274.                       "amount": {
  275.                         "name": "数量",
  276.                         "type": "stepper",
  277.                         "default": 0,
  278.                         "min": 0,
  279.                         "step": 1,
  280.                         "description": "坐标轴刻度标签最多显示个数",
  281.                         "col": 12
  282.                       },
  283.                       "unit": {
  284.                         "type": "text",
  285.                         "default": "",
  286.                         "name": "轴单位",
  287.                         "col": 12
  288.                       }
  289.                     }
  290.                   }
  291.                 },
  292.                 "showInPanel": {
  293.                   "conditions": [
  294.                     [
  295.                       ".isShow",
  296.                       "$eq",
  297.                       true
  298.                     ]
  299.                   ]
  300.                 }
  301.               },
  302.               "axisLine": {
  303.                 "name": "轴线",
  304.                 "type": "group",
  305.                 "children": {
  306.                   "show": {
  307.                     "default": true
  308.                   },
  309.                   "color": {
  310.                     "type": "fill",
  311.                     "name": "颜色",
  312.                     "default": "rgba(255, 255, 255, 0.1)"
  313.                   }
  314.                 },
  315.                 "enableHide": true,
  316.                 "showInPanel": {
  317.                   "conditions": [
  318.                     [
  319.                       ".isShow",
  320.                       "$eq",
  321.                       true
  322.                     ]
  323.                   ]
  324.                 }
  325.               },
  326.               "grid": {
  327.                 "name": "网格线",
  328.                 "type": "group",
  329.                 "children": {
  330.                   "show": {
  331.                     "default": false
  332.                   },
  333.                   "color": {
  334.                     "type": "fill",
  335.                     "name": "颜色",
  336.                     "default": "#fff"
  337.                   }
  338.                 },
  339.                 "enableHide": true,
  340.                 "showInPanel": {
  341.                   "conditions": [
  342.                     [
  343.                       ".isShow",
  344.                       "$eq",
  345.                       true
  346.                     ]
  347.                   ]
  348.                 }
  349.               }
  350.             },
  351.             "enableHide": true
  352.           },
  353.           "yaxis": {
  354.             "name": "y轴",
  355.             "children": {
  356.               "isShow": {
  357.                 "name": "y轴可见",
  358.                 "type": "switch",
  359.                 "default": true
  360.               },
  361.               "extent": {
  362.                 "type": "suite",
  363.                 "name": "范围",
  364.                 "children": {
  365.                   "min": {
  366.                     "type": "select",
  367.                     "name": "最小值",
  368.                     "default": "0",
  369.                     "description": "可输入数值来自定义标签最小值。",
  370.                     "options": [
  371.                       {
  372.                         "value": "auto",
  373.                         "label": "自动取整"
  374.                       },
  375.                       {
  376.                         "value": "dataMin",
  377.                         "label": "数据最小值"
  378.                       }
  379.                     ],
  380.                     "filterable": true,
  381.                     "allowCustom": true,
  382.                     "col": 12
  383.                   },
  384.                   "max": {
  385.                     "type": "select",
  386.                     "name": "最大值",
  387.                     "default": "dataMax",
  388.                     "description": "可输入数值来自定义标签最大值。",
  389.                     "options": [
  390.                       {
  391.                         "value": "auto",
  392.                         "label": "自动取整"
  393.                       },
  394.                       {
  395.                         "value": "dataMax",
  396.                         "label": "数据最大值"
  397.                       }
  398.                     ],
  399.                     "filterable": true,
  400.                     "allowCustom": true,
  401.                     "col": 12
  402.                   }
  403.                 },
  404.                 "showInPanel": {
  405.                   "conditions": [
  406.                     [
  407.                       ".isShow",
  408.                       "$eq",
  409.                       true
  410.                     ]
  411.                   ]
  412.                 }
  413.               },
  414.               "label": {
  415.                 "name": "轴标签",
  416.                 "type": "group",
  417.                 "enableHide": true,
  418.                 "children": {
  419.                   "format": {
  420.                     "name": "显示格式",
  421.                     "type": "select",
  422.                     "default": ".0f",
  423.                     "description": "整数参照 d, 浮点参照 .1f",
  424.                     "options": [
  425.                       {
  426.                         "value": null,
  427.                         "label": "默认"
  428.                       },
  429.                       {
  430.                         "value": ".0f",
  431.                         "label": "11(整数)"
  432.                       },
  433.                       {
  434.                         "value": ".1f",
  435.                         "label": "11.1(浮点数)"
  436.                       },
  437.                       {
  438.                         "value": ".2f",
  439.                         "label": "11.11(浮点数)"
  440.                       },
  441.                       {
  442.                         "value": "%",
  443.                         "label": "11%"
  444.                       },
  445.                       {
  446.                         "value": ".1%",
  447.                         "label": "11.1%"
  448.                       },
  449.                       {
  450.                         "value": ".2%",
  451.                         "label": "11.11%"
  452.                       }
  453.                     ],
  454.                     "filterable": true,
  455.                     "allowCustom": true
  456.                   },
  457.                   "textarea": {
  458.                     "type": "font",
  459.                     "name": "文本",
  460.                     "default": {
  461.                       "fontFamily": "Microsoft Yahei",
  462.                       "fontWeight": "normal",
  463.                       "fontSize": 12,
  464.                       "color": "rgb(144, 160, 174)"
  465.                     }
  466.                   },
  467.                   "display": {
  468.                     "type": "suite",
  469.                     "name": "轴标签展示",
  470.                     "children": {
  471.                       "amount": {
  472.                         "name": "数量",
  473.                         "type": "stepper",
  474.                         "default": 6,
  475.                         "min": 0,
  476.                         "step": 1,
  477.                         "description": "坐标轴刻度标签最多显示个数",
  478.                         "col": 12
  479.                       },
  480.                       "unit": {
  481.                         "type": "text",
  482.                         "name": "单位",
  483.                         "default": "",
  484.                         "col": 12,
  485.                         "enableHide": true
  486.                       }
  487.                     }
  488.                   }
  489.                 },
  490.                 "showInPanel": {
  491.                   "conditions": [
  492.                     [
  493.                       ".isShow",
  494.                       "$eq",
  495.                       true
  496.                     ]
  497.                   ]
  498.                 }
  499.               },
  500.               "axisLine": {
  501.                 "name": "轴线",
  502.                 "type": "group",
  503.                 "children": {
  504.                   "show": {
  505.                     "default": true
  506.                   },
  507.                   "color": {
  508.                     "type": "fill",
  509.                     "name": "颜色",
  510.                     "default": "rgba(255, 255, 255, 0.1)"
  511.                   }
  512.                 },
  513.                 "enableHide": true,
  514.                 "showInPanel": {
  515.                   "conditions": [
  516.                     [
  517.                       ".isShow",
  518.                       "$eq",
  519.                       true
  520.                     ]
  521.                   ]
  522.                 }
  523.               },
  524.               "grid": {
  525.                 "name": "网格线",
  526.                 "type": "group",
  527.                 "children": {
  528.                   "show": {
  529.                     "default": false
  530.                   },
  531.                   "color": {
  532.                     "type": "fill",
  533.                     "name": "颜色",
  534.                     "default": "#434343"
  535.                   }
  536.                 },
  537.                 "enableHide": true,
  538.                 "showInPanel": {
  539.                   "conditions": [
  540.                     [
  541.                       ".isShow",
  542.                       "$eq",
  543.                       true
  544.                     ]
  545.                   ]
  546.                 }
  547.               }
  548.             },
  549.             "enableHide": true
  550.           }
  551.         },
  552.         "type": "menuChild",
  553.         "mode": "multiple"
  554.       },
  555.       "series": {
  556.         "type": "menuChild",
  557.         "name": "系列",
  558.         "children": {
  559.           "series2type": {
  560.             "type": "switch",
  561.             "name": "系列转类型",
  562.             "default": false
  563.           },
  564.           "series": {
  565.             "type": "tabs",
  566.             "name": "数据系列",
  567.             "default": [
  568.               {
  569.                 "color": {
  570.                   "type": "flat",
  571.                   "value": "rgb(10, 115, 255)"
  572.                 }
  573.               }
  574.             ],
  575.             "template": {
  576.               "type": "object",
  577.               "name": "系列<%= i + 1%>",
  578.               "children": {
  579.                 "color": {
  580.                   "name": "颜色",
  581.                   "type": "fill",
  582.                   "default": {
  583.                     "type": "flat",
  584.                     "value": "rgba(131,32,220,0.5)"
  585.                   },
  586.                   "components": [
  587.                     "flat",
  588.                     "linearGradient"
  589.                   ]
  590.                 }
  591.               }
  592.             }
  593.           }
  594.         }
  595.       },
  596.       "others": {
  597.         "name": "其它",
  598.         "children": {
  599.           "animation": {
  600.             "name": "缓动动画",
  601.             "type": "group",
  602.             "fold": true,
  603.             "children": {
  604.               "show": {
  605.                 "default": true
  606.               },
  607.               "setting": {
  608.                 "type": "suite",
  609.                 "name": "动画设置",
  610.                 "children": {
  611.                   "animationEasing": {
  612.                     "name": "缓动效果",
  613.                     "type": "select",
  614.                     "options": [
  615.                       {
  616.                         "value": "linear",
  617.                         "label": "linear"
  618.                       },
  619.                       {
  620.                         "value": "quadraticIn",
  621.                         "label": "quadraticIn"
  622.                       },
  623.                       {
  624.                         "value": "quadraticOut",
  625.                         "label": "quadraticOut"
  626.                       },
  627.                       {
  628.                         "value": "quadraticInOut",
  629.                         "label": "quadraticInOut"
  630.                       },
  631.                       {
  632.                         "value": "cubicIn",
  633.                         "label": "cubicIn"
  634.                       },
  635.                       {
  636.                         "value": "cubicOut",
  637.                         "label": "cubicOut"
  638.                       },
  639.                       {
  640.                         "value": "cubicInOut",
  641.                         "label": "cubicInOut"
  642.                       },
  643.                       {
  644.                         "value": "quarticIn",
  645.                         "label": "quarticIn"
  646.                       },
  647.                       {
  648.                         "value": "quarticOut",
  649.                         "label": "quarticOut"
  650.                       },
  651.                       {
  652.                         "value": "quarticInOut",
  653.                         "label": "quarticInOut"
  654.                       },
  655.                       {
  656.                         "value": "quinticIn",
  657.                         "label": "quinticIn"
  658.                       },
  659.                       {
  660.                         "value": "quinticOut",
  661.                         "label": "quinticOut"
  662.                       },
  663.                       {
  664.                         "value": "quinticInOut",
  665.                         "label": "quinticInOut"
  666.                       },
  667.                       {
  668.                         "value": "sinusoidalIn",
  669.                         "label": "sinusoidalIn"
  670.                       },
  671.                       {
  672.                         "value": "sinusoidalOut",
  673.                         "label": "sinusoidalOut"
  674.                       },
  675.                       {
  676.                         "value": "sinusoidalInOut",
  677.                         "label": "sinusoidalInOut"
  678.                       },
  679.                       {
  680.                         "value": "exponentialIn",
  681.                         "label": "exponentialIn"
  682.                       },
  683.                       {
  684.                         "value": "exponentialOut",
  685.                         "label": "exponentialOut"
  686.                       },
  687.                       {
  688.                         "value": "exponentialInOut",
  689.                         "label": "exponentialInOut"
  690.                       },
  691.                       {
  692.                         "value": "circularIn",
  693.                         "label": "circularIn"
  694.                       },
  695.                       {
  696.                         "value": "circularOut",
  697.                         "label": "circularOut"
  698.                       },
  699.                       {
  700.                         "value": "circularInOut",
  701.                         "label": "circularInOut"
  702.                       },
  703.                       {
  704.                         "value": "elasticIn",
  705.                         "label": "elasticIn"
  706.                       },
  707.                       {
  708.                         "value": "elasticOut",
  709.                         "label": "elasticOut"
  710.                       },
  711.                       {
  712.                         "value": "elasticInOut",
  713.                         "label": "elasticInOut"
  714.                       },
  715.                       {
  716.                         "value": "backIn",
  717.                         "label": "backIn"
  718.                       },
  719.                       {
  720.                         "value": "backOut",
  721.                         "label": "backOut"
  722.                       },
  723.                       {
  724.                         "value": "backInOut",
  725.                         "label": "backInOut"
  726.                       },
  727.                       {
  728.                         "value": "bounceIn",
  729.                         "label": "bounceIn"
  730.                       },
  731.                       {
  732.                         "value": "bounceOut",
  733.                         "label": "bounceOut"
  734.                       },
  735.                       {
  736.                         "value": "bounceInOut",
  737.                         "label": "bounceInOut"
  738.                       }
  739.                     ],
  740.                     "default": "cubicInOut",
  741.                     "filterable": true,
  742.                     "allowCustom": true,
  743.                     "col": 12
  744.                   },
  745.                   "animationAfterPreviousSeries": {
  746.                     "name": "各系列依次动画",
  747.                     "type": "switch",
  748.                     "default": false,
  749.                     "col": 12
  750.                   }
  751.                 }
  752.               },
  753.               "enter": {
  754.                 "type": "suite",
  755.                 "name": "入场动画",
  756.                 "children": {
  757.                   "animationDuration": {
  758.                     "name": "初始动画时长",
  759.                     "type": "stepper",
  760.                     "step": 1,
  761.                     "default": 1000,
  762.                     "col": 12,
  763.                     "suffix": "ms"
  764.                   }
  765.                 }
  766.               },
  767.               "update": {
  768.                 "type": "suite",
  769.                 "name": "更新动画",
  770.                 "children": {
  771.                   "animationDurationUpdate": {
  772.                     "name": "更新动画时长",
  773.                     "type": "stepper",
  774.                     "default": 300,
  775.                     "step": 1,
  776.                     "col": 12,
  777.                     "suffix": "ms"
  778.                   },
  779.                   "animationUpdateFromPrevious": {
  780.                     "name": "是否从之前位置开始",
  781.                     "type": "switch",
  782.                     "default": true,
  783.                     "col": 12
  784.                   }
  785.                 }
  786.               }
  787.             },
  788.             "enableHide": true
  789.           },
  790.           "tooltip": {
  791.             "name": "提示框",
  792.             "type": "group",
  793.             "fold": true,
  794.             "children": {
  795.               "show": {
  796.                 "default": true
  797.               },
  798.               "hideDelay": {
  799.                 "name": "消失延迟时间",
  800.                 "type": "stepper",
  801.                 "default": 100,
  802.                 "step": 1,
  803.                 "suffix": "ms"
  804.               },
  805.               "trigger": {
  806.                 "type": "suite",
  807.                 "name": "触发方式",
  808.                 "children": {
  809.                   "type": {
  810.                     "name": "触发类型",
  811.                     "type": "iconRadio",
  812.                     "options": [
  813.                       {
  814.                         "value": "item",
  815.                         "label": "数据项",
  816.                         "src": "item"
  817.                       },
  818.                       {
  819.                         "value": "axis",
  820.                         "label": "坐标轴",
  821.                         "src": "axis"
  822.                       }
  823.                     ],
  824.                     "default": "item",
  825.                     "col": 12
  826.                   },
  827.                   "action": {
  828.                     "name": "触发动作",
  829.                     "type": "iconRadio",
  830.                     "options": [
  831.                       {
  832.                         "value": "hover",
  833.                         "label": "悬浮",
  834.                         "src": "hover"
  835.                       },
  836.                       {
  837.                         "value": "click",
  838.                         "label": "点击",
  839.                         "src": "click"
  840.                       }
  841.                     ],
  842.                     "default": "hover",
  843.                     "col": 12
  844.                   }
  845.                 }
  846.               },
  847.               "textStyle": {
  848.                 "name": "文本样式",
  849.                 "type": "font",
  850.                 "default": {
  851.                   "fontFamily": "Microsoft Yahei",
  852.                   "fontWeight": "normal",
  853.                   "fontSize": 14,
  854.                   "color": "#fff"
  855.                 }
  856.               },
  857.               "axisPointer": {
  858.                 "name": "坐标轴指示器",
  859.                 "type": "group",
  860.                 "fold": true,
  861.                 "children": {
  862.                   "show": {
  863.                     "name": "显示/隐藏",
  864.                     "type": "boolean",
  865.                     "default": true
  866.                   },
  867.                   "_type": {
  868.                     "name": "类型",
  869.                     "type": "select",
  870.                     "options": [
  871.                       {
  872.                         "name": "直线指示器",
  873.                         "value": "line"
  874.                       }
  875.                     ],
  876.                     "default": "line",
  877.                     "showInPanel": {
  878.                       "conditions": [
  879.                         [
  880.                           ".show",
  881.                           "$eq",
  882.                           true
  883.                         ]
  884.                       ]
  885.                     }
  886.                   },
  887.                   "lineStyle": {
  888.                     "name": "指示线样式",
  889.                     "type": "suite",
  890.                     "fold": true,
  891.                     "showInPanel": {
  892.                       "conditions": [
  893.                         [
  894.                           ".show",
  895.                           "$eq",
  896.                           true
  897.                         ],
  898.                         [
  899.                           "._type",
  900.                           "$eq",
  901.                           "line"
  902.                         ]
  903.                       ]
  904.                     },
  905.                     "children": {
  906.                       "width": {
  907.                         "name": "宽度",
  908.                         "type": "stepper",
  909.                         "step": 1,
  910.                         "default": 1,
  911.                         "col": 12,
  912.                         "suffix": "px"
  913.                       },
  914.                       "_type": {
  915.                         "name": "类型",
  916.                         "type": "iconRadio",
  917.                         "options": [
  918.                           {
  919.                             "name": "实线",
  920.                             "value": "solid",
  921.                             "src": "solid"
  922.                           },
  923.                           {
  924.                             "name": "虚线",
  925.                             "value": "dashed",
  926.                             "src": "dashed-line"
  927.                           },
  928.                           {
  929.                             "name": "点线",
  930.                             "value": "dotted",
  931.                             "src": "dot-line"
  932.                           }
  933.                         ],
  934.                         "default": "solid",
  935.                         "col": 12
  936.                       },
  937.                       "color": {
  938.                         "name": "颜色",
  939.                         "type": "fill",
  940.                         "default": "#f00",
  941.                         "col": 24
  942.                       }
  943.                     }
  944.                   }
  945.                 },
  946.                 "enableHide": true,
  947.                 "showInPanel": {
  948.                   "conditions": [
  949.                     [
  950.                       ".trigger.type",
  951.                       "$eq",
  952.                       "axis"
  953.                     ]
  954.                   ]
  955.                 }
  956.               },
  957.               "bgBox": {
  958.                 "name": "背景框样式",
  959.                 "type": "group",
  960.                 "children": {
  961.                   "backgroundColor": {
  962.                     "name": "背景色",
  963.                     "type": "fill",
  964.                     "default": "rgba(0, 0, 0, 0.65)"
  965.                   },
  966.                   "customSize": {
  967.                     "name": "自定义",
  968.                     "type": "suite",
  969.                     "children": {
  970.                       "show": {
  971.                         "default": false
  972.                       },
  973.                       "width": {
  974.                         "name": "宽度",
  975.                         "type": "stepper",
  976.                         "default": 150,
  977.                         "step": 1,
  978.                         "col": 12,
  979.                         "suffix": "px"
  980.                       },
  981.                       "height": {
  982.                         "name": "高度",
  983.                         "type": "stepper",
  984.                         "default": 50,
  985.                         "step": 1,
  986.                         "col": 12,
  987.                         "suffix": "px"
  988.                       }
  989.                     },
  990.                     "enableHide": true
  991.                   },
  992.                   "padding": {
  993.                     "name": "内边距",
  994.                     "type": "stepper",
  995.                     "default": 10,
  996.                     "step": 1,
  997.                     "suffix": "px"
  998.                   },
  999.                   "offset": {
  1000.                     "type": "suite",
  1001.                     "name": "偏移量",
  1002.                     "children": {
  1003.                       "xOffset": {
  1004.                         "name": "水平偏移量",
  1005.                         "type": "stepper",
  1006.                         "default": 6,
  1007.                         "step": 1,
  1008.                         "col": 12,
  1009.                         "suffix": "px"
  1010.                       },
  1011.                       "yOffset": {
  1012.                         "name": "垂直偏移量",
  1013.                         "type": "stepper",
  1014.                         "default": 10,
  1015.                         "step": 1,
  1016.                         "col": 12,
  1017.                         "suffix": "px"
  1018.                       }
  1019.                     }
  1020.                   },
  1021.                   "border": {
  1022.                     "type": "suite",
  1023.                     "name": "边框",
  1024.                     "children": {
  1025.                       "borderWidth": {
  1026.                         "name": "边框粗细",
  1027.                         "type": "stepper",
  1028.                         "step": 1,
  1029.                         "default": 0,
  1030.                         "col": 12,
  1031.                         "suffix": "px"
  1032.                       },
  1033.                       "borderColor": {
  1034.                         "name": "边框颜色",
  1035.                         "type": "fill",
  1036.                         "default": "#333",
  1037.                         "col": 12
  1038.                       }
  1039.                     }
  1040.                   }
  1041.                 }
  1042.               }
  1043.             },
  1044.             "enableHide": true
  1045.           }
  1046.         },
  1047.         "type": "menuChild",
  1048.         "mode": "single"
  1049.       }
  1050.     }
  1051.   }
  1052. }