[Feature] 增加 splitRegion，用于展示需要关注的信息，起到警示作用

[visiky]

splitRegion

拆分区间。针对 y 通道数值设置相应的阈值，当数值大于（或小于）指定阈值时，展示指定样式的区间背景，起到警告提示的作用。

绘制层级在在图形元素下层，作为背景层

属性	描述	类型
data	数据	object
style	样式设置	object|function

data

属性	描述	类型
value	阈值。	number |[number,number]
operator	比较符。gt 表示大于阈值，lt 表示小于阈值, in 表示在阈值区间内	string
type	指定警告提示的类型，可选项：success、info、warning、error	string

style

// 通过回调设置
{
  style: (d, idx) => {
    return {};
  }
}

应用场景

原始写法

function lineThresholds() {
  return {
    type: "view",
    children: [
      {
        type: G2PlotLine,
        height: 320,
        data: {},
        encode: {},
        isStack: true,
        axis: { y: { title: false } },
        annotations: [
          {
            type: "rangeY",
            data: [
              [0, 2000],
              [2000, 3500],
              [3500, 5000],
            ],
            encode: {
              y: (d) => d,
              color: (_, idx) => `${idx}`,
            },
            scale: {
              color: {
                key: "thresholds",
                range: ["red", "orange", "green"],
              },
            },
            legend: false,
            style: {
              zIndex: -1,
            },
          },
        ],
      },
    ],
  };
}

期望写法

function lineThresholdRegion() {
  return {
    type: "view",
    children: [
      {
        type: G2PlotLine,
        height: 320,
        data: {},
        encode: {},
        isStack: true,
        axis: { y: { title: false } },
        thresholdRegion: {
          data: [
            { value: 3500, operator: "gt", type: "error" },
            { value: [2000, 2500], type: "warning" },
            { value: 2000, operator: "lt", type: "info" },
          ]
        },
      },
    ],
  };
}

[chenluli]

在想 thresholds 这种是拍平还是收到 annotations里面，作为一种 type: ‘thresholds’ 的 annotation

[visiky]

这个我也思考过，我觉得类似这种有特色还是直接作为图表的一种特性配置，另外他们和 annotations 里边的还是有些小差别的。

• annotations 中的标注其实是一种高阶 mark，配置形式和 mark 一致，有 data, encode, labels 等 mark api 配置，并且可以配置图例、轴等。
• 而针对图表类型增加的这些特性，就不是把它当作 mark 的概念了，就不再一定是和 mark api 保持一致的，并且不会有图例、tooltip、轴等内容。

对比下 使用用法：

{
   annotations: [
     { type: 'point', data: [] },  // 异常点
     { type: 'range', data: [], encode: {} }, // 异动区间
  ],
  thresholds: [
      { value: 3500, operator: "gt", type: "error" },
      { value: [2000, 2500], type: "warning" },
      { value: 2000, operator: "lt", type: "info" },
   ]
}

[chenluli]

可以，作为图表配置的 api 这样写确实可以不用额外暴露图例和轴等配置。
annotations 中的高阶 mark 可以另外封装

[visiky]

@chenluli @pepper-nice thresholdRegion 命名太长了，我改成 splitRegion 你们觉得如何

[chenluli]

👌

[pepper-nice]

operator 里面的标识符，'gt'|'lt'|'in感觉不够语义化。考虑改成：top/between/bottom ？