### **现在来看一下关系图的使用步骤**: #### **一、添加关系图** 点击报表编辑页面操作栏的“![](https://img.kancloud.cn/af/6d/af6dc1f52be33c7a3daf565ca7cb98b6_32x30.png)”图标,选择“关系图 ->普通关系图”,就可以添加一个“普通关系图”; ![](https://img.kancloud.cn/ab/a6/aba60f9ecc2fad80843c525e7902af83_1262x688.png) ![](https://img.kancloud.cn/24/a5/24a52028b8d84981f58e002b8498e3c0_806x27.png) #### **二、设置关系图样式** 添加好关系图后,**点击选中**要修改的图表,右侧操作栏,选择“样式”,可对柱形图的样式做设置; **以普通关系图为例:** ![](https://img.kancloud.cn/54/7b/547bd26c8519b620776a154c9675f2c7_1260x578.png) ![](https://img.kancloud.cn/24/a5/24a52028b8d84981f58e002b8498e3c0_806x27.png) #### **1. 标题设置** 设置关系图顶部标题,各个参数对应的意思如下: * 显示:设置标题的显示和隐藏; * 标题文字:标题的内容; * 字体颜色:标题的字体颜色; * 字体加粗:标题的字体粗细设置,包含加粗和加细; * 字体大小:标题字体的大小; * 标题位置:标题的位置设置,分为left、center、right; * 顶边距:标题距离顶部的距离; ![](https://img.kancloud.cn/6b/71/6b716dc322ef03556a4d8bd7e8fad7da_1278x635.png) ![](https://img.kancloud.cn/3c/dc/3cdc333649d9d3d0d0c0c068d9ef6fd9_804x24.png) #### **2. 中心点设置** 设置关系图距离中心位置的距离,各个参数对应的意思如下: * X轴:水平方向上,距离中心点的距离;值越小,越靠右。 * Y轴:垂直方向上,距离中心点的距离;值越小,越靠下。 ![](https://img.kancloud.cn/7e/15/7e152ecb1a080fab46862de45be4a3e1_1289x580.png) ![](https://img.kancloud.cn/24/a5/24a52028b8d84981f58e002b8498e3c0_806x27.png) #### **3. 数值设置** 关系图上数值的设置,各个参数对应的意思如下: * 显示:数值是否显示; * 字体大小:数值的字体大小; * 字体颜色:数值的字体颜色; * 字体粗细:数值的字体粗细; * 字体位置:设置数值的位置,包含上方、左边、右边、下方、内部; ![](https://img.kancloud.cn/d2/f5/d2f50a16adc85c22163298bef30e6624_1262x624.png) ![](https://img.kancloud.cn/3c/dc/3cdc333649d9d3d0d0c0c068d9ef6fd9_804x24.png) #### **4. 提示语设置** 关系图预览的时候,显示的提示语的样式设置,各个参数对应的意思如下: * 显示:提示语是否显示; * 字体大小:提示语的字体大小设置; * 字体颜色:提示语的字体颜色设置; ![](https://img.kancloud.cn/34/d2/34d26726ea4724466f5d8110e9b584dc_1264x639.png) ![](https://img.kancloud.cn/3c/dc/3cdc333649d9d3d0d0c0c068d9ef6fd9_804x24.png) #### **5. 图例设置** 关系图图例的设置,各个参数对应的意思如下: * 显示:图例是否显示; * 字体大小:图例字体的大小设置; * 字体颜色:图例字体颜色的设置; * 纵向位置:图例纵向位置设置,包含:顶部和底部。设置为顶部,表示图例在图表的顶部;设置为底部,表示图例在图表的底部。 * 横向位置:图例的横向位置设置,包含:左对齐、居中、右对齐。设置为左 对齐,表示图例在左边;设置为居中,表示图例在中间;设置为右对齐,表示图例在右边。 * 布局朝向:图例的布局朝向设置,包含横排和竖排。设置为横排,标识图例都在一排显示;设置为竖排,表示图例都在一列显示。 ![](https://img.kancloud.cn/a9/2b/a92bdcffd1ec44b43b3561803a85a27d_1262x606.png) ![](https://img.kancloud.cn/3c/dc/3cdc333649d9d3d0d0c0c068d9ef6fd9_804x24.png) #### **6. 自定义颜色** 定义一大类的颜色; ![](https://img.kancloud.cn/f5/b1/f5b106d1a4cc7ad969553706e6608333_625x464.png) ![](https://img.kancloud.cn/5e/09/5e0938f3dc1ca524abc4b612012fa373_1144x630.png)