[]
        
(Showing Draft Content)

四、细化组件

将大屏框架搭建起来之后,就可以细化填充组件,绑定数据,设置展示数据分析,外观等等。

细化组件

1. 首先来看中间的流向地图,如下图所示为流向地图绑定数据即可。

image

2. 添加玫瑰图组件,并按下图绑定数据,设置属性外观。

绑定数据时在“可用维度”中绑定数据字段是为了设定数据分析时的钻取路径,如需了解更多,请见数据钻取

image2020-11-17_9-34-44.png


image2020-11-17_9-49-34.png


3. 添加环形图组件,并按下图绑定数据,设置属性外观。

请注意,这里显示的是排名前五的省份。有关排名筛选的详细介绍,请参见数据排名

image2020-11-17_9-55-4.png


image2020-11-17_9-54-37.png

4. 添加堆叠柱状图组件,并按下图绑定数据,设置属性外观。

image2020-11-17_11-19-47.png


image2020-11-17_11-25-17.png

5. 添加雷达面积图组件,并按下图绑定数据,设置属性外观。

image2020-11-17_11-48-22.png


image2020-11-17_11-50-35.png


6. 添加堆叠面积图组件,并按下图绑定数据,设置属性外观。

image2020-11-17_11-51-45.png


image2020-11-17_12-2-39.png


其中属性设置中调色板设置的是自定义调色板。有关调色板的更多介绍,请见 图表样式 中的相关介绍。

image2020-11-17_12-6-4.png

7. 接下来,我们来制作这些动态指标。以其中一个为例,其他两个制作方法一致。

image2020-11-17_12-9-2.png

此类指标往往是由一个小图标和一个富文本组件组成,那么为了防止在移动端视图时分开显示,我们一般会将这两个组件放在一个容器中。

添加一个容器组件,隐藏标题,并添加背景图片。背景图片使用资源包中的“文字数据框”。

image2020-11-17_12-22-49.png

在容器中添加一个图片组件,并使用内部共享图片。

image2020-11-17_12-28-8.png

image2020-11-17_14-9-12.png

添加富文本组件,并添加文字和动态表达式。

image2020-11-17_14-15-20.png

设置数据显示格式为千分位显示。

image2020-11-17_14-19-42.png

调整大小,字体颜色。并放置到容器中。

image2020-11-17_14-16-16.png

另外两个指标的制作过程类似,这里就不重复介绍了。

8. 至此,大屏仪表板中的所有组件和数据都已经绘制完成。

image2020-11-17_14-31-17.png