4.11.12D图形区

所有图形均存在图形区。图形区可分为整体布局、网格区，图形选中，悬停提示，图例配置，还有特有图形的设置几个部分。

（1）整体布局、网格区和图形选中

添加整体布局、网格区和图形选中设置和显示效果如下图4.11.1.1、图4.11.1.2和图4.11.1.3所示。

图4-11-1-1图形区

1606114653(1)

图4-11-1-2配置整体布局和网格区

图4-11-1-3配置图形选中

网格区的是否显示若未勾选，则配置背景色或边框都不生效
无XY轴的图形只用配置上侧间隔和左侧间隔，挪动该图形的中心坐标即可。

（2）悬停提示和图例配置

悬停提示设置界面如下图图4.11.14.4所示；

图4-11-1-4悬停提示

触发类型：可设置触发悬停的类型，分为数据项图形触发，坐标轴触发以及均不触发；
均不触发：不显示悬停提示；
数据项图形触发：点击华东-利润栏柱子页面只显示利润的度量值和度量名称，如图4.11.1.5所示

图4-11-1-5悬停提示数据项触发

坐标轴触发：点击华东--利润柱子，页面显示整个类目项的数据，如图4.11.1.6所示。

图4-11-1-6悬停提示坐标轴触发

背景颜色，边框颜色，宽度：可设置悬停信息的背景颜色，边框颜色以及宽度；
颜色，字体，大小，加粗，斜体：在选择坐标轴触发时可以对悬停内容进行样式设置；
指示器类型，颜色，线条宽度，线条类型，阴影大小，阴影颜色均是针对指示器进行设置的；
悬停最大宽度：可设置悬停信息的最大宽度，超过最大宽度自动换行；
若设置不显示悬停信息，此设置无效；

【注意事项】

优先级：属性配置区--悬停提示--显示悬停提示 > 图形配置悬停提示；
阴影指示器和直线指示器只适用于触发类型选择坐标轴触发情景下使用；
指示器线条宽度和线条类型在阴影下不适用；

图例配置界面如下图4.11.1.7所示；

图4-11-1-7图例配置

是否显示图例：不勾选下方设置无效；
图例类型：分为普通图例和滚动翻页图例；
布局坐标：分为自定义和固定设置；

当选择自定义时，可设置左右间距或上下间距，优先级：左间距>右间距上间距>下间距

布局朝向：分为水平和垂直；
图例间隔，标记宽度，标记高度：针对图例标记设置；
图例文字颜色，字体，斜体，加粗，大小，背景颜色，边框宽度，边框颜色，边框圆角，阴影颜色，阴影大小均是针对文字设置；
图例标记类型：可设置图例标记类型；
图例背景色，边框颜色，阴影颜色，阴影大小均是针对图例设置；

【注意事项】

使用绘图的行和列作为颜色图例，建议不勾选显示echarts的图例或图例联动使用；
图例联动和echarts的图例使用其一；
无图例字段时，建议不使用图例配置；

（3）条形图样式和折线图样式：

2D条形图样式和折线图样式设置只运用于2D条形和折线图形。设置页面显示如下图4.11.1.8所示。

图4-11-1-8条形图样式

柱宽：条形图柱宽随设置的柱宽和屏幕大小自适应调节柱形宽度

举例：设置的柱宽为从左只有为16 30 46 三个值。

当屏幕大小可自适应：柱宽 >= 46时，柱宽为46。增大屏幕大小，柱宽仍为46。

缩小屏幕大小满足46 > 柱宽 >= 30时，显示30的柱宽

缩小屏幕大小满足30 > 柱宽 >= 16时，显示16的柱宽

缩小屏幕大小满足16 > 柱宽时，显示16的柱宽，生成滚动条。

圆角半径：设置柱形的4个角弧度。从左至右依次为：左上角、右上角、右下角、左下角设置。
柱间距离只能为百分比，依据屏幕大小自行调整柱间距离。设置的柱间距离以柱宽的百分比划分。

折线图图形配置如图4.11.1.9所示

图4-11-1-9折线图样式

线条类型，宽度：对折线图线条进行设置；
标记类型：可选择多种标记类型；

（4）象形柱图配置

只有选择了条形图才会出现此配置，如下图4.11.1.10所示；

