ECharts图形的序列属性有：序列属性、普通状态设置、高亮状态设置、数据点设置等。

Title_font
Name

柱子宽度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置柱图中柱子的宽度。

Image Removed

预览效果

两种不同的柱子宽度效果对比，如图：

Image Removed

数据点设置

数据点设置包括“数据点形状、数据点大小、数据点旋转角度”。

Image Added

Title_font
Name

平滑曲线

数据点形状

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

当图表类型为线图时，可设置曲线是否平滑。设置图形中数据点的形状。

Image RemovedImage Added

预览效果

设置与不设置“平滑曲线”效果对比，如下：设置不同的数据点形状效果对比，如下：

Image RemovedImage Added

title_font

面板

Name

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置是否连接空数据，则在空数据点前后数据之间，直接用直线连接。

Image Removed

预览效果

已知饮料的数据都是完整的，而点心在华中的数据为空，设置与不设置“连接空数据”效果对比，如下：

Image Removed

borderColor

连接空数据

#BBBBBB
bgColor	#F0F0F0
borderWidth	1
borderStyle	solid

目录

Title_font
Name

鼠标点选模式

数据点大小

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置鼠标选中饼图扇区时饼图的动画效果。

设置图形中数据点的大小。

Image Removed

Image Added

预览效果

不可选：点击饼图扇区无动画效果；

设置不同数值的数据点大小效果对比，如下：

单选：点击饼图始终只有一个扇区处于分离状态；点击另一扇区时，该扇区分离，原本分离的扇区缩回；

Image Removed

多选：点击扇区，扇区即分离，再次点击扇区，扇区即缩回。扇区之间不会相互影响。

Image Removed

Image Added

Title_font
Name

列数

数据点旋转角度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置图形中数据点逆时针旋转的角度。

Image Added

预览效果

设置不同数值的数据点旋转角度效果对比，如下：

Image Added

Title_font
Name

指标名称

数据标注设置

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置是否显示指标名称，图形所使用指标的名称。

设置是否显示数据的最大值和最小值。

Image Removed

Image Added

预览效果

设置现实与不显示“指标名称”效果对比，如下：

设置显示数据标注，如下：

Image Removed

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置指标名称的文本样式。

可设置文本的字体、字号、字形和颜色。

Image Removed

预览效果

设置文本的颜色为“黑色”，如图：

Image Removed

Image Added

Title_font
Name

指标样式

数据标线设置

数据标线设置包括“标线类型，标线颜色”。

Image Added

Title_font
Name

显示最大值

标线类型

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置是否显示最大值，显示最大值时会将最大值所处扇区分离，并显示其信息：指标名称与指标值。

设置标线的类型，通常作为图形告警线的设置，有平均值、最大值和最小值三种类型。

Image Removed

Image Added

预览效果

设置与不设置“显示最大值”效果对比，如图：

三种标线类型在图形显示的效果如下：

Image Removed

Image Added

Title_font
Name

南丁格尔图

标记颜色

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置以南丁格尔图的形式展现数据。

设置标线的颜色。

Image Removed

Image Added

预览效果

不展现：图形默认使用饼图或圆环图展现；

设置标线颜色为“红色”，如图：

半径和面积模式：以不同半径和扇区角度大小展示数据。如下：不同的扇区，其半径大小不同，并且不同的扇区在整个圆360°中，所占的度数也是不同的，数据越大，所占度数越大。

Image Added

Image Removed

Title_font

半径模式：仅以半径大小不同展示不同扇区的数据，各个扇区平分整个圆360°

Name

Image Removed

标记设置

标记设置包括“标记的图形、标记的大小”。

Image Added

Title_font
Name

显示方式

标记的图形

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置树图中标记的图形类型。

Image Added

预览效果

设置不同类型标记的图形效果对比，如下：

Image Added

Title_font
Name

连接曲率

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

标记的大小

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置标记的大小。

Image Added

预览效果

设置不同数值标记的大小效果对比，如下：

