标题

可以通过该设置标题项改变统计图标题的显示样式和风格,如下图所示: Echarts图属性介绍 - 图1

标题设置分为两块,内容和样式。

内容

包含标题是否可见以及标题内容两项设置。

Echarts图属性介绍 - 图2

  • 标题是否可见:若要显示标题,选择“是”;若不需要显示标题,选择“否”。
  • 标题文本内容:即标题的文本信息,直接在文本编辑框中编辑即可。

样式

样式中包括标题块位置、标题块外观、标题文本样式等三部分。

位置

调整标题的显示位置,设置项如下: Echarts图属性介绍 - 图3

  • 水平安放位置:标题水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。
  • 竖直安放位置:标题竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。

外观

设置标题背景色、边距、边框等,设置项如下: Echarts图属性介绍 - 图4

文本样式

设置标题文本的字符样式,设置项如下: Echarts图属性介绍 - 图5

  • 文本颜色:标题文本的颜色。可直接颜色组件选择颜色,也可以输入颜色值。
  • 文本风格:包括标准、仿意斜体、斜体三种。默认为标准。
  • 文本粗细:包括默认、加粗和加细三种。默认为加粗。
  • 字体系列:标题文本的字体,可通过下拉框选择。
  • 文本大小:标题文本的大小。可通过滑块滑动设置,也可以直接在输入框内输入字号。

图例

可以通过图例设置项改变图例的显示、位置和样式,如下图所示: Echarts图属性介绍 - 图6

注:地图和仪表盘不支持图例。

基础

图例是否可见

是否显示图例。默认为“是”。

Echarts图属性介绍 - 图7

图例布局

设置图例水平显示还是竖直显示。

Echarts图属性介绍 - 图8

图例位置

图例显示位置设置,共有两个设置项: Echarts图属性介绍 - 图9

  • 图例水平安放位置:图例水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。
  • 图例竖直安放位置:图例竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。默认为bottom。

图例外观

设置图例背景色、边框等,设置项如下: Echarts图属性介绍 - 图10

  • 图例背景色:设置图例背景色,可以直接选择颜色,也可以输入颜色值。
  • 图例边框颜色:图例边框所使用的颜色。
  • 图例边框宽度:图例边框的宽度。默认为0,即没有边框。
  • 图例边框圆角:图例边框四个角的圆角度数设置。

图例文字样式

用于设置图例标签文字的字体、颜色、字号、粗细、风格、对齐方式等,可根据具体需求进行设置。 Echarts图属性介绍 - 图11

标签

可以通过标签设置项改变图表标签的显示内容、位置和样式,如下图所示: Echarts图属性介绍 - 图12

注:仪表盘不支持图例。

内容

包含标签是否可见以及标签文本内容两项设置。

Echarts图属性介绍 - 图13

  • 标签是否可见:控制是否显示标签。默认为否。
  • 标签文本内容:标签的文本信息。

样式

包括标签位置、标签外观、标签文本样式三部分。

标签位置

调整标签的显示位置,共有两个设置项: Echarts图属性介绍 - 图14

  • 标签位置:每种统计图类型均有不同,其中地图不支持标签位置设置。下面进行详细介绍。

柱形图:包括上部、左侧、右侧、底部、内部、内部局上、内部局下、内部局左、内部局右等9种。 Echarts图属性介绍 - 图15

折线图:包括上部、左侧、右侧、底部等4种。 Echarts图属性介绍 - 图16

饼图:包括外部、内部、中心等3种。 Echarts图属性介绍 - 图17

  • 与系列间距:与系列之间的距离。

标签外观

设置标签背景色、内边距、边框等,设置项如下: Echarts图属性介绍 - 图18

标签文本样式

用于设置标签文字的字体、颜色、字号、粗细、风格等,可根据具体需求进行设置。 Echarts图属性介绍 - 图19

x轴

可以通过X轴设置项改变统计图X轴的显示样式和风格,如下图所示: Echarts图属性介绍 - 图20

注:饼图、地图、仪表盘均不支持X轴。

X轴设置分为基础、轴线、刻度线、刻度标签四部分内容。

基础

包括是否可见、偏移、位置、坐标轴名称、坐标轴名称样式等设置。

基础部分

包含是否可见、x轴所在的grid的索引、偏移、位置、是否反向等五项设置。 Echarts图属性介绍 - 图21

  • 是否可见:控制统计图是否显示x轴。默认为是。
  • x轴所在的grid索引:
  • x轴偏移:
  • 位置:X轴位于上部还是底部。默认为底部。
  • 是否反向:X轴是否反向显示。

坐标轴名称

设置坐标轴名称、位置、旋转角度,设置项如下: Echarts图属性介绍 - 图22

  • 名称:设置x轴的名称,默认无。
  • 位置:包括头部、中部、尾部三种。
  • 旋转角度:设置坐标轴文本旋转角度。

坐标轴名称样式

用于设置坐标轴名称的文本字体、文本颜色、字号、粗细、风格、文本背景色、边框、内边距等,可根据具体需求进行设置。 Echarts图属性介绍 - 图23

轴线

包括轴线是否显示、轴线样式两部分。

