页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

(本文档仅供参考)

问题

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

解决方案

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

1
2
3
4
5
6
7
8
9

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

...

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




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

Image Added

1
2
3
4
5
6
7
8
9

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

实现效果如下图所示:

Image Added

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

Image Added

1
2
3
4
5
6
7
8
9

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

实现效果如下图所示:

Image Added

如需实现换行+百分比:

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


Image Added