矩形树图 echarts demo_右键


目的:产品一级类别,二级类别及不同产品的销售额分布

选择图表:矩形树图

开始做图:

将数据拖进数据源区域后,点击工作表,如图所示


矩形树图 echarts demo_矩形树图 echarts demo_02


矩形树图 echarts demo_矩形树图 echarts demo_03

记得更改表名哦

我们的目的是从产品一级子类别下钻到产品二级子类别,再从产品二级子类别下钻到产品名称上去。

维度-产品一级类别(右键点击)-创建-集


矩形树图 echarts demo_springboot超详细教程_04


更改名称:一级类别集,点击确定


矩形树图 echarts demo_矩形树图 echarts demo_05


右键 集-一级类别集-创建计算字段


矩形树图 echarts demo_右键_06


更改计算名称,在下面的空白区域输入:

IF [一级类别集] THEN [产品二级子类别] ELSE [产品一级类别] END


矩形树图 echarts demo_子类_07


维度右键刚刚创立的一级下钻-创建-集


矩形树图 echarts demo_矩形树图 echarts demo_08


更改集名,点击确定:


矩形树图 echarts demo_右键_09


右键刚刚创立的二级子类别集-创建计算字段


矩形树图 echarts demo_springboot超详细教程_10


更改计算名称,在下方空白区域输入:

IF [二级子类别集] THEN [产品名称] ELSE "" END


矩形树图 echarts demo_右键_11


到现在为止,我们的前置条件已经完成了,现在开始做图:

维度列表下双击产品一级类别


矩形树图 echarts demo_springboot超详细教程_12


在度量列表下双击销售额


矩形树图 echarts demo_springboot超详细教程_13


在右上角的智能显示中选择树状图


矩形树图 echarts demo_子类_14


一级树状图已经有了,现在做下钻到二级子类效果

点击工具栏中的仪表盘-操作


矩形树图 echarts demo_右键_15


点击 添加操作-更改集值


矩形树图 echarts demo_矩形树图 echarts demo_16


更改集动作名称,在目标集中选择刚才建立的一级子类集,选择从集中移除所有值,点击确定


矩形树图 echarts demo_二级_17


重复上述步骤,新添加操作下钻到产品名称,目标集选择二级类别集,选择从集中移除所有值,点击确定


矩形树图 echarts demo_右键_18


我们刚才一共创建了如下两个操作:


矩形树图 echarts demo_springboot超详细教程_19


点击确定,进入工作表界面,分别将维度-一级下钻维度-二级下钻以及度量-销售额拖放到标签


矩形树图 echarts demo_矩形树图 echarts demo_20


现在树状图中每个矩形已经显示出销售额了,但是分类显示重复了,将标签中的产品一级类别改为详细信息


矩形树图 echarts demo_矩形树图 echarts demo_21


现在图表已经做好了,改一下表名,试一下下钻的效果吧


矩形树图 echarts demo_springboot超详细教程_22

效果展示