轴线是否显示

x轴线是否显示。默认显示。 Echarts图属性介绍 - 图24

轴线样式

设置轴线颜色、宽度和线型。设置项如下: Echarts图属性介绍 - 图25

  • 颜色:x轴颜色。
  • 宽度:x轴线的宽度。
  • 类型:X轴线的类型,包括实线、点线和虚线。

刻度线

设置刻度线是否显示以及刻度线长度。 Echarts图属性介绍 - 图26

刻度标签

设置刻度标签是否显示、旋转角度以及刻度标签文本样式。

刻度标签是否显示

控制x轴标签是否显示。

Echarts图属性介绍 - 图27

旋转角度

设置x周标签的旋转角度。默认为0,即不旋转。

Echarts图属性介绍 - 图28

刻度标签文本样式

用于设置坐标轴名称的文本字体、文本颜色、字号、粗细、风格、文本背景色、边框、内边距等,可根据具体需求进行设置。 Echarts图属性介绍 - 图29

y轴

相关设置同x轴类似,可参考x轴设置。

系列

可以通过系列设置项改变图表系列的显示样式和风格。 Echarts图属性介绍 - 图30

不同类型的统计图系列属性都不相同,下面进行详细说明。

柱形图

外观

柱条宽度

Echarts图属性介绍 - 图31 默认情况下为空,即系统自动调整柱条宽度。

不同系列柱间距离

Echarts图属性介绍 - 图32

设置同一分类里多个系列柱子之间的距离。

同系列柱间距离

Echarts图属性介绍 - 图33 设置分类之间的距离。

柱条边框

设置描边颜色、宽度、类型和圆角。设置项如下: Echarts图属性介绍 - 图34

  • 描边颜色:设置边框线的颜色。
  • 描边宽度:设置边框的宽度。
  • 描边类型:设置边框线型,有三种:实线、点线和虚线。
  • 描边圆角:设置边框的圆角效果。

高级

设置项如下: Echarts图属性介绍 - 图35

使用的x轴:使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。 使用的y轴:使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

折线图

外观

分为折点和折线两部分。

折点

设置折点图形、大小、旋转角度、描边等。设置项如下: Echarts图属性介绍 - 图36

  • 标记图形:通过下拉列表选择,包括空心圆、实心圆、矩形、三角形、菱形、钉型、箭头、无8种。
  • 标记大小:折点标记的大小。
  • 标记旋转角度:折点标记的旋转角度。
  • 折点描边颜色:折点标记描边颜色。
  • 折点描边宽度:设置折点标记描边的粗细。
  • 折点描边类型:包括实线、点线、虚线三种。

折线

设置折线线宽、线型和是否平滑,设置项如下: Echarts图属性介绍 - 图37

  • 线宽:设置折线的粗细。
  • 线类型:包括实线、点线、虚线三种。
  • 曲线平滑:设置曲线是否平滑,默认为否。 Echarts图属性介绍 - 图38

高级

Echarts图属性介绍 - 图39

使用的x轴:使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。 使用的y轴:使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

饼图

包括基础部分、标签引导线、扇形区域三部分内容。

基础部分

Echarts图属性介绍 - 图40

  • 图例联动:鼠标放置图例上,统计图中对应系列会变大。默认为是。 Echarts图属性介绍 - 图41
  • 鼠标停留:鼠标放在饼图上,对应部分变大显示。默认为是。 Echarts图属性介绍 - 图42
  • 选中模式:点击饼图的扇形区域,对应扇形会分离。默认为否。 Echarts图属性介绍 - 图43
  • 饼图中心:饼图中心的位置。

标签引导线

设置标签引导线的相关属性,设置项如下: Echarts图属性介绍 - 图44

  • 标签引导线是否显示:设置是否显示引导线。默认为是。
  • 标签引导线是否平滑:默认为否。
  • 标签引导线颜色:设置引导线的颜色。
  • 标签引导线宽度:设置引导线的粗细。
  • 标签引导线线型:设置引导线的线型,包括实线、点线和虚线三种。

扇形区域

设置扇形描边的相关属性,设置项如下: Echarts图属性介绍 - 图45

地图

包括基础部分和地图区域两部分内容。

基础部分

外观

设置地图的缩放比例,目前只支持整数。 Echarts图属性介绍 - 图46

位置

设置地图的位置,设置项如下: Echarts图属性介绍 - 图47

  • 水平位置:可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。
  • 竖直位置:可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。默认为bottom。

地图区域

设置描边的颜色、宽度和线型,设置项如下: Echarts图属性介绍 - 图48

仪表盘

包括基础、边框、分割线、刻度线、刻度标签、指针、标题、详情等8部分。

基础

设置表盘起始角度、最大值最小值、分割段数、刻度等,设置项如下: Echarts图属性介绍 - 图49

  • 起始角度:设置表盘起始位置的角度。
  • 结束角度:设置表盘结束位置的角度。
  • 最小值:设置表盘最小值。
  • 最大值:设置表盘最大值。
  • 仪表盘分割段数:默认问10。
  • 刻度顺时针:设置刻度是否顺时针显示。默认为是。

边框

