[]
        
在线Demo 免费试用
(Showing Draft Content)

自定义形状

功能概述

提供了自定义形状,支持用户上传SVG来描述形状,支持数据绑定和条件格式化。

1. 添加自定义形状组件

在左侧的工具栏上,选择自定义形状,直接拖到设计器上。

image

2. 基础设定

自定义形状的属性:

image

属性

描述

示例

背景色

指定SVG区域中的默认填充颜色,SVG中没有指定填充颜色节点会生效

等同于设定整个 SVG 根节点的 fill color。

image

边框颜色

指定SVG区域中的默认绘制颜色,SVG中没有指定填充颜色节点会生效

等同于设定整个 SVG 根节点的 stoke color。

image

SVG

SVG文件内容,支持用户上传一个本地的SVG文件,

或者粘贴一个SVG文件内容到输入框中。


3. 数据绑定

自定义形状的数据绑定上没有分类,只有单值的绑定,用户可以绑定很多个单值到组件上,来显示数据或者用户条件格式化。

3.1 添加数据绑定

选择目标数据集或者数据模型,直接拖拽字段到组件绑定区域,设定聚合方法。

image

4.2 显示绑定数据

打开组件的文本标签,在显示内容中插入绑定内容:

image

在文本的编辑框中可以输入其他的描述性字符使得显示内容更加的易读。

同时支持显示文本的字体设定,位置设定:

image

4. 条件格式化

条件格式化的字段来自于数据绑定:

image

数字类型和文本类型的字段具有不同的比较方法,与基础图表一致。

基础图形的条件格式化支持的样式属性包含三部分:基础样式,动画效果,文本标签。

样式

描述

基础样式

image

这里可以基于条件格式化来更换SVG图形,来实现一些特殊的效果。

文本标签

image