水球图

水球图是常规图表的一种，支持自定义SVG图形展示，能够通过自定义系列的文本或者图片达到多种效果，适用于展示单一数据的完成情况。本文档为您介绍基础款水球图各配置项的含义，帮助您快速准确地使用水球图组件。

配置

• 基础设置

  • width：组件在编辑器中的宽度

  • height：组件在编辑器中的高度

  • top：组件与编辑器顶部的距离

  • left：组件与编辑器左侧的距离

• 全局

  • 形状：水球图的展示图形，支持自定义SVG代码定制化展示

  • 自定义path：如果选择了“自定义svg”形状，可在此处输入自定义svg的path路径

    

  • 图形大小：图形在划定区域内的大小

    

• 轮廓

  • 显示/隐藏：是否展示水球图的轮廓

  • 内部间距：展示的轮廓与水球图的间距

    

  • 轮廓样式

    • 宽度：轮廓的宽度

    • 颜色：轮廓的颜色，支持hex、rgb以及rgba格式的色值

    • 阴影颜色：轮廓的阴影颜色，支持hex、rgb以及rgba格式的色值

    • 阴影范围：轮廓的阴影范围

    • 透明度：轮廓的透明度

    

• 波浪

  • 振幅：波浪的振动幅度，值越大，波浪越大

    

  • 荡漾方向：选择波浪荡漾的方向，可选从左到右、从右到左

  • 波浪颜色：配合数据项wave字段，控制波浪的颜色

    return { 
      wave: [0.5]
    }
    

    

  • 样式

    • 阴影颜色：波浪阴影的颜色

    • 阴影范围：波浪阴影的范围

    • 透明度：波浪的透明度

  • 动画

    • 开启：是否开启波浪的滚动动画

    • 动画时长：控制波浪滚动的快慢，时间越短，波浪滚动频率越快

• 背景

  • 背景颜色：是否展示该表图的图例

    

  • 边框宽度：图形的边框宽度

  • 边框颜色：图形的边框颜色

    

• 自定义元素

  该配置项为一个数组，可配置多个自定义元素，自定义的元素可以是普通文本也可以是图片

  • 类型：选择自定义元素的类型，可选：文本、图片

  • 位置

    • 控制类型：位置的控制类型，可选：系统控制、手动控制

    • 系统控制

      • 横向位置：可选居左、居中、居右

      • 纵向位置：可选上侧、居中、下侧

    • 手动控制

      • 左边距：自定义元素的左边距

      • 上边距：自定义元素的上边距

  • 文本

    • 文本内容：文本所要展示的内容

    • 字号：文本的字体大小

    • 颜色：文本的颜色，支持hex、rgb以及rgba格式的色值

    • 字体：文本的字体

    • 字体粗细：文本字体的粗细

    

  • 图片

    • 上传图片：上传本地的图片

    • 图片宽度：设置图片的宽度

    • 图片高度：设置图片的高度

    

数据

return [{
    graphic:[{
        text:"xxx"
    },{
        image:"https://xxx.png"
    }],
    wave:[0.5]
}]

如果在配置项和数据项均对自定义元素进行了配置，系统会优先选择数据项的配置

• wave：波浪的数据值，可配置多条波浪，取值0-1

• graphic：自定元素集合

  • text：自定义的文本内容

  • image：自定义图片的在线链接地址