# 标题 可以通过该设置标题项改变统计图标题的显示样式和风格,如下图所示: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_a1b59e3206cc6b7df9d4b433648ce79a_r.png) 标题设置分为两块,内容和样式。 ## 内容 包含标题是否可见以及标题内容两项设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_e2dcad1fcca84755c22a8c8166a5c138_r.png) - 标题是否可见:若要显示标题,选择“是”;若不需要显示标题,选择“否”。 - 标题文本内容:即标题的文本信息,直接在文本编辑框中编辑即可。 ## 样式 样式中包括标题块位置、标题块外观、标题文本样式等三部分。 ### 位置 调整标题的显示位置,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_ea78a442a3d28fa50c69ad95780dd138_r.png) - 水平安放位置:标题水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。 - 竖直安放位置:标题竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。 ### 外观 设置标题背景色、边距、边框等,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_2ca9180953e74c4e79c975ec691d9c29_r.png) ### 文本样式 设置标题文本的字符样式,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9aadd27753c9d71bc4b2cbfb6459717b_r.png) - 文本颜色:标题文本的颜色。可直接颜色组件选择颜色,也可以输入颜色值。 - 文本风格:包括标准、仿意斜体、斜体三种。默认为标准。 - 文本粗细:包括默认、加粗和加细三种。默认为加粗。 - 字体系列:标题文本的字体,可通过下拉框选择。 - 文本大小:标题文本的大小。可通过滑块滑动设置,也可以直接在输入框内输入字号。 # 图例 可以通过图例设置项改变图例的显示、位置和样式,如下图所示: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_0c453e62a0866da00b55fbf2afdac50d_r.png) 注:地图和仪表盘不支持图例。 ## 基础 ### 图例是否可见 是否显示图例。默认为“是”。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_5c10e7626aaa4d85d6beef507715e867_r.png) ### 图例布局 设置图例水平显示还是竖直显示。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_2d95d26009bbbd8d2b165ec32a23eded_r.png) ### 图例位置 图例显示位置设置,共有两个设置项: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_41090b2239cbabe1c5e7da41e3c2ba4f_r.png) - 图例水平安放位置:图例水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。 - 图例竖直安放位置:图例竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。默认为bottom。 ### 图例外观 设置图例背景色、边框等,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_89e0e6e783beaef86a0850183559d98d_r.png) - 图例背景色:设置图例背景色,可以直接选择颜色,也可以输入颜色值。 - 图例边框颜色:图例边框所使用的颜色。 - 图例边框宽度:图例边框的宽度。默认为0,即没有边框。 - 图例边框圆角:图例边框四个角的圆角度数设置。 ### 图例文字样式 用于设置图例标签文字的字体、颜色、字号、粗细、风格、对齐方式等,可根据具体需求进行设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_ab6efcbce3f38b9aee39866ccdaa2dbc_r.png) # 标签 可以通过标签设置项改变图表标签的显示内容、位置和样式,如下图所示: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_f1b402091cbbad95e72d663ed05c8699_r.png) 注:仪表盘不支持图例。 ## 内容 包含标签是否可见以及标签文本内容两项设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_c38935f0f690e029e8d5267ed68970df_r.png) - 标签是否可见:控制是否显示标签。默认为否。 - 标签文本内容:标签的文本信息。 ## 样式 包括标签位置、标签外观、标签文本样式三部分。 ### 标签位置 调整标签的显示位置,共有两个设置项: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_d3e4e2baf0a769ca70bd84e214ca3389_r.png) - 标签位置:每种统计图类型均有不同,其中地图不支持标签位置设置。下面进行详细介绍。 柱形图:包括上部、左侧、右侧、底部、内部、内部局上、内部局下、内部局左、内部局右等9种。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_97d11dd06d63b94cfd924496161afee7_r.png) 折线图:包括上部、左侧、右侧、底部等4种。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_ed8672b70ed6d561357fe6babcbe1fc0_r.png) 饼图:包括外部、内部、中心等3种。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_ccf0dd8efb583e57d040d6188bc839e7_r.png) - 与系列间距:与系列之间的距离。 ### 标签外观 设置标签背景色、内边距、边框等,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_f76e3e9a93b5aee01c83690c65d37026_r.png) ### 标签文本样式 用于设置标签文字的字体、颜色、字号、粗细、风格等,可根据具体需求进行设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_0d1675c9774df2205b76e94440b3d11c_r.png) # x轴 可以通过X轴设置项改变统计图X轴的显示样式和风格,如下图所示: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_a05037cf0c9442914a0b56fe049500e6_r.png) 注:饼图、地图、仪表盘均不支持X轴。 X轴设置分为基础、轴线、刻度线、刻度标签四部分内容。 ## 基础 包括是否可见、偏移、位置、坐标轴名称、坐标轴名称样式等设置。 ### 基础部分 包含是否可见、x轴所在的grid的索引、偏移、位置、是否反向等五项设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9eaa76bc6724ff1e38e406098c391d16_r.png) - 是否可见:控制统计图是否显示x轴。默认为是。 - x轴所在的grid索引: - x轴偏移: - 位置:X轴位于上部还是底部。默认为底部。 - 是否反向:X轴是否反向显示。 ### 坐标轴名称 设置坐标轴名称、位置、旋转角度,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_b723a20c01bcc2965719ed6d68b83ac4_r.png) - 名称:设置x轴的名称,默认无。 - 位置:包括头部、中部、尾部三种。 - 旋转角度:设置坐标轴文本旋转角度。 ### 坐标轴名称样式 用于设置坐标轴名称的文本字体、文本颜色、字号、粗细、风格、文本背景色、边框、内边距等,可根据具体需求进行设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_747bcf93908d1ff8fd0dd1d636eb228c_r.png) ## 轴线 包括轴线是否显示、轴线样式两部分。 ### 轴线是否显示 x轴线是否显示。默认显示。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_00fd4e28cb8d1160c339780fa1bdcdc6_r.png) ### 轴线样式 设置轴线颜色、宽度和线型。设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_b6e38895e647c060adb548909d6d8eca_r.png) - 颜色:x轴颜色。 - 宽度:x轴线的宽度。 - 类型:X轴线的类型,包括实线、点线和虚线。 ## 刻度线 设置刻度线是否显示以及刻度线长度。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_4191b4d4f41ae522143864f2c8f863fd_r.png) ## 刻度标签 设置刻度标签是否显示、旋转角度以及刻度标签文本样式。 ### 刻度标签是否显示 控制x轴标签是否显示。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_1a7196a5f30054c1bf5617d18fb2928f_r.png) ### 旋转角度 设置x周标签的旋转角度。默认为0,即不旋转。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_12a0a15f0e89cc20641fb36b50bfdb1a_r.png) ### 刻度标签文本样式 用于设置坐标轴名称的文本字体、文本颜色、字号、粗细、风格、文本背景色、边框、内边距等,可根据具体需求进行设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_3372f5a08324cfe0218ca771a1f97add_r.png) # y轴 相关设置同x轴类似,可参考x轴设置。 # 系列 可以通过系列设置项改变图表系列的显示样式和风格。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_4491f73bc05b5df03e4592fdb3c99ea6_r.png) 不同类型的统计图系列属性都不相同,下面进行详细说明。 ## 柱形图 ### 外观 **柱条宽度** ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_63b87dca7ef2e5c99ac22ef358485f30_r.png) 默认情况下为空,即系统自动调整柱条宽度。 **不同系列柱间距离** ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_fbc7083192219ab9d2b706397d8568e4_r.png) 设置同一分类里多个系列柱子之间的距离。 **同系列柱间距离** ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_f76f9a89702c1384b7568df8d8400e21_r.png) 设置分类之间的距离。 **柱条边框** 设置描边颜色、宽度、类型和圆角。设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_84fc3084a9cc007b439f6acff13c724d_r.png) - 描边颜色:设置边框线的颜色。 - 描边宽度:设置边框的宽度。 - 描边类型:设置边框线型,有三种:实线、点线和虚线。 - 描边圆角:设置边框的圆角效果。 ### 高级 设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_34b7e8180e0559cfb7e3b999f0710af9_r.png) 使用的x轴:使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。 使用的y轴:使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。 ## 折线图 ### 外观 分为折点和折线两部分。 **折点** 设置折点图形、大小、旋转角度、描边等。设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_6a06dc6e561c506862632452a70f76fc_r.png) - 标记图形:通过下拉列表选择,包括空心圆、实心圆、矩形、三角形、菱形、钉型、箭头、无8种。 - 标记大小:折点标记的大小。 - 标记旋转角度:折点标记的旋转角度。 - 折点描边颜色:折点标记描边颜色。 - 折点描边宽度:设置折点标记描边的粗细。 - 折点描边类型:包括实线、点线、虚线三种。 **折线** 设置折线线宽、线型和是否平滑,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_708f33a9f7fca6f55f67e1515484d8d4_r.png) - 线宽:设置折线的粗细。 - 线类型:包括实线、点线、虚线三种。 - 曲线平滑:设置曲线是否平滑,默认为否。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_ee60afd629fbea9002758e6d8e919e1e_r.png) ### 高级 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_550eb3cfae9849ac7404ea080caf3e8a_r.png) 使用的x轴:使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。 使用的y轴:使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。 ## 饼图 包括基础部分、标签引导线、扇形区域三部分内容。 ### 基础部分 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_6bc28fe87bec95416b0b4d7b64969e74_r.png) - 图例联动:鼠标放置图例上,统计图中对应系列会变大。默认为是。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_964be9acb5a0e117a901d8e92ffe2038_r.png) - 鼠标停留:鼠标放在饼图上,对应部分变大显示。默认为是。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9b894dc77b103aba5401ac40be2b110f_r.png) - 选中模式:点击饼图的扇形区域,对应扇形会分离。默认为否。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_8fa57bcd8c34d270b1463c7b6dd2e5d6_r.png) - 饼图中心:饼图中心的位置。 ### 标签引导线 设置标签引导线的相关属性,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_8ab078fae803e07ac213afa5aad10668_r.png) - 标签引导线是否显示:设置是否显示引导线。默认为是。 - 标签引导线是否平滑:默认为否。 - 标签引导线颜色:设置引导线的颜色。 - 标签引导线宽度:设置引导线的粗细。 - 标签引导线线型:设置引导线的线型,包括实线、点线和虚线三种。 ### 扇形区域 设置扇形描边的相关属性,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_efc45179952a24233ace05e1170121b2_r.png) ## 地图 包括基础部分和地图区域两部分内容。 ### 基础部分 **外观** 设置地图的缩放比例,目前只支持整数。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_146427731184eb9e3dc01807e744af93_r.png) **位置** 设置地图的位置,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9ca794621ed9ed5b423eac8db323efb6_r.png) - 水平位置:可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。 - 竖直位置:可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。默认为bottom。 ### 地图区域 设置描边的颜色、宽度和线型,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_37673cc76a01f11de92f48928c1bacb6_r.png) ## 仪表盘 包括基础、边框、分割线、刻度线、刻度标签、指针、标题、详情等8部分。 ### 基础 设置表盘起始角度、最大值最小值、分割段数、刻度等,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_ce7a80b4dfe9e537f65099706af0ceeb_r.png) - 起始角度:设置表盘起始位置的角度。 - 结束角度:设置表盘结束位置的角度。 - 最小值:设置表盘最小值。 - 最大值:设置表盘最大值。 - 仪表盘分割段数:默认问10。 - 刻度顺时针:设置刻度是否顺时针显示。默认为是。 ### 边框 设置边框属性,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_5dbb672544a9cb0eb013d90979e308eb_r.png) - 是否可见:设置是否显示边框。默认为是。 - 边框宽度:设置设置边框的粗细。 - 轴线颜色:设置仪表盘的颜色,默认值为[[0.2,'#91c7ae'],[0.8,'#63869e'],[1,'#c23531']]。 注:仪表盘不支持主题设置,可以在轴线颜色处自定义仪表盘颜色。 ### 分割线 设置分割线相关属性,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_7e3a6cfd6afdb2ec5f71fdece83a55c1_r.png) - 是否可见:设置分割线是否显示。 - 长度:设置分割线长度。 - 颜色:设置分割线颜色。 - 宽度:设置分割线的粗细。 - 类型:设置分割线线型,包括实线、点线和虚线。 ### 刻度线 设置刻度线相关属性,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_6ae86492e26f80fc90fc5bac3d0a2cf1_r.png) - 是否可见:设置刻度线是否可见。 - 刻度分割数:分隔线之间分割的刻度数。 - 长度:设置刻度线长度。 - 颜色:设置刻度线颜色。 - 宽度:设置刻度线的粗细。 - 类型:设置刻度线线型,包括实线、点线和虚线。 ### 刻度标签 设置刻度标签的相关属性,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_5a610ae44e42115c95d2ea2dacc7ce57_r.png) ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_c630b579fd536ab486c27f72dbabd9fc_r.png) - 是否可见:设置刻度标签是否可见。 - 标签与刻度线距离:设置标签与刻度线之间的距离。 - 文本格式:设置标签文本的格式,默认为{value},即本身格式。 - 文本颜色:设置标签文本的颜色,默认没有颜色,即和表盘颜色一致。 - 文本风格:设置标签文本的风格,包含标准、仿意斜体和斜体三种。 - 文本粗细:设置标签文本的粗细,包含标准默认、加粗和加细三种。 - 文本系列:设置标签文本的字体。 - 文本大小:设置标签文本的大小。 - 文本背景颜色:设置标签背景色,默认无颜色。 - 文本边框颜色:设置文本边框颜色,默认无颜色。 - 文本边框宽度:设置文本边框的粗细。 - 文本边框圆角:设置文本边框的圆角效果。 ### 指针 设置指针的相关属性,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9b4b8581c386ebd19db535aade9f9d26_r.png) - 是否可见:设置是否显示指针。 - 指针宽度:设置指针的宽度。 - 指针长度:设置指针的长度。 - 指针颜色:设置指针颜色。 - 指针边框颜色:设置指针边框颜色。 - 指针边框宽度:设置指针边框的宽度,默认为0,即没有边框。 - 指针边框类型:设置指针边框的线型。有实线、点线和虚线三种。 ### 标题 系列标题指的是仪表盘中间的文本内容。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_6df93ff54ed08c8406b1359191ea33f8_r.png) 此模块可设置标题是否可见、文本格式、文本背景色、边框等相关属性,设置项如下,用户可根据需求进行设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_e9012ee45f2c3672900c9aa5eac73eef_r.png) ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9ba5c08c0a7b201cf0be49fc70591005_r.png) ### 详情 详情指仪表盘内部的数据,如下图所示: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_f9836751e8df25558fbb0939ff963aae_r.png) 此模块可设置详情是否可见、文本格式、文本背景色、文本边框等相关属性,设置项如下,用户可根据需求进行设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_d086c608df3ff5a56169104f910200eb_r.png) ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9041957144484543620bfae48f9e95cb_r.png) # 视区 视区指绘图区。可以通过视区设置项改变统计图视区的显示样式和风格,如下图所示: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_99bca3b6f58f4b1e0a2cdd5053e42d37_r.png) 注:地图不支持图例。 ## 通用 设置视区是否可见以及位置,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_d7df95b3490d00f87fa543384b779322_r.png) - 是否可见:设置视区是否可见。 - 水平安放位置:视区水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。 - 竖直安放位置:视区竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。 ## 外观 设置绘图区的背景色、边框颜色和宽度和刻度标签,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_d07759aafd41f0d8a1b3595758853328_r.png) ## 分割线 只有柱形图和折线图存在这项设置 分割线分为横向分割线和纵向分割线。各设置项相同。可以设置分割线是否显示以及分割线外观。用户可根据需求设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_5a7de87bfefdf8de5a76a3a74a70e67c_r.png) # 提示 当鼠标悬浮于统计图的系列或分类之上时,系列或分类变为选中状态,且出现数据点提示。效果如下图所示: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9230a5071bfd12061348c6353fa1108a_r.png) ## 内容 设置提示是否可见以及提示内容,设置项如下: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_53c0d96e02295ef7629661728f45afbd_r.png) 是否可见:设置是否显示提示。 文本:提示的文本内容组成,组成变量有{a}、{b}、{c}、{d}、{e},分别表示系列名、数据名、数据值等。 ## 样式 设置提示框外观和提示框内的文本样式。 **提示框外观** 设置提示框背景色、内边距、边框颜色和边框宽度,用户可根据需求设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_6c82afb3e673f8c5dbbe3f2921e29793_r.png) **提示框文本样式** 设置文本样式,包括文本颜色、字体、风格、粗细、大小,用户可根据需求进行设置。 ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_2d65d38c1ae4a114428e6ae5c96a94ff_r.png) # 背景色 可以通过该设置项改变图表区的背景色,如下图所示: ![](/uploads/projects/7.11_online/uploads/sjjc/images/m_9ef9a647747e625c76fe6f2dc92a6514_r.png) >注意区分绘图区视区(即绘图区)和整个图表区,此项设置指的是整个图表区的背景色。 # 交互效果 可以设置统计图超链接,具体设置参见[统计图中使用超链接](http://geeznros.oicp.net:8181/api/sjjc/edit/#f5805t "统计图中使用超链接")。