云图页面搭建
在可视化管理页面,单击 + 进入新建页面,选择创建方式,单击创建按钮,输入名称和分组点击保存,即可创建大屏。
![](https://qcloudimg.tencent-cloud.cn/image/document/f76c582202e6338b2684972ec7315465.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f76c582202e6338b2684972ec7315465.png)
可视化创建后,将直接跳转至由界面设计器和逻辑编辑器组成的大屏设计页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/a8d1fa3cef7a6237f94d5776b31fcd54.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a8d1fa3cef7a6237f94d5776b31fcd54.png)
从工具栏中选择相应的组件进行布局调整、属性配置和图层管理等。
![](https://qcloudimg.tencent-cloud.cn/image/document/12d7e51f60b5a6a20a3a073c948d7e56.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/12d7e51f60b5a6a20a3a073c948d7e56.png)
云图产品在可视化大屏里编辑时,使用正上方选择组件,左侧选中组件,右侧进行样式和数据源的编辑工作,而腾讯云BI组件选择在左侧,按照云BI页面搭建的方式重新编辑可视化看版。
![](https://qcloudimg.tencent-cloud.cn/image/document/2fc65cabd562eab153bc4ae17211013e.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2fc65cabd562eab153bc4ae17211013e.png)
云 BI 页面搭建
1. 创建页面
下面进入到页面搭建环节,首先单击“页面tab”进入到页面列表中,单击创建页面按钮,页面名称输入“销售数据看板_快速入门Demo”,单击确认后即可进入到页面的编辑画布界面。![](https://qcloudimg.tencent-cloud.cn/image/document/bb61305640404b3c56d96c0742ddbee4.png)
页面编辑画布界面左侧是腾讯云BI产品的组件库,包含趋势、对比、分布、关系、指标、地图、交互筛选组件、富文本组件等组件,可满足客户在各类数据分析及可视化场景的丰富需求。
![](https://qcloudimg.tencent-cloud.cn/image/document/bb61305640404b3c56d96c0742ddbee4.png)
2. 销售指标总览
首先来制作销售指标总览组件,在左侧组件库中单击指标卡组件,拖拽到右侧画布之中,会自动进入到指标卡编辑界面。
这边我们需要将“销售额”、“数量”、“单价”这3个数值字段拖拽到指标区域中,其中销售额/数量默认以加和为聚合方式即可,但是单价需要将聚合方式调整为平均值(鼠标悬浮在字段上选择聚合方式)。![](https://qcloudimg.tencent-cloud.cn/image/document/c6b065920dce525bc80edd85acca88de.png)
然后在右侧样式 tab 组件中修改主标题为“销售指标总览”,再单击左下方的保存按钮即可完成该指标卡的制作。
![](https://qcloudimg.tencent-cloud.cn/image/document/c6b065920dce525bc80edd85acca88de.png)
3. 月度销售额&销量走势
下面我们来制作月度销售额&销量走势组件,在左侧组件库中单击柱线图组件,将其拖拽到右侧画布之中。
这边我们需要将“订购时间”字段拖拽到维度区域,将“销售额”、“数量”字段拖拽到指标区域。![](https://qcloudimg.tencent-cloud.cn/image/document/ea25931a554fcc88776f66309be0c048.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ea25931a554fcc88776f66309be0c048.png)
4. 各省份销售额分布地图
下面我们来制作各省份销售额分布地图,在左侧组件库中单击色彩地图组件,将其拖拽到右侧画布之中。
这边我们需要将省份字段拖拽到维度区域,将销售额字段拖拽到指标区域。![](https://qcloudimg.tencent-cloud.cn/image/document/6dac4a5761e41214d361e30b2678beb4.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6dac4a5761e41214d361e30b2678beb4.png)
5. 各品类销售额分布
下面我们来制作各品类销售额分布,在左侧组件库中单击饼图组件,将其拖拽到右侧画布之中。
这边我们需要将“类别名称”字段拖拽到维度区域,将“销售额”字段拖拽到指标区域。![](https://qcloudimg.tencent-cloud.cn/image/document/368a82293d054ccfc7e73b2aa4620d96.png)
然后在右侧样式tab组件中修改主标题为“各品类销售额分布”,开启标签的显示、数据值、百分比,再单击左下方的保存按钮即可完成该饼图的制作。
![](https://qcloudimg.tencent-cloud.cn/image/document/368a82293d054ccfc7e73b2aa4620d96.png)
6. 产品销量排名
下面我们来制作各产品销量分布,在左侧组件库中单击条形图组件,将其拖拽到右侧画布之中。
这边我们需要将“产品名称”字段拖拽到维度区域,将“销售额”字段拖拽到指标区域。![](https://qcloudimg.tencent-cloud.cn/image/document/c038081456851b7f773612271f09680c.png)
并且需要将鼠标悬浮在指标区域销售额字段上方,选择用户排序-降序,即可按产品销售额降序排序。
![](https://qcloudimg.tencent-cloud.cn/image/document/c038081456851b7f773612271f09680c.png)
然后在右侧样式tab组件中修改主标题为“产品销量排名”,再单击左下方的保存按钮即可完成该条形图的制作。
7. 联动配置
下面配置品类饼图到右侧产品条形图之间的联动过滤,单击饼图组件,选择图表联动选型。![](https://qcloudimg.tencent-cloud.cn/image/document/78a1749c6b64d1dfd81f785f89f1292b.png)
选择开启联动,勾选产品销量排名组件,选择联动字段为“类别名称”,单击保存按钮即可完成联动配置。![](https://qcloudimg.tencent-cloud.cn/image/document/9574327fb31ae0ef221e9d394e87c1b7.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/78a1749c6b64d1dfd81f785f89f1292b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9574327fb31ae0ef221e9d394e87c1b7.png)
下面进行联动测试,如下图所示,单击饼图的饮料品类区域,可自动联动到右侧查看“饮料”品类的产品销量排名,其中绿茶为最高,运动饮料次之。![](https://qcloudimg.tencent-cloud.cn/image/document/e3a9c496a4735b1935fc9a86fe01f339.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e3a9c496a4735b1935fc9a86fe01f339.png)
8. 销售数据明细表
下面我们来制作销售数据明细表,在左侧组件库中单击明细表组件,将其拖拽到右侧画布之中。
然后依次将采购时间、公司名称、用户名、类别名称、产品名称、省份、城市、销售额、数量、单价字段,拖拽到数据列区域。![](https://qcloudimg.tencent-cloud.cn/image/document/ac2696e620c99dc8dc3665e69cf36a4a.png)
然后在右侧样式 tab 组件中修改主标题为“销售数据明细表”,再单击左下方的保存按钮即可完成该销售明细表的制作。
![](https://qcloudimg.tencent-cloud.cn/image/document/ac2696e620c99dc8dc3665e69cf36a4a.png)
9. 订购时间筛选
下面再来添加订购时间筛选组件,在左侧组件库中单击时间筛选组件,将其拖拽到右侧画布之中。
勾选下方的所有关联图表,设置筛选时间为“订购时间”字段,再单击保存即可完成配置。![](https://qcloudimg.tencent-cloud.cn/image/document/a55c38bad0090e9e220bb2cd1294789b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a55c38bad0090e9e220bb2cd1294789b.png)
10. 页面布局调整
下一步通过调整页面组件拖拽调整布局,然后单击右上方的页面保存按钮,再点击顶部预览按钮,可进行页面预览。![](https://qcloudimg.tencent-cloud.cn/image/document/d9abeb17540cff97aed2d32583f2f75d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d9abeb17540cff97aed2d32583f2f75d.png)