全部产品
弹性计算 会员服务 网络 安全 移动云 数加·大数据分析及展现 数加·大数据应用 管理与监控 云通信 阿里云办公 培训与认证 智能硬件
存储与CDN 数据库 域名与网站(万网) 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网 更多
DataV数据可视化

饼图类

更新时间:2018-02-01 17:53:08

轮播饼图

样式

饼图属性

  • 内半径:内半径的尺寸比例。
  • 外半径:外半径的尺寸比例。

image

  • 动画时长:各类别的扇形部分从饼图中向外突出时移动的时间为多久。
  • 轮播间隔:一个类别的饼图向外突出的动画完成,等待多久后进行回缩并开始下一个类别的扇形向外突出动画。

image

中间百分比部分

文本样式

  • 文字:控制中间百分比部分的字体,选择的字体操作系统里都必须有,没有则会以默认字体显示。

  • 字体颜色:控制中间百分比部分字体的颜色。

  • 字体粗细:控制中间百分比部分字体的粗细。

    image

  • 显示真实值:默认显示百分比值,勾选后显示真实数据数值。

image

  • 百分比符号:数值显示为其所占比例时后面的符号。
  • 百分号字号:设置百分比符号的大小。
  • 百分比位置:设置百分比符号的位置,“前置”or“后置”。
  • 百分比偏移值:设置百分比符号和前面百分数的距离。★注:以上四个百分相关设置仅在未勾选“显示真实值”时有效。image
  • 小数点位数:显示几位小数,百分比和真实数据都适用。

image

  • 外框占比:外框所占的比例。若设置的小,会导致数字和符号显示在两行,过小则会挤在一起。
  • 数字占比:设置中间百分比部分显示的高低,以及百分数字和下面描述的距离。

imageimageimage

  • 数字字号:数字的大小。
  • 描述字号:数字下的类别名的大小。

image

图例

文本

  • 字号:下方系列名的字的大小。
  • 颜色:下方系列名的字的颜色。image布局间距
  • 左右间距:每个系列的系列标识之间的间隔。
  • 上下间隔:每行系列标识和下一行的间隔。
  • 位置:系列标识的放置及排列方式image

自定义类别

标签

  • 类别名:需要与数据中type字段匹配。
  • 背景颜色:该类别在饼图中所显示的颜色。image

图表尺寸位置

  • 图表尺寸:通过修改宽度和长度调整图表的大小以及标签显示的布局。
  • 图表位置:修改横坐标和纵坐标来改变图表在布局中的位置。

数据

  • type字段:区分不同类别,与类别中的类别名对应。
  • value字段:类别值得大小。

image

单值百分比饼图

样式

饼图属性

  • 内半径:内半径的尺寸比例。
  • 外半径:外半径的尺寸比例。
  • 饼图填充底色:饼图的底色,扇形未覆盖部分。

image

扇形配置

  • 起点色值:最上方扇形起始点的颜色。
  • 末端色值:饼图末尾处的颜色,决定了扇形从起始点开始后如何渐变最后成为末端色值。
  • 动画持续时间:饼图从上方起点逐渐增长直至末尾的持续时间。

image

中间百分比部分

文本样式

  • 字体:控制中间百分比部分的字体,选择的字体操作系统里都必须有,没有则会以默认字体显示。
  • 字体颜色:控制中间百分比部分字体的颜色。
  • 字体粗细:控制中间百分比部分字体的粗细。
  • 外框占比:外框所占的比例。若设置的小,会导致数字和符号显示在两行,过小则会挤在一起。image
  • 数字字号:数字的大小。
  • 百分比符号:数值显示为其所占比例时后面的符号。
  • 百分号字号:设置百分比符号的大小。
  • 百分比位置:设置百分比符号的位置,“前置”or“后置”。
  • 百分比偏移值:设置百分比符号和前面百分数的距离。

image

图表尺寸位置

  • 图表尺寸:修改宽度和长度调整图表的大小。
  • 图表位置:修改横坐标和纵坐标改变图表在布局中的位置。

数据

  • Value字段:扇形所占饼图的百分比。值为小数,1是100%。

image

指标对比饼图

样式

  • 字体:控制中间百分比部分的字体,选择的字体操作系统里都必须有,没有则会以默认字体显示。

容器

  • 内边距:距离左边和上下边的边距,若过大,饼图会脱离出图表。

image

标签

  • 颜色:上方和下方标签的颜色。
  • 背景色:标签所占行的背景色。
  • 字号:标签字的大小。

image

图表

  • 颜色:饼图中百分数的颜色。
  • 装饰色:饼图外边框和中心点的颜色。
  • 背景色:饼图所占用行的背景颜色。

image

边距:

  • 上边距:饼图距离上方标签的距离。
  • 下边距:饼图距离下方标签的距离。

起始角度偏移:饼图外边框内的内容按中心圆点旋转的角度。image

数据系列

系列

  • 颜色:饼图中该系列部分所显示的颜色。image

图表尺寸位置

  • 图表尺寸:修改宽度和长度调整图表的大小。
  • 图表位置:修改横坐标和纵坐标改变图表在布局中的位置。

数据

  • X字段:系列标签的名称。
  • Y字段:系列标签的值。

image

目标占比饼图

样式

文本

  • 字体:上下标签字体样式。选择的字体操作系统里都必须有,没有则会以默认字体显示。
  • 字体颜色:上方和下方标签的颜色。
  • 背景颜色:标签所占行的背景色。
  • 目标文案:下方标签的显示文字。
  • 当前进度文案:上方标签的显示文字。
  • 字号:标签的字的大小。

