通过showInPanel字段,您可以定义对应控件(组件配置项)的显隐规则。

使用场景

当一些配置项在某些条件下为无效配置,但在其他条件下为有效配置时,可以使用showInPanel字段,控制自身是否在配置面板中显示。使用showInPanel字段,可以减少信息干扰。其中条件为配置中其他配置的值。例如,当数据类型从数值型切换为时间型时,数据格式配置项会显示出来,提供给您进行配置。

showInPanel使用场景

配置规则

{
  "conditions": [
    [ "path", "operator", "value" ],
    ...
  ],
  "logicalType": "logicalType"
}
参数 说明
conditions 配置条件,array类型。其中的每一项用长度为3的数组描述一个判断条件,数组中包含pathoperatorvalue
path 配置条件依赖的配置项的路径,支持绝对路径和相对路径:
  • 绝对路径:从顶层根节点开始,使用.来拼接路径,例如chart.legend
  • 相对路径:从当前配置开始,用.来定位路径,例如.type ..legend.show
operator 操作符,支持的类型包括:
  • eq:相等
  • $ne:不相等
  • $gt:大于
  • $lt:小于
  • $gte:大于等于
  • $lte:小于等于
  • $in:在数组中
  • $nin:不在数组中
value 配置项的值。
使用场景为例,当 dataTypetime同级,且 dataType值等于 time时,显示数据格式。 conditions配置如下。
  • 相对路径
    [".type", "$eq", "time"]
  • 绝对路径
    ["options.axis.xaxis.type", "$eq", "time"]
logicalType conditions定义了若干条件,logicalType则定义了条件之间的逻辑关系。可选值包括$and(与)和$or(或),默认为$and
logicalType$and时,可以只配置 conditions数组。例如当 b.switch等于 true并且 a.switch不等于 false时,显示对应的配置项, showInPanel配置如下。
[["b.switch", "$eq", true], ["a.switch", "$ne", false]]

示例一

例如配置简写如下。

{
  chart: {
   font: {},
   margin: {}
  },
  legend: {
   switch: {},
   color: {}
  }
}

想实现的效果:当switch等于true ,或者font不等于pingfang时,margin出现在⾯板中,否则不出现。

此时可以按照以下方式配置showInPanel字段:

  • 绝对路径
    {
      conditions:  [[ 'legend.switch', '$eq', true ], [ 'chart.font', '$ne', 'pingfang' ]],
      logicalType: '$or'
    }
  • 相对路径
    {
      conditions: [[ '..legend.switch', '$eq', true ], [ '.font', '$ne', 'pingfang' ]],
      logicalType: '$or'
    }

示例二

如下图所示,textA的显示条件为switchA为true或switchB为true。

showInPanel示例
{
  "a": {
    "type": "suite",
    "name": "suiteA",
    "children": {
      "switchA": {
        "type": "switch",
        "name": "switchA",
        "default": true,
        "col": 8
      },
      "textA": {
        "type": "text",
        "name": "textA",
        "default": "A",
        "col": 16,
        "showInPanel": {
          "conditions": [
            [
              "b.switchB",
              "$eq",
              true
            ],
            [
              "a.switchA",
              "$ne",
              false
            ]
          ],
          "logicalType": "$or"
        }
      }
    }
  },
  "b": {
    "type": "suite",
    "name": "suiteB",
    "children": {
      "switchB": {
        "type": "switch",
        "name": "switchB",
        "default": false,
        "col": 8
      },
      "textB": {
        "type": "text",
        "name": "textB",
        "default": "B",
        "col": 16
      }
    }
  }
}