Skip to main content

极坐标柱状图

在仪表板中您可以添加各种可视化组件来展示数据,本节以极坐标柱状图为例带您快速了解创建仪表板的流程。

image

1. 数据准备

新增数据源并添加到数据集。

(1)数据源配置

数据源属性属性值
Web API地址https://mockapi.eolink.com/jLwe6LL471d5112ef61d6b2ebe579a5190be3ee81164537/details_component
请求方法GET
JSON路径$.data[*]

JSON数据:

{
"success":true,
"code":200,
"message":"successful",
"data":[{
"id":"1",
"department":"塑胶部",
"type":"利润总额",
"actual":435.88,
"index":674.11,
"completion":64.66
},{
"id":"2",

"department":"塑胶部",
"type":"净利润",
"actual":265.88,
"index":374.11,
"completion":71.07
},{
"id":"3",
"department":"化纤部",
"type":"利润总额",
"actual":996.3,
"index":811.76,
"completion":122.73
},{
"id":"4",
"department":"化纤部",
"type":"净利润",
"actual":546.3,
"index":611.76,
"completion":89.3
},{
"id":"5",
"department":"帘子部",
"type":"利润总额",
"actual":855.99,
"index":945.88,
"completion":90.5
},{
"id":"6",
"department":"帘子部",
"type":"净利润",
"actual":656.3,
"index":458.33,
"completion":143.19
}]
}

注意:数值型数据不要添加双引号。

(2)数据集配置

image

image

2. 创建仪表板

2.1 极坐标柱状图

(1)添加可视化组件

image

(2)数据绑定

选中可视化组件进行数据绑定

image

(3)数值显示格式设置

注意:由于本案例数据源中完成率未显示单位%,因此需要对数值格式进行设置。

image

image

2.2 极坐标堆叠柱状图

(1)添加可视化组件

image

(2)数据绑定

选中可视化组件进行数据绑定

image

2.3 极坐标放射堆叠柱状图

(1)添加可视化组件

image

(2)数据绑定

选中可视化组件进行数据绑定

image