Image Added

Title_font
Name

斥力因子

表盘

ECharts图形中对油量图的表盘的设置包括“表盘风格、自定义风格、刻度设置、刻度数、刻度线长、刻度颜色”。

Image Added

Title_font
Name

拖动

表盘风格

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图的表盘风格。

Image Added

预览效果

设置不同表盘风格效果对比，如下：

Image Added

Title_font
Name

是否展开

自定义风格

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

设置油量图表盘的开始角度和结束角度。

title_font

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

Title_font
Name 普通状态设置

角度为正值时，以0度为起点，逆时针方向旋转；

Name	初始化展开的层级

角度为负值时，以0度为起点，顺时针方向旋转。

Image Added

预览效果

自定义设置不同风格的表盘效果对比，如下：

Image Added

Title_font
Name

系列主色

刻度设置

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

可将数据设置中的字段作为自定义的刻度设置。

Image Added

预览效果

设置销售额的平均值作为最小值，销售额的最大值作为最大值，效果如下：

Image Added

Title_font
Name

边框色

刻度数

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图输出的刻度数。

Image Added

预览效果

设置不同数值大小的刻度数效果对比，如下：

Image Added

Title_font
Name

边框宽度

刻度线长

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图刻度的线长。

Image Added

预览效果

图中表盘刻度的颜色为红色，不同数值大小的刻度线长效果对比，如下：

Image Added

Title_font
Name

数据项标签

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

刻度颜色

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图刻度的颜色。

Image Added

预览效果

设置不同颜色的刻度效果对比，如下：

Image Added

Title_font
Name

数据标签内容

指针

ECharts图形中对油量表指针的设置包括“颜色和宽度”。

Image Added

Title_font
Name

位置

颜色

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图指针的颜色。

Image Added

预览效果

设置不同颜色的油量图指针效果对比，如下：

Image Added

Title_font
Name

文本样式

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

宽度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图指针的宽度。

Image Added

预览效果

设置不同数值大小的指针宽度效果对比，如下：

Image Added

Title_font
Name

节点颜色

表盘小刻度

ECharts图形中对油量图表盘小刻度的设置包括“刻度线长、刻度数、颜色”。

Image Added

Title_font
Name

文本样式

刻度线长

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图表盘小刻度的线长。

Image Added

预览效果

图中表盘小刻度颜色为红色，不同数值大小的表盘小刻度线长效果对比，如下：

Image Added

Title_font
Name

线条颜色

刻度数

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图的表盘小刻度数，即油量图表盘两个刻度之间的小刻度数。

Image Added

预览效果

图中表盘小刻度颜色为红色，不同数值大小的表盘小刻度数效果对比，如下：

Image Added

Title_font
Name

线条宽度

颜色

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图表盘小刻度的颜色。

Image Added

预览效果

设置不同颜色的表盘小刻度效果对比，如下：

Image Added

Title_font
Name

高亮状态设置

指针数据

ECharts图形中对油量图指针数据的设置包括“显示数据和偏移位置”。

Image Added

Title_font
Name

系列主色

显示数据

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图是否显示指针数据。

Image Added

预览效果

设置显示与不显示指针数据效果对比，如下：

Image Added

Title_font
Name

边框色

偏移位置

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

设置油量图指针数据的偏移位置。

title_font

偏移位置为水平0%，垂直0%时为油量图的中心。

Name

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

Image Added

边框宽度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

设置不同偏移位置的指针数据效果对比，如下：

Image Added

Title_font
Name

数据项标签

标题

ECharts图形中对油量图标题的设置包括“显示数据、标题样式、偏移位置”。

Image Added

Title_font
Name

位置

显示数据

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置是否显示油量图的标题。

Image Added

预览效果

设置显示与不显示油量图的标题效果对比，如下：

Image Added

Title_font
Name

节点颜色

标题样式

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图标题的样式。

Image Added

预览效果

设置标题的字体为“宋体”，字号为“14”，颜色为“蓝色”。

