### **仪表盘的样式包含:360°仪表盘和180°仪表盘。** ![](https://img.kancloud.cn/24/a5/24a52028b8d84981f58e002b8498e3c0_806x27.png) ### **现在来看一下仪表盘的使用步骤**: #### **一、添加仪表盘** 点击报表编辑页面操作栏的“![](https://img.kancloud.cn/af/6d/af6dc1f52be33c7a3daf565ca7cb98b6_32x30.png)”图标,选择“仪表盘 ->简单仪表盘”,就可以添加一个仪表盘; ![](https://img.kancloud.cn/bc/30/bc305f82502840f302fe21b4d201d906_1231x666.png) ![](https://img.kancloud.cn/24/a5/24a52028b8d84981f58e002b8498e3c0_806x27.png) ### **数据库配置字段如下:** #### **二、设置仪盘表样式** 添加好仪表盘后,**点击选中**要修改的图表,右侧操作栏,选择“样式”,可对仪表盘的样式做设置; ![](https://img.kancloud.cn/7a/32/7a32b9898266b2f4009b96e07b23049a_1141x563.png) ![](https://img.kancloud.cn/24/a5/24a52028b8d84981f58e002b8498e3c0_806x27.png) #### **1. 标题设置** 设置仪表盘顶部标题,各个参数对应的意思如下: * 显示:设置标题的显示和隐藏; * 标题文字:标题的内容; * 字体颜色:标题的字体颜色; * 字体加粗:标题的字体粗细设置,包含加粗和加细; * 字体大小:标题字体的大小; * 标题位置:标题的位置设置,分为left、center、right; * 顶边距:标题距离顶部的距离; ![](https://img.kancloud.cn/82/09/82098e2b79436ddf9f123e08d444f7ae_1223x490.png) ![](https://img.kancloud.cn/3c/dc/3cdc333649d9d3d0d0c0c068d9ef6fd9_804x24.png) #### **2. 中心点设置** 设置仪表盘距离中心位置的距离,各个参数对应的意思如下: * X轴:水平方向上,距离中心点的距离;值越小,越靠右。 * Y轴:垂直方向上,距离中心点的距离;值越小,越靠下。 ![](https://img.kancloud.cn/c4/89/c4899967767d9ef3bb4d1c86bdc9e13a_1143x645.png) ![](https://img.kancloud.cn/3c/dc/3cdc333649d9d3d0d0c0c068d9ef6fd9_804x24.png) #### **3. 仪表盘数据设置** 各个参数对应的意思如下: * 标题显示:仪盘表上标题是否显示,如下图标注1; * 标题字体大小:仪表盘上标题字体的大小,如下图标注1; * 标题颜色:仪表盘上标题的颜色,如下图标注1; * 指针显示:图5中仪表盘指针是否显示,如下图标注2; * 指针颜色:图5中指针的颜色设置,如下图标注2; * 指针字体大小:图5中指针下方字的大小设置,如下图标注3; * 指针字体颜色:图5中指针下方字的颜色设置,如下图标注3; ![](https://img.kancloud.cn/79/33/793390e9ed36f01cf28307a0f15090be_1270x616.png) #### **4. 仪表盘设置** 各个参数对应的意思如下: * 刻度值显示:刻度值是否显示,如下图标注1; * 刻度值字体大小:刻度值字体的大小设置,如下图标注1; * 仪盘半径(%):仪盘表半径设置,如下图标注2; * 轴线宽度:轴线的宽度,如下图标注3; * 分割线长度:设置刻度值和仪盘之间的距离色,如下图标注4; * 刻度线长度:仪表盘上刻度的长度设置,如下图标注5; ![](https://img.kancloud.cn/cb/61/cb61b30557ad80b3b4738c39e90f1968_1267x457.png) #### **5. 提示语设置** 预览的时候,显示的提示语的样式设置,各个参数对应的意思如下: * 显示:提示语是否显示; * 字体大小:提示语的字体大小设置; * 字体颜色:提示语的字体颜色设置; ![](https://img.kancloud.cn/09/e3/09e31d34cb5d71e8c8a0f56001f9af6d_1034x570.png) ![](https://img.kancloud.cn/3c/dc/3cdc333649d9d3d0d0c0c068d9ef6fd9_804x24.png) #### **6. 自定义配色** 设置仪表盘上每一块的颜色; ![](https://img.kancloud.cn/db/0d/db0daf84554a1305e52491fe8c4976b3_1016x476.png) ![](https://img.kancloud.cn/3c/dc/3cdc333649d9d3d0d0c0c068d9ef6fd9_804x24.png)