双十一百分比饼图是饼图的一种,与基本饼图相比,双十一百分比饼图是为双十一大屏定制的饼图组件,支持自定义图形样式和文本,能够以图文结合的方式生动地展示双十一的售卖情况,例如展示双十一超级会员的占比情况。本文档为您介绍双十一百分比饼图各配置项的含义,帮助您快速准确地使用双十一百分比饼图组件。

样式

  • 基础属性
    • 图表尺寸:组件的宽度和高度,单位为px。
    • 图表位置:组件在大屏中的位置,通过横纵坐标来定义,单位为px。
    • 其他:组件的旋转角度和透明度。
  • 饼图属性

    • 外半径:圆心到环外侧的距离,取值为占组件高度的比例,取值范围为0到1。
    • 内半径:圆心到环内侧的距离,取值为占组件高度的比例,取值范围为0到1。
    • 外圈颜色:饼图最外圈的颜色,可参考颜色选择器说明进行修改。
    • 外圈尺寸:饼图最外圈的粗细。
  • 扇形配置

    • 动画持续时间:扇形动画的持续时间。
    • 颜色渐变范围:扇形颜色的渐变类型,可选:
      • 整圆范围:对整个圆形进行渐变填充。
      • 弧形范围:对弧形进行渐变填充。
    • 颜色:渐变带中不同位置的颜色。
  • 图标:饼图中间图标的样式。

    • 地址:鼠标移至图标上面,单击删除当前图标,再次单击上传本地图标。如果您需要使用远程服务器上的图标,可输入图标地址进行配置。
    • 图标宽度:图标的宽度,单位为px。
    • 图标高度:图标的高度,单位为px。
    • 顶部偏移值:图标相对于中间区域边界的顶部偏移距离,单位为px。
    • 左侧偏移值:图标相对于中间区域边界的左侧偏移距离,单位为px。
  • 标题文本:饼图标题的样式。

    • 文本内容:标题的文本内容。
    • 文本样式
      • 字体:标题文本的字体系列,默认为微软雅黑
      • 字号:标题文本的大小。
      • 字体颜色:标题文本的颜色。
      • 字体粗细:标题文本的粗细。
      • 顶部偏移值:标题文本相对于图标的顶部偏移距离,单位为px。
      • 左侧偏移值:标题文本相对于中间区域边界的左侧偏移距离,单位为px。
  • 中间百分比部分:饼图中间百分比值的样式。

    • 外框占比:中间内容区域所占内环半径的百分比,取值范围为0到1。
    • 数字字号:百分比数值文本的大小。
    • 百分比字号:百分比文本的大小。
    • 顶部偏移值:百分比数值相对于标题的顶部偏移距离,单位为px。
    • 小数位数:百分比数值要显示的小数点的位数,取值范围为0到2。
    • 文本样式
      • 字体:百分比数值文本的字体系列,默认为微软雅黑
      • 字体颜色:百分比数值文本的颜色。
      • 字体粗细:百分比数值文本的字体粗细。

数据



上图中的示例JSON代码如下:
[
  {
    "value": 0.8048
  }
]
  • value:对应百分比的具体数值,值为小数,1表示100%。

交互

此组件没有交互事件。