Echarts图属性介绍
标题
可以通过该设置标题项改变统计图标题的显示样式和风格,如下图所示:
标题设置分为两块,内容和样式。
内容
包含标题是否可见以及标题内容两项设置。
- 标题是否可见:若要显示标题,选择“是”;若不需要显示标题,选择“否”。
- 标题文本内容:即标题的文本信息,直接在文本编辑框中编辑即可。
样式
样式中包括标题块位置、标题块外观、标题文本样式等三部分。
位置
调整标题的显示位置,设置项如下:
- 水平安放位置:标题水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。
- 竖直安放位置:标题竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。
外观
设置标题背景色、边距、边框等,设置项如下:
文本样式
设置标题文本的字符样式,设置项如下:
- 文本颜色:标题文本的颜色。可直接颜色组件选择颜色,也可以输入颜色值。
- 文本风格:包括标准、仿意斜体、斜体三种。默认为标准。
- 文本粗细:包括默认、加粗和加细三种。默认为加粗。
- 字体系列:标题文本的字体,可通过下拉框选择。
- 文本大小:标题文本的大小。可通过滑块滑动设置,也可以直接在输入框内输入字号。
图例
可以通过图例设置项改变图例的显示、位置和样式,如下图所示:
注:地图和仪表盘不支持图例。基础
图例是否可见
是否显示图例。默认为“是”。
图例布局
设置图例水平显示还是竖直显示。
图例位置
图例显示位置设置,共有两个设置项:
- 图例水平安放位置:图例水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。
- 图例竖直安放位置:图例竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。默认为bottom。
图例外观
设置图例背景色、边框等,设置项如下:
- 图例背景色:设置图例背景色,可以直接选择颜色,也可以输入颜色值。
- 图例边框颜色:图例边框所使用的颜色。
- 图例边框宽度:图例边框的宽度。默认为0,即没有边框。
- 图例边框圆角:图例边框四个角的圆角度数设置。
图例文字样式
用于设置图例标签文字的字体、颜色、字号、粗细、风格、对齐方式等,可根据具体需求进行设置。
标签
可以通过标签设置项改变图表标签的显示内容、位置和样式,如下图所示:
注:仪表盘不支持图例。内容
包含标签是否可见以及标签文本内容两项设置。
- 标签是否可见:控制是否显示标签。默认为否。
- 标签文本内容:标签的文本信息。
样式
包括标签位置、标签外观、标签文本样式三部分。
标签位置
调整标签的显示位置,共有两个设置项:
- 标签位置:每种统计图类型均有不同,其中地图不支持标签位置设置。下面进行详细介绍。
柱形图:包括上部、左侧、右侧、底部、内部、内部局上、内部局下、内部局左、内部局右等9种。
折线图:包括上部、左侧、右侧、底部等4种。
饼图:包括外部、内部、中心等3种。
- 与系列间距:与系列之间的距离。
标签外观
设置标签背景色、内边距、边框等,设置项如下:
标签文本样式
用于设置标签文字的字体、颜色、字号、粗细、风格等,可根据具体需求进行设置。
x轴
可以通过X轴设置项改变统计图X轴的显示样式和风格,如下图所示:
注:饼图、地图、仪表盘均不支持X轴。X轴设置分为基础、轴线、刻度线、刻度标签四部分内容。
基础
包括是否可见、偏移、位置、坐标轴名称、坐标轴名称样式等设置。
基础部分
包含是否可见、x轴所在的grid的索引、偏移、位置、是否反向等五项设置。
- 是否可见:控制统计图是否显示x轴。默认为是。
- x轴所在的grid索引:
- x轴偏移:
- 位置:X轴位于上部还是底部。默认为底部。
- 是否反向:X轴是否反向显示。
坐标轴名称
设置坐标轴名称、位置、旋转角度,设置项如下:
- 名称:设置x轴的名称,默认无。
- 位置:包括头部、中部、尾部三种。
- 旋转角度:设置坐标轴文本旋转角度。
坐标轴名称样式
用于设置坐标轴名称的文本字体、文本颜色、字号、粗细、风格、文本背景色、边框、内边距等,可根据具体需求进行设置。
轴线
包括轴线是否显示、轴线样式两部分。
轴线是否显示
x轴线是否显示。默认显示。
轴线样式
设置轴线颜色、宽度和线型。设置项如下:
- 颜色:x轴颜色。
- 宽度:x轴线的宽度。
- 类型:X轴线的类型,包括实线、点线和虚线。
刻度线
设置刻度线是否显示以及刻度线长度。
刻度标签
设置刻度标签是否显示、旋转角度以及刻度标签文本样式。
刻度标签是否显示
控制x轴标签是否显示。
旋转角度
设置x周标签的旋转角度。默认为0,即不旋转。
刻度标签文本样式
用于设置坐标轴名称的文本字体、文本颜色、字号、粗细、风格、文本背景色、边框、内边距等,可根据具体需求进行设置。
y轴
相关设置同x轴类似,可参考x轴设置。
系列
可以通过系列设置项改变图表系列的显示样式和风格。
不同类型的统计图系列属性都不相同,下面进行详细说明。
柱形图
外观
柱条宽度
默认情况下为空,即系统自动调整柱条宽度。
不同系列柱间距离
设置同一分类里多个系列柱子之间的距离。
同系列柱间距离
设置分类之间的距离。
柱条边框
设置描边颜色、宽度、类型和圆角。设置项如下:
- 描边颜色:设置边框线的颜色。
- 描边宽度:设置边框的宽度。
- 描边类型:设置边框线型,有三种:实线、点线和虚线。
- 描边圆角:设置边框的圆角效果。
高级
设置项如下:
使用的x轴:使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。 使用的y轴:使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
折线图
外观
分为折点和折线两部分。
折点
设置折点图形、大小、旋转角度、描边等。设置项如下:
- 标记图形:通过下拉列表选择,包括空心圆、实心圆、矩形、三角形、菱形、钉型、箭头、无8种。
- 标记大小:折点标记的大小。
- 标记旋转角度:折点标记的旋转角度。
- 折点描边颜色:折点标记描边颜色。
- 折点描边宽度:设置折点标记描边的粗细。
- 折点描边类型:包括实线、点线、虚线三种。
折线
设置折线线宽、线型和是否平滑,设置项如下:
- 线宽:设置折线的粗细。
- 线类型:包括实线、点线、虚线三种。
- 曲线平滑:设置曲线是否平滑,默认为否。
高级
使用的x轴:使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。 使用的y轴:使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
饼图
包括基础部分、标签引导线、扇形区域三部分内容。
基础部分
- 图例联动:鼠标放置图例上,统计图中对应系列会变大。默认为是。
- 鼠标停留:鼠标放在饼图上,对应部分变大显示。默认为是。
- 选中模式:点击饼图的扇形区域,对应扇形会分离。默认为否。
- 饼图中心:饼图中心的位置。
标签引导线
设置标签引导线的相关属性,设置项如下:
- 标签引导线是否显示:设置是否显示引导线。默认为是。
- 标签引导线是否平滑:默认为否。
- 标签引导线颜色:设置引导线的颜色。
- 标签引导线宽度:设置引导线的粗细。
- 标签引导线线型:设置引导线的线型,包括实线、点线和虚线三种。
扇形区域
设置扇形描边的相关属性,设置项如下:
地图
包括基础部分和地图区域两部分内容。
基础部分
外观
设置地图的缩放比例,目前只支持整数。
位置
设置地图的位置,设置项如下:
- 水平位置:可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。
- 竖直位置:可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。默认为bottom。
地图区域
设置描边的颜色、宽度和线型,设置项如下:
仪表盘
包括基础、边框、分割线、刻度线、刻度标签、指针、标题、详情等8部分。
基础
设置表盘起始角度、最大值最小值、分割段数、刻度等,设置项如下:
- 起始角度:设置表盘起始位置的角度。
- 结束角度:设置表盘结束位置的角度。
- 最小值:设置表盘最小值。
- 最大值:设置表盘最大值。
- 仪表盘分割段数:默认问10。
- 刻度顺时针:设置刻度是否顺时针显示。默认为是。
边框
设置边框属性,设置项如下:
- 是否可见:设置是否显示边框。默认为是。
- 边框宽度:设置设置边框的粗细。
- 轴线颜色:设置仪表盘的颜色,默认值为[[0.2,’#91c7ae’],[0.8,’#63869e’],[1,’#c23531’]]。注:仪表盘不支持主题设置,可以在轴线颜色处自定义仪表盘颜色。
分割线
设置分割线相关属性,设置项如下:
- 是否可见:设置分割线是否显示。
- 长度:设置分割线长度。
- 颜色:设置分割线颜色。
- 宽度:设置分割线的粗细。
- 类型:设置分割线线型,包括实线、点线和虚线。
刻度线
设置刻度线相关属性,设置项如下:
- 是否可见:设置刻度线是否可见。
- 刻度分割数:分隔线之间分割的刻度数。
- 长度:设置刻度线长度。
- 颜色:设置刻度线颜色。
- 宽度:设置刻度线的粗细。
- 类型:设置刻度线线型,包括实线、点线和虚线。
刻度标签
设置刻度标签的相关属性,设置项如下:
- 是否可见:设置刻度标签是否可见。
- 标签与刻度线距离:设置标签与刻度线之间的距离。
- 文本格式:设置标签文本的格式,默认为{value},即本身格式。
- 文本颜色:设置标签文本的颜色,默认没有颜色,即和表盘颜色一致。
- 文本风格:设置标签文本的风格,包含标准、仿意斜体和斜体三种。
- 文本粗细:设置标签文本的粗细,包含标准默认、加粗和加细三种。
- 文本系列:设置标签文本的字体。
- 文本大小:设置标签文本的大小。
- 文本背景颜色:设置标签背景色,默认无颜色。
- 文本边框颜色:设置文本边框颜色,默认无颜色。
- 文本边框宽度:设置文本边框的粗细。
- 文本边框圆角:设置文本边框的圆角效果。
指针
设置指针的相关属性,设置项如下:
- 是否可见:设置是否显示指针。
- 指针宽度:设置指针的宽度。
- 指针长度:设置指针的长度。
- 指针颜色:设置指针颜色。
- 指针边框颜色:设置指针边框颜色。
- 指针边框宽度:设置指针边框的宽度,默认为0,即没有边框。
- 指针边框类型:设置指针边框的线型。有实线、点线和虚线三种。
标题
系列标题指的是仪表盘中间的文本内容。
此模块可设置标题是否可见、文本格式、文本背景色、边框等相关属性,设置项如下,用户可根据需求进行设置。
详情
详情指仪表盘内部的数据,如下图所示:
此模块可设置详情是否可见、文本格式、文本背景色、文本边框等相关属性,设置项如下,用户可根据需求进行设置。
视区
视区指绘图区。可以通过视区设置项改变统计图视区的显示样式和风格,如下图所示:
注:地图不支持图例。通用
设置视区是否可见以及位置,设置项如下:
- 是否可见:设置视区是否可见。
- 水平安放位置:视区水平位置。可以设置为left、center、right,也可以为具体的像素值(例如20)或者百分比(例如20%)。默认为center。
- 竖直安放位置:视区竖直位置。可以设置为top、middle、bottom,也可以设置为具体的像素值(例如20)或者百分比(例如20%)。
外观
设置绘图区的背景色、边框颜色和宽度和刻度标签,设置项如下:
分割线
只有柱形图和折线图存在这项设置分割线分为横向分割线和纵向分割线。各设置项相同。可以设置分割线是否显示以及分割线外观。用户可根据需求设置。
提示
当鼠标悬浮于统计图的系列或分类之上时,系列或分类变为选中状态,且出现数据点提示。效果如下图所示:
内容
设置提示是否可见以及提示内容,设置项如下:
是否可见:设置是否显示提示。 文本:提示的文本内容组成,组成变量有{a}、{b}、{c}、{d}、{e},分别表示系列名、数据名、数据值等。
样式
设置提示框外观和提示框内的文本样式。
提示框外观
设置提示框背景色、内边距、边框颜色和边框宽度,用户可根据需求设置。
提示框文本样式
设置文本样式,包括文本颜色、字体、风格、粗细、大小,用户可根据需求进行设置。
背景色
可以通过该设置项改变图表区的背景色,如下图所示:
注意区分绘图区视区(即绘图区)和整个图表区,此项设置指的是整个图表区的背景色。
交互效果
可以设置统计图超链接,具体设置参见统计图中使用超链接