设置边框属性,设置项如下: Echarts图属性介绍 - 图50

  • 是否可见:设置是否显示边框。默认为是。
  • 边框宽度:设置设置边框的粗细。
  • 轴线颜色:设置仪表盘的颜色,默认值为[[0.2,'#91c7ae'],[0.8,'#63869e'],[1,'#c23531']]。注:仪表盘不支持主题设置,可以在轴线颜色处自定义仪表盘颜色。

分割线

设置分割线相关属性,设置项如下: Echarts图属性介绍 - 图51

  • 是否可见:设置分割线是否显示。
  • 长度:设置分割线长度。
  • 颜色:设置分割线颜色。
  • 宽度:设置分割线的粗细。
  • 类型:设置分割线线型,包括实线、点线和虚线。

刻度线

设置刻度线相关属性,设置项如下: Echarts图属性介绍 - 图52

  • 是否可见:设置刻度线是否可见。
  • 刻度分割数:分隔线之间分割的刻度数。
  • 长度:设置刻度线长度。
  • 颜色:设置刻度线颜色。
  • 宽度:设置刻度线的粗细。
  • 类型:设置刻度线线型,包括实线、点线和虚线。

刻度标签

设置刻度标签的相关属性,设置项如下: Echarts图属性介绍 - 图53 Echarts图属性介绍 - 图54

  • 是否可见:设置刻度标签是否可见。
  • 标签与刻度线距离:设置标签与刻度线之间的距离。
  • 文本格式:设置标签文本的格式,默认为{value},即本身格式。
  • 文本颜色:设置标签文本的颜色,默认没有颜色,即和表盘颜色一致。
  • 文本风格:设置标签文本的风格,包含标准、仿意斜体和斜体三种。
  • 文本粗细:设置标签文本的粗细,包含标准默认、加粗和加细三种。
  • 文本系列:设置标签文本的字体。
  • 文本大小:设置标签文本的大小。
  • 文本背景颜色:设置标签背景色,默认无颜色。
  • 文本边框颜色:设置文本边框颜色,默认无颜色。
  • 文本边框宽度:设置文本边框的粗细。
  • 文本边框圆角:设置文本边框的圆角效果。

指针

设置指针的相关属性,设置项如下: Echarts图属性介绍 - 图55

  • 是否可见:设置是否显示指针。
  • 指针宽度:设置指针的宽度。
  • 指针长度:设置指针的长度。
  • 指针颜色:设置指针颜色。
  • 指针边框颜色:设置指针边框颜色。
  • 指针边框宽度:设置指针边框的宽度,默认为0,即没有边框。
  • 指针边框类型:设置指针边框的线型。有实线、点线和虚线三种。

标题

系列标题指的是仪表盘中间的文本内容。 Echarts图属性介绍 - 图56

此模块可设置标题是否可见、文本格式、文本背景色、边框等相关属性,设置项如下,用户可根据需求进行设置。 Echarts图属性介绍 - 图57 Echarts图属性介绍 - 图58

详情

详情指仪表盘内部的数据,如下图所示: Echarts图属性介绍 - 图59

此模块可设置详情是否可见、文本格式、文本背景色、文本边框等相关属性,设置项如下,用户可根据需求进行设置。 Echarts图属性介绍 - 图60 Echarts图属性介绍 - 图61

视区

视区指绘图区。可以通过视区设置项改变统计图视区的显示样式和风格,如下图所示: Echarts图属性介绍 - 图62

注:地图不支持图例。

通用

设置视区是否可见以及位置,设置项如下: Echarts图属性介绍 - 图63

  • 是否可见:设置视区是否可见。
  • 水平安放位置:视区水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。
  • 竖直安放位置:视区竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。

外观

设置绘图区的背景色、边框颜色和宽度和刻度标签,设置项如下: Echarts图属性介绍 - 图64

分割线

只有柱形图和折线图存在这项设置

分割线分为横向分割线和纵向分割线。各设置项相同。可以设置分割线是否显示以及分割线外观。用户可根据需求设置。

Echarts图属性介绍 - 图65

提示

当鼠标悬浮于统计图的系列或分类之上时,系列或分类变为选中状态,且出现数据点提示。效果如下图所示: Echarts图属性介绍 - 图66

内容

设置提示是否可见以及提示内容,设置项如下: Echarts图属性介绍 - 图67

是否可见:设置是否显示提示。 文本:提示的文本内容组成,组成变量有{a}、{b}、{c}、{d}、{e},分别表示系列名、数据名、数据值等。

样式

设置提示框外观和提示框内的文本样式。

提示框外观

设置提示框背景色、内边距、边框颜色和边框宽度,用户可根据需求设置。 Echarts图属性介绍 - 图68

提示框文本样式

设置文本样式,包括文本颜色、字体、风格、粗细、大小,用户可根据需求进行设置。 Echarts图属性介绍 - 图69

背景色

可以通过该设置项改变图表区的背景色,如下图所示: Echarts图属性介绍 - 图70

注意区分绘图区视区(即绘图区)和整个图表区,此项设置指的是整个图表区的背景色。

交互效果

可以设置统计图超链接,具体设置参见统计图中使用超链接