页面树结构

版本比较

标识

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

...

通过切换“选择区域”位置的下拉框,可以切换报表中汇总柱图、明细玫瑰饼图和明细表格的数据。同时在汇总柱图上点击柱子,可同时刷新明细玫瑰饼图和明细表格,并且明细玫瑰饼图和明细表格的数据,会变化为对应产品目录的数据。

 

 

设计

1.展示主题确定

本示例展示的主题是产品销售数据分析,对产品目录、产品名称的数据进行分析、以及明细数据的查看,并且可以切换区域维度,对不同区域下的产品销售数据进行分析。

 

2.展示形式和布局确定

作为仪表盘,强调的是数据可视化,以各种图形,增强数据的可读性。结合展示主题和表格、图形(包括柱状图、饼图、线图、联合图等等)的特点,设计如下:

(1)产品目录汇总数据,维度为产品目录、指标为销售量。展现形式为柱状图

(2)产品明细1,维度为产品名称、指标为销售量。展现形式为饼图。

(3)产品明细2,展示数据包括订单的明细数据,包含产品名称、订单编号、每一订单的销售量、折扣和单价。展现形式为表格。

通过柱图、饼图和表格结合的形式,增强仪表盘页面的美观效果和数据的可读性。

 

对仪表盘页面进行整体布局,如下:

Image Added

   

3.数据交互效果确定

由于该仪表盘页面中存在汇总数据和明细数据,同时维度中“产品目录”和“产品名称”是父项与子项的关系。可实现内部的柱图联动饼图和明细表格的效果。

(需要注意的是,饼图和明细表格在创建时,其查询需要添加产品目录相关的参数,以便接收柱图传递过来的产品目录值并刷新数据)

 

 

实现