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

示例说明

在Demo的销售经营分析报表中,有如下的特殊圆环图

此类圆环图的特点是:内部有个红色的圆环,代表全部的数据。外部的扇区代表实际的数据。

此文档说明如何实现这种图图形,本文档示例如下:

 

实现步骤

1.创建数据集

新建数据集,除了查询出实际数据以外,此类图形是有一个全部的数据的,需要把剩余的数据构造出来。如本示例数据。总数据是8000,实际数据是“完成销售量”,为6400,所以需要把“未完成销售量”数据也构造出来。

 

2.创建电子表格

新建电子表格报表,把字段拖拽到电子表格中,并设置好单元格式属性等,如下:

 

预览如下:

 

3.创建圆环图

选择B2:C3,切换到“Smartbi”页签下,插入“圆环图”

 

并勾选类别为分类轴、数量为指标轴,如下:

 

图表预览如下:

 

4.隐藏图例

在图表上右键-》设置,进入图形设置界面

 

切换到“图例”页签下,设置图例显示方式为“无”

 

5.隐藏指标名称

依然在图形设置界面,切换到“序列”页签下,设置指标名称为“不显示”

 

6.设置扩展属性

依然在图形设置界面,切换到“扩展属性”页签下,输入如下扩展属性

{
"series": [{
"type": "pie",
"radius": ["35%", "42%"]
}, {
"type": "pie",
"silent": "true",
"radius": ["33%", "35%"],
"data": [{
"value": 1,
"itemStyle": {
"normal": {
"color": "#D2D2D2" //设置里面的环颜色
}
}
}]
}],
"color": ["#C23531", "transparent"] //设置外面的扇区颜色
}

 

预览效果如下:

 

7.设置圆心显示数据

把“数量”字段拖拽到圆环图中心位置的单元格上:可以先移开圆环图,字段拖拽到单元格后在将圆环图移到原来的位置

 

再移开圆环图,双击“数量”数据列字段,进入单元格属性界面,切换到“过滤”页签下。设置其过滤条件为“类别等于完成销售量”,使得该单元格展示完成销售量的数据

 

再将圆环图移动回来,调整好位置

 

8.保存查看

效果如下:

 

更多

在上述实现步骤中,圆环图中心的数据是通过圆环图下面的单元格来展示的。也可以在设置完扩展属性之后,参考单指标圆环图_电网信息监控中的宏代码去实现。

 

  • 无标签