VisActor VBI
  • 简体中文

      • CornerRadius

      单个图元圆角

      圆角默认值为 0，不启用圆角。显式设置 cornerRadius 后，对每个图元单独绘制圆角；默认不启用整组 clip，适合平滑的更新动画。

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "column",
  "cornerRadius": [
    10,
    10,
    0,
    0
  ],
  "dataset": [
    {
      "category": "A",
      "series": "East",
      "value": 10
    },
    {
      "category": "A",
      "series": "West",
      "value": 20
    },
    {
      "category": "B",
      "series": "East",
      "value": -10
    },
    {
      "category": "B",
      "series": "West",
      "value": -20
    }
  ],
  "dimensions": [
    {
      "id": "category"
    },
    {
      "id": "series"
    }
  ],
  "measures": [
    {
      "id": "value"
    }
  ],
  "barStyle": {
    "barBorderWidth": 0
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      整组堆叠圆角

      cornerRadius 设置圆角值，stackCornerRadius: true 切换为整组堆叠圆角，通过 clip 裁剪整组，堆叠内部保持直角。开启 stackCornerRadius 会引起更新动画重叠的 bug，依赖 VChart 修复。

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "column",
  "cornerRadius": [
    10,
    10,
    0,
    0
  ],
  "stackCornerRadius": true,
  "dataset": [
    {
      "category": "A",
      "series": "East",
      "value": 10
    },
    {
      "category": "A",
      "series": "West",
      "value": 20
    },
    {
      "category": "B",
      "series": "East",
      "value": -10
    },
    {
      "category": "B",
      "series": "West",
      "value": -20
    }
  ],
  "dimensions": [
    {
      "id": "category"
    },
    {
      "id": "series"
    }
  ],
  "measures": [
    {
      "id": "value"
    }
  ],
  "barStyle": {
    "barBorderWidth": 0
  }
}

  return <VSeedRender vseed={vseedConfig} />
}