image

图表

  • 进度环颜色:有
    • “颜色填充”
    • “渐变填充”选取两种颜色渐变,0-360的选值可修改渐变的角度。
  • 目标环颜色:为目标环设置颜色。注:是进度环下面的底环。

image

  • 越界环颜色:为越界环设置颜色。 注:当进度大于目标时,会显示成一圈越界环。

image

image

image

  • 内环颜色:为内环设置颜色。
  • 环内斜线颜色:为环内斜线设置颜色。
  • 环内指标颜色:为环内指标设置颜色。
  • 字号:环内指标的字的大小。
  • 圆圈粗细:同时设置进度环和内环的粗细。

image

  • 边距:

    • 上边距:饼图距离上方标签的距离。

    • 下边距:饼图距离下方标签的距离。

      image

图表尺寸位置

  • 图表尺寸:修改宽度和长度调整图表的大小。
  • 图表位置:修改横坐标和纵坐标改变图表在布局中的位置。

数据

  • aims字段:目标大小。
  • actual字段:进度大小。

image

基础款饼图

样式

  • 字体:图上不同部分标签文字的样式。选择的字体操作系统里都必须有,没有则会以默认字体显示。

图形样式

  • 标签

    • 轴距距中心:标签距离圆心的位置。
  • 半径

    • 内半径:内半径的尺寸比例。

    • 外半径:外半径的尺寸比例。

    • 扇形间距:不同类型的扇形之间的间距,最大值不要超过1。

    image

圆形颜色:可根据需要进行添加和删除

  • 颜色
    • 颜色:定义不同类型的扇形的颜色。

image

  • 字体颜色:标签名及所占比例字体的颜色。
  • 小数点保留位数:所占百分比数显示几位小数。
  • 字号:标签名及所占比例的字的大小。

image

图表尺寸位置

  • 图表尺寸:修改宽度和长度调整图表的大小。
  • 图表位置:修改横坐标和纵坐标改变图表在布局中的位置。

数据

  • x字段:不同标签的名字。
  • Y字段:该类型的值,对应扇形大小(占整体的百分比)。

image

指标占比饼图

样式

  • 字体:图上不同部分标签文字的样式。选择的字体操作系统里都必须有,没有则会以默认字体显示。

数值

  • 字号:数值的数字的大小。
  • 颜色:数值的颜色
  • 小数点位数:数值显示几位小数。

image

  • 真实数值:显示数据中的具体值,而非所占百分比。

扇形

  • 标题:饼图下方显示的文字标题。

  • 颜色:有

    • “颜色填充”

    • “渐变填充”选取两种颜色渐变,0-360的选值可修改渐变的角度。

    • 背景颜色:指标扇形下方的背景环的颜色。

      image

  • 越界颜色:为越界环设置颜色。 注:当进度大于目标时,会显示成一圈越界环

image

  • 内半径:指标扇形和扇形底环距圆心的距离,若该值太小,会覆盖内环。

image

内环

  • 颜色:为内环设置颜色。
  • 内半径:内环内半径的尺寸比例。
  • 外半径:内环外半径的尺寸比例。

image

极轴

  • 网格线
    • 颜色:极轴的虚线的颜色。image

角度轴

  • 角度偏移:修改指标的扇形起始角度。

image

图例

  • 文本
    • 字号:扇形标题的字的大小。
    • 颜色:扇形标题的字的颜色。
  • 布局 - 间距
    • 左右间距:标题距离图表左右边界的距离。
    • 上下间距:标题距离图表下边界和饼图底部的距离。
    • 位置:标题的位置。image

图表尺寸位置

  • 图表尺寸:修改宽度和长度调整图表的大小。
  • 图表位置:修改横坐标和纵坐标改变图表在布局中的位置。

数据

  • aims字段:目标大小。
  • actual字段:进度大小,体现为扇形占圆(目标)的百分比。

image

多维度饼图

样式

  • 字体:该饼图中所有字的字体样式。
  • 外环颜色:最外边的标识环的颜色。

image

标签

  • 标签距中心:横向的从圆心的到左右图表的距离。

  • 轴距距中心:标签之间的上下距离,若设置过小会围到圆心处。

  • 类目

    • 字号:类目标签的字的大小。
    • 颜色:类目标签的字的颜色。
  • 数值

    • 字号:类目标签上的数值的大小。

    • 颜色:类目标签上的数值的颜色。

    • 小数点位数:显示几位小数。

      image

    • 真实数值:显示数据中对应数据字段的值。

image

极轴

  • 半径:圆心到外环的距离比例。
  • 网格线
    • 颜色:网格线的颜色。image

图例

  • 文本
    • 字号:饼图下方标题的字的大小。
    • 颜色:饼图下方标题的字的颜色。
  • 布局 - 间距
    • 左右间距:多个标题之间的间距
    • 上下间距:标题的上下间距
    • 位置:标题放置的位置。image

数据系列

  • 系列
    • 颜色:该系列对应的扇形。
      • “颜色填充”
      • “渐变填充”选取两种颜色渐变,
      • 0-360的选值可修改渐变的角度。
    • 内半径:扇形的内半径的比例。
    • 外半径:扇形的外半径的比例。

image

图表尺寸位置

  • 图表尺寸:修改宽度和长度调整图表的大小。
  • 图表位置:修改横坐标和纵坐标改变图表在布局中的位置。

数据

  • x字段:对应系列的名称。
  • y字段:对应系列的值,决定扇形占圆的百分比。

image

本文导读目录