图4-11-1-10象形柱图配置

转换为象形柱图：不勾选则象形柱图配置不生效；
形状：分别为四边形立柱体，圆形立柱体，山峰，自主上传（不能大于20K），如下图4.11.1.11所示；

图4-11-1-10象形柱图形状

设置背景色，背景色底色：仅支持两种立柱体，不勾选设置背景色则背景色底色设置无效；
左右渐变：不支持自主上传图片；

【注意事项】

背景色高度以图形中最大数据为标准；
点击象形图后，柱间距离和圆角半径不生效；
象形图只存在于条形图中可设置；
象形图支持自适应；
目前只支持条形图；
象形图不建议进行分割。

（5）仪表盘

添加仪表盘样式区域，进行下面的样式参数讲解前需了解、中各个位置的叫法，如图4.11.1.11所示。

图4-11-1-11仪表样式讲解

仪表样式比较多，需分为几个部分进行配置的讲解。配置01如下图4.11.1.12所示，预览效果如图4.11.1.13所示。

图4-11-1-12仪表样式01

图4-11-1-13仪表预览效果01

名称：可在仪表指针上方中部显示名称；
颜色选择：分别配置3部分的颜色；
占据比例：将仪表分为3分，绿色区域为0-0.2，蓝色区域为0.2-0.8，红色区域位0.8-1，可自行修改此比例；
阴影颜色、阴影大小：可为仪表配置阴影，当背景较暗时，阴影可显示发光效果；
最小数据值，最大数据值：可设置仪表的最小最大值；
起始角度、结束角度：仪表比较特殊，它的0度位于圆心正右手侧，圆心正上方为90度，圆心正左手侧为180度，因此，默认的仪表起始角度为225度，结束角度为-45度，自行调整角度时也需要按照此规则来；
轴线宽度、半径：调整轴线宽度和半径可控制仪表圆环的粗细和整个环的大小；
轴线两端圆角：两端从直线变成圆角。对比效果如图4.11.1.14所示。

图4-11-1-14轴线两端圆角

样式配置02如图4.11.1.15所示，预览02如下图4.11.1.16所示。

图4-11-1-15配置02

图4-11-1-16配置02预览效果

显示进度条：进度条可以配置宽度、两端圆角、颜色、阴影颜色、阴影大小，配置如
显示分割线：对分割线部分的设置，包括对分割线间距、长度、颜色，以及宽度的设置。
显示刻度线：对刻度线部分设置，包括轴间距、刻度线长度、颜色和宽度
显示刻度标签：对刻度标签部分设置，字体颜色、字体、斜体、加粗和大小

样式配置03如图4.11.1.17所示，预览03如下图4.11.1.18所示。

图4-11-1-17配置03

图4-11-1-18配置03预览效果

显示指针：指针是否显示
指针置顶：指针是否显示在表和仪表盘详情上
指针宽度、颜色、形状：可自定义，易理解
显示指针固定点：易理解
指针固定点置顶：固定点是否显示在指针上面
指针固定点颜色、大小形状：易理解
字体颜色、字体、斜体、加粗、大小：易理解

（6）雷达图

添加雷达图样式区域，配置如图4-11-1-19所示。

图4-11-1-19雷达图图形配置

【字段解析】

背景色：设置雷达图填充颜色，可添加多个背景色，当添加的背景色个数少于区块个数时，循环取色。
字体颜色，字体，字体斜体，字体加粗，字体大小：均是针对文字进行设置；
显示分割线，宽度，类型：均是针对雷达图分割线进行设置；
分割线颜色：配置雷达图分隔线的颜色，可添加多个。
- 当设置多个颜色时，第一个颜色由于用作于中心点，界面上无法看出效果。
- 当添加的分割线颜色个数少于分割线个数时，循环取色。
显示轴线，轴线颜色，宽度，类型：均是针对雷达图轴线进行设置
各点最大值设置：取填写的数据作为各个顶点的最大值来进行绘制图形。
- 制作单系列雷达图，取数据中最大值作为各点顶点进行绘图，图形中也回显最大值。若不勾选个点最大值设置，则不显示设置页面，若勾选后，清空数据，则自动获取数据如下图所示4.11.1.20所示。