Image Added

Title_font
Name

文本样式

偏移位置

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置油量图标题的偏移位置。

偏移位置为水平0%，垂直0%时为油量图的中心。

Image Added

预览效果

title_font

设置油量图标题不同的偏移位置效果对比，如下：

Name

Image Added

数据点设置

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

Title_font
Name

数据点形态

特效设置

ECharts图形中对3D航线图的特效设置包括“是否开启特效、特效时间间隔、特效尾巴长度百分比、特效尾巴颜色”。

Image Added

Title_font
Name

数据点大小

是否开启特效

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置3D航线图中是否开启由起点指向终点的特效；不开启则不显示特效，且不能设置有关特效的配置项。

Image Added

预览效果

设置开启与不开启特效效果对比，如下：

Image Added

Title_font
Name

数据点旋转角度

特效时间间隔

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置3D航线图中每一次特效从起点飞向终点的时间间隔。

Image Added

预览效果

Title_fontName数据标注设置

设置不同数值大小的特效时间间隔效果对比，如下：

Image Added

Title_font
Name

是否显示

特效尾巴宽度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置3D航线图中由起点指向终点特效的尾巴宽度。

Image Added

预览效果

Title_fontName数据标线设置

设置不同数值大小的特效尾巴宽度效果对比，如下：

Image Added

Title_font
Name

标线类型

特效尾巴长度百分比

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置3D航线图中由起点指向终点特效拖尾长度的百分比；值越大，特效尾巴长度越长，反之越短。

Image Added

预览效果

设置不同数值大小的特效尾巴长度百分比效果对比，如下：

Image Added

Title_font
Name

标记颜色

特效尾巴颜色

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置3D航线图中由起点指向终点特效的尾巴颜色。

Image Added

预览效果

设置不同的特效尾巴颜色效果对比，如下

Image Added

Title_font
Name 线条样式设置

ECharts图形中对3D航线图中由起点指向终点的线条的样式设置包括“线条颜色和线条宽度”。

标记设置

Image Added

Title_font
Name

标记的图形

线条颜色

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

设置3D航线图中由起点指向终点的线条的颜色。

Image Added

预览效果

设置不同的线条颜色效果对比：

Image Added

Title_font
Name

标记的大小

线条宽度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html}

属性说明

预览效果

设置3D航线图中由起点指向终点的线条的宽度。

panel

Image Added

borderColor

预览效果

#BBBBBBbgColor#F0F0F0borderWidth1borderStylesolidtoc

设置不同数值大小的线条宽度效果对比，如下：

Image Added

页面树结构

页面历史

版本比较

旧版本 5

新版本 当前版本

标识

Title_fontName

数据点设置

Title_fontName

数据点形状

Title_fontName

数据点大小

Title_fontName

数据点旋转角度

Title_fontName

数据标注设置

Title_fontName

数据标线设置

Title_fontName

标线类型

Title_fontName

标记颜色

Title_font

Name

标记设置

Title_fontName

标记的图形

Title_fontName

标记的大小

Title_fontName

表盘

Title_fontName

表盘风格

Title_fontName

自定义风格

Title_fontName普通状态设置

Title_fontName

刻度设置

Title_fontName

刻度数

Title_fontName

刻度线长

Title_fontName

刻度颜色

Title_fontName

指针

Title_fontName

颜色

Title_fontName

宽度

Title_fontName

表盘小刻度

Title_fontName

刻度线长

Title_fontName

刻度数

Title_fontName

颜色

Title_fontName

指针数据

Title_fontName

显示数据

Title_fontName

偏移位置

Title_fontName

标题

Title_fontName

显示数据

Title_fontName

标题样式

Title_fontName

偏移位置

Title_fontName

特效设置

Title_fontName

是否开启特效

Title_fontName

特效时间间隔

Title_fontName

特效尾巴宽度

新版本当前版本

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name 普通状态设置

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name 线条样式设置

Title_font
Name

Title_font
Name