FAQ中心
页面树结构
转至元数据结尾
转至元数据起始

（本文档仅供参考）

问题

        如何在饼图上显示各个数据标签显示的名称及数值。

解决方案

若资源类型为电子表格，可以使用如下扩展属性：

1
2
3
4
5
6
7
8
9

{
"series": [{
"label": {
"normal": {
"formatter": "function(arg){return arg.name + ','+arg.value}"
}
}
}]
}

实现效果如下图所示：

若资源类型为自助仪表盘，可直接将相关展示字段添加至标签，具体步骤如下图所示：

1.拖拽需显示字段至标签，即可在表盘展示对应字段。

2.此时鼠标提示为所拖拽的四个字段的数据，可通过取消显示提示的方式去除多余显示信息。

若还有其他的场景，比如需要在自助仪表盘里的饼图外侧显示数据标签，同时换行加单位，可使用如下扩展属性实现：

1
2
3
4
5
6
7
8
9

"series": [
{
"label": {
"normal": {
"show": true,
"position": "outer",
"formatter": "{b}:\n{c}元"
}
}
}
],

实现效果如下图所示：

如果是想显示在内侧，可以使用如下扩展属性实现：

1
2
3
4
5
6
7
8
9

"series": [
{
"label": {
"normal": {
"show": true,
"position": "inside",
"formatter": "{b}:\n{c}元"
}
}
}
],

实现效果如下图所示：

如需实现换行+百分比：

{"series": [
{
"label": {
"normal": {
"show": true,
"position": "inside",
"formatter": "{b}:\n{d}%"
}
}
}
]}

  • 无标签

评论

  1. 邝紫园 发表：

    如需实现指定超过某个数值换行+显示百分比，可以参考扩展属性：

    {
    "series": [{
        "label": {
            "normal": {
                "show": true,
                "position": "outer",
                "formatter": "function (arg) {var length = 2;var row = Math.ceil(arg.name.length / length);var str = '';var start = 0;var end = length;for (var i = 0; i < row; i++) {  if (str != '') {    str = str + '\\n' + arg.name.substring(start, end);  } else {    str = str + arg.name.substring(start, end);  }  start = start + length;  end = end + length;}if (str != '') {  return str +':'+ arg.percent +'%' ;} else {return arg.name;    }  }"
            }
        }
    }]
}