实现方案
业务场景描述:比较广州几个区的房价和广州市平均房价。
数据结构
情景1
一个维度+一个度量。这种情况等同于普通的线图、柱图、面积图和散点图。
维度:分布在分类轴。
度量:分布在指标轴。
实例:“产品目录名称”维度+“销售量”度量。
上图是各产品目录的销售量情况。
情景2
一个维度+两个及以上度量
维度:分布在分类轴。
度量:分布在指标轴。
实例:“产品目录名称”维度+“销售量”、“单价2”度量。
展现各产品目录销售量和单价的情况,可以在比较销售量的同时比较单价,方便分析。
修改配色
联合图的标记支持公共设置和私有设置。公共设置是对联合图中所有的图形进行设置,私有设置是针对单个图形。
颜色标记也存在公共和私有设置。
1、单色配色
1)选中单Y联合图组件,在“标记区”展开“全部”单击 颜色 标记项,弹出颜色选择窗口,确定颜色后,在颜色窗口外单击即可。这是公共颜色标记,对柱图和线图同时更改颜色。
2)选中单Y联合图组件,在“标记区”展开“销售量”单击 颜色 标记项,弹出颜色选择窗口,确定颜色后,在颜色窗口外单击即可。这是私有颜色标记,只对销售量即柱图更改颜色。
2、多色配色
多色配色是指设置横轴的每个类别以不同的颜色显示。对于有线图和面积图的联合图,不可在公共设置设置多色配色,会出现不显现线条的情况。
选中柱图组件,从左侧资源中拖拽字段“产品目录名称”到“标记区”的“销售额”中 颜色 标记项,系统显示默认多色。此时设置的只是销售额显示的柱图,如下图所示:
单击“标记区”的 颜色 标记项,弹出多色选择窗口,可以修改多色配色方案。
borderColor | #FFFFFF |
---|---|
bgColor | #F0F0F0 |
borderWidth | 1 |
borderStyle | solid |
以上业务情景的数据来源如下:
我们的基础数据以明细表的形式存储。
定制要点
拖拽“月份”字段到“列区”,“天河区”、“越秀区”、“黄埔区”、“从化区”和“平均房价”字段到“行区”。
系统默认第一个添加到“行区”的数据以柱图展现,后面添加到“行区”的数据均以线图展示,如下:
依次点击“标记区”的“越秀区”、“黄埔区”和“从化区”私有设置项左边的 图标 按钮,更改为 柱图 ,如下:
结果如图:
如上单Y联合图中,可以看出“天河区”和“越秀区”的房价高于广州市的平均房价,而“黄埔区”和“从化区”的房价低于广州市的平均房价。
注:在有线图或面积图的联合图中不要设置公共的颜色标记,若要设置在柱图中设置私有的颜色标记。