请访问 Apache ECharts 的官网  

https://echarts.apache.org
访问官网
x

series-graph

关系图

用于展现节点以及节点之间的关系数据。

示例:

所有属性

series-graph. type = 'graph'

string

series-graph. id

string

组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

series-graph. name

string

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

series-graph. coordinateSystem

string

该系列使用的坐标系,可选:

  • null 或者 'none'

    无坐标系。

  • 'cartesian2d'

    使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。

  • 'polar'

    使用极坐标系,通过 polarIndex 指定相应的极坐标组件

  • 'geo'

    使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。

  • 'calendar'

    使用日历坐标系,通过 calendarIndex 指定相应的日历坐标系组件。

  • 'none'

    不使用坐标系。

series-graph. xAxisIndex

number

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

series-graph. yAxisIndex

number

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

series-graph. polarIndex

number

使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。

series-graph. geoIndex

number

使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。

series-graph. calendarIndex

number

使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。

series-graph. center 试一试

Array

当前视角的中心点。可以是包含两个 number 类型(表示像素值)或 string 类型(表示相对容器的百分比)的数组。 从 5.3.3 版本开始支持 string 类型。

例如:

center: [115.97, '30%']

series-graph. zoom = 1 试一试

number

当前视角的缩放比例。

series-graph. layout = 'none' 试一试

string

图的布局。

可选:

  • 'none' 不采用任何布局,使用节点中提供的 xy 作为节点的位置。

  • 'circular' 采用环形布局,见示例 Les Miserables,布局相关的配置项见 graph.circular

  • 'force' 采用力引导布局,见示例 Force,布局相关的配置项见 graph.force

series-graph. circular

Object

环形布局相关配置

series-graph.circular. rotateLabel 试一试

boolean

是否旋转标签,默认不旋转

series-graph. force

Object

力引导布局相关的配置项,力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力,每条边的两个节点之间添加一个引力,每次迭代节点会在各个斥力和引力的作用下移动位置,多次迭代后节点会静止在一个受力平衡的位置,达到整个模型的能量最小化。

力引导布局的结果有良好的对称性和局部聚合性,也比较美观。

series-graph.force. initLayout

string

进行力引导布局前的初始化布局,初始化布局会影响到力引导的效果。

默认不进行任何布局,使用节点中提供的 xy 作为节点的位置。如果不存在的话会随机生成一个位置。

也可以选择使用环形布局 'circular'

series-graph.force. repulsion = 50 试一试

Arraynumber

节点之间的斥力因子。

支持设置成数组表达斥力的范围,此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大

series-graph.force. gravity = 0.1 试一试

number

节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。

series-graph.force. edgeLength = 30 试一试

Arraynumber

边的两个节点之间的距离,这个距离也会受 repulsion

支持设置成数组表达边长的范围,此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例

// 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
edgeLength: [10, 50]

series-graph.force. layoutAnimation = true 试一试

boolean

因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。

series-graph.force. friction = 0.6 试一试

number

v4.5.0 开始支持

这个参数能减缓节点的移动速度。取值范围 0 到 1。

但是仍然是个试验性的参数,参见 #11024

series-graph. roam 试一试

booleanstring

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启

series-graph. scaleLimit

Object

滚轮缩放的极限控制,通过 minmax 限制最小和最大的缩放值。

series-graph.scaleLimit. min

number

最小的缩放值

series-graph.scaleLimit. max

number

最大的缩放值

series-graph. nodeScaleRatio = 0.6 试一试

number

鼠标漫游缩放时节点的相应缩放比例,当设为0时节点不随着鼠标的缩放而缩放

series-graph. draggable 试一试

boolean

节点是否可拖拽。

注意:v5.4.1 之前的版本只在使用力引导布局的时候才有用。

series-graph. symbol 试一试

string

节点标记的图形。

ECharts 提供的标记类型包括

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI

URL 为图片链接例如:

'image://http://example.website/a/b.png'

URL 为 dataURI 例如:

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如:

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

series-graph. symbolSize 试一试

numberArray

节点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series-graph. symbolRotate 试一试

number

节点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series-graph. symbolKeepAspect 试一试

boolean

如果 symbolpath:// 的形式,是否在缩放时保持该图形的长宽比。

series-graph. symbolOffset = [0, 0] 试一试

Array

节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '-50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series-graph. edgeSymbol = ['none', 'none']

Arraystring

边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头,如下:

edgeSymbol: ['circle', 'arrow']

series-graph. edgeSymbolSize = 10 试一试

Arraynumber

边两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

series-graph. cursor = 'pointer' 试一试

string

鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor

series-graph. itemStyle

Object

图形样式。

series-graph.itemStyle. color = 自适应 试一试

ColorFunction

图形的颜色。 默认从全局调色盘 option.color 获取颜色。

支持使用rgb(255,255,255)rgba(255,255,255,1)#fff等方式设置为纯色,也支持设置为渐变色和纹理填充,具体见option.color

支持使用回调函数。回调函数格式如下:

(params: Object) => Color

传入的是数据项 seriesIndex, dataIndex, data, value 等各个参数。

series-graph.itemStyle. borderColor = '#000' 试一试

Color

图形的描边颜色。支持的颜色格式同 color,不支持回调函数。

series-graph.itemStyle. borderWidth 试一试

number

描边线宽。为 0 时无描边。

series-graph.itemStyle. borderType = 'solid' 试一试

stringnumberArray

描边类型。

可选:

  • 'solid'
  • 'dashed'
  • 'dotted'

v5.0.0 开始,也可以是 number 或者 number 数组,用以指定线条的 dash array,配合 borderDashOffset 可实现更灵活的虚线效果。

例如:

{

borderType: [5, 10],

borderDashOffset: 5
}

series-graph.itemStyle. borderDashOffset 试一试

number

v5.0.0 开始支持

用于设置虚线的偏移量,可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset

series-graph.itemStyle. borderCap = 'butt' 试一试

string

v5.0.0 开始支持

用于指定线段末端的绘制方式,可以是:

  • 'butt': 线段末端以方形结束。
  • 'round': 线段末端以圆形结束。
  • 'square': 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。

默认值为 'butt'。 更多详情可以参考 MDN lineCap

series-graph.itemStyle. borderJoin = 'bevel' 试一试

string

v5.0.0 开始支持

用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。

可以是:

  • 'bevel': 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。
  • 'round': 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。
  • 'miter': 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。这个设置可以通过 borderMiterLimit 属性看到效果。

默认值为 'bevel'。 更多详情可以参考 MDN lineJoin

series-graph.itemStyle. borderMiterLimit = 10 试一试

number

v5.0.0 开始支持

用于设置斜接面限制比例。只有当 borderJoinmiter 时, borderMiterLimit 才有效。

默认值为 10。负数、0InfinityNaN 均会被忽略。

更多详情可以参考 MDN miterLimit

series-graph.itemStyle. shadowBlur 试一试

number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series-graph.itemStyle. shadowColor 试一试

Color

阴影颜色。支持的格式同color

series-graph.itemStyle. shadowOffsetX 试一试

number

阴影水平方向上的偏移距离。

series-graph.itemStyle. shadowOffsetY 试一试

number

阴影垂直方向上的偏移距离。

series-graph.itemStyle. opacity = 1 试一试

number

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series-graph. lineStyle

Object

关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值,此时边会自动取源节点或目标节点的颜色作为自己的颜色。

series-graph.lineStyle. color = '#aaa' 试一试

Color

线的颜色。

支持使用rgb(255,255,255)rgba(255,255,255,1)#fff等方式设置为纯色,也支持设置为渐变色和纹理填充,具体见option.color

series-graph.lineStyle. width = 1 试一试

number

线宽。

series-graph.lineStyle. type = 'solid' 试一试

stringnumberArray

线的类型。

可选:

  • 'solid'
  • 'dashed'
  • 'dotted'

v5.0.0 开始,也可以是 number 或者 number 数组,用以指定线条的 dash array,配合 dashOffset 可实现更灵活的虚线效果。

例如:

{

type: [5, 10],

dashOffset: 5
}

series-graph.lineStyle. dashOffset 试一试

number

v5.0.0 开始支持

用于设置虚线的偏移量,可搭配 type 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset

series-graph.lineStyle. cap = 'butt' 试一试

string

v5.0.0 开始支持

用于指定线段末端的绘制方式,可以是:

  • 'butt': 线段末端以方形结束。
  • 'round': 线段末端以圆形结束。
  • 'square': 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。

默认值为 'butt'。 更多详情可以参考 MDN lineCap

series-graph.lineStyle. join = 'bevel' 试一试

string

v5.0.0 开始支持

用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。

可以是:

  • 'bevel': 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。
  • 'round': 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。
  • 'miter': 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。

默认值为 'bevel'。 更多详情可以参考 MDN lineJoin

series-graph.lineStyle. miterLimit = 10 试一试

number

v5.0.0 开始支持

用于设置斜接面限制比例。只有当 joinmiter 时, miterLimit 才有效。

默认值为 10。负数、0InfinityNaN 均会被忽略。

更多详情可以参考 MDN miterLimit

series-graph.lineStyle. shadowBlur 试一试

number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

series-graph.lineStyle. shadowColor 试一试

Color

阴影颜色。支持的格式同color

series-graph.lineStyle. shadowOffsetX 试一试

number

阴影水平方向上的偏移距离。

series-graph.lineStyle. shadowOffsetY 试一试

number

阴影垂直方向上的偏移距离。

series-graph.lineStyle. opacity = 0.5 试一试

number

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

series-graph.lineStyle. curveness 试一试

number

边的曲度,支持从 0 到 1 的值,值越大曲度越大。

series-graph. label

Object

图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。

series-graph.label. show 试一试

boolean

是否显示标签。

series-graph.label. position = 'inside' 试一试

stringArray

标签的位置。

  • 可以通过内置的语义声明位置:

    示例:

      position: 'top'
    

    支持:top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight

  • 也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。

    示例:

      // 绝对的像素值
      position: [10, 10],
      // 相对的百分比
      position: ['50%', '50%']
    

参见:label position

series-graph.label. distance = 5 试一试

number

距离图形元素的距离。

当 position 为字符描述值(如 'top''insideRight')时候有效。

参见:label position

series-graph.label. rotate 试一试

number

标签旋转。从 -90 度到 90 度。正值是逆时针。

参见:label rotation

series-graph.label. offset 试一试

Array

是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40

series-graph.label. minMargin

number

v5.0.0 开始支持

用于控制标签之间的最小距离,当启用 labelLayout 时可能会用到。

series-graph.label. formatter

stringFunction

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

字符串模板 模板变量有:

  • {a}:系列名。
  • {b}:数据名。
  • {c}:数据值。
  • {@xxx}:数据中名为 'xxx' 的维度的值,如 {@product} 表示名为 'product' 的维度的值。
  • {@[n]}:数据中维度 n 的值,如 {@[3]} 表示维度 3 的值,从 0 开始计数。

示例:

formatter: '{b}: {@score}'

回调函数

回调函数格式:

(params: Object|Array) => string

参数 params 是 formatter 需要的单个数据集。格式如下:

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)
    value: number|Array|Object,
    // 坐标轴 encode 映射信息,
    // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)
    // value 必然为数组,不会为 null/undefined,表示 dimension index 。
    // 其内容如:
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index,如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string
}

注:encode 和 dimensionNames 的使用方式,例如:

如果数据为:

dataset: {
    source: [
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
}

则可这样得到 y 轴对应的 value:

params.value[params.encode.y[0]]

如果数据为:

dataset: {
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
    ]
}

则可这样得到 y 轴对应的 value:

params.value[params.dimensionNames[params.encode.y[0]]]

series-graph.label. color = '#fff' 试一试

Color

文字的颜色。

如果设置为 'inherit',则为视觉映射得到的颜色,如系列色。

series-graph.label. fontStyle = 'normal' 试一试

string

文字字体的风格。

可选:

  • 'normal'
  • 'italic'
  • 'oblique'

series-graph.label. fontWeight = 'normal' 试一试

stringnumber

文字字体的粗细。

可选:

  • 'normal'
  • 'bold'
  • 'bolder'
  • 'lighter'
  • 100 | 200 | 300 | 400...

series-graph.label. fontFamily = 'sans-serif' 试一试

string

文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

series-graph.label. fontSize = 12 试一试

number

文字的字体大小。

series-graph.label. align 试一试

string

文字水平对齐方式,默认自动。

可选:

  • 'left'
  • 'center'
  • 'right'

rich 中如果没有设置 align,则会取父层级的 align。例如:

{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`,则 `align` 为 right
        }
    }
}

series-graph.label. verticalAlign 试一试

string

文字垂直对齐方式,默认自动。

可选:

  • 'top'
  • 'middle'
  • 'bottom'

rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。例如:

{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
        }
    }
}

series-graph.label. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`,则 `lineHeight` 为 56
        }
    }
}

series-graph.label. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

也可以直接使用图片,例如:

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL,
    // 或者图片的 dataURI,
    // 或者 HTMLImageElement 对象,
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

如果设置为 'inherit',则为视觉映射得到的颜色,如系列色。

series-graph.label. borderColor 试一试

Color

文字块边框颜色。

如果设置为 'inherit',则为视觉映射得到的颜色,如系列色。

series-graph.label. borderWidth 试一试

number

文字块边框宽度。

series-graph.label. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选:

  • 'solid'
  • 'dashed'
  • 'dotted'

v5.0.0 开始,也可以是 number 或者 number 数组,用以指定线条的 dash array,配合 borderDashOffset 可实现更灵活的虚线效果。

例如:

{

borderType: [5, 10],

borderDashOffset: 5
}

series-graph.label. borderDashOffset 试一试

number

v5.0.0 开始支持

用于设置虚线的偏移量,可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset

series-graph.label. borderRadius 试一试

numberArray

文字块的圆角。

series-graph.label. padding 试一试

numberArray

文字块的内边距。例如:

  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

series-graph.label. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

series-graph.label. shadowBlur 试一试

number

文字块的背景阴影长度。

series-graph.label. shadowOffsetX 试一试

number

文字块的背景阴影 X 偏移。

series-graph.label. shadowOffsetY 试一试

number

文字块的背景阴影 Y 偏移。

series-graph.label. width 试一试

number

文本显示宽度。

series-graph.label. height 试一试

number

文本显示高度。

series-graph.label. textBorderColor 试一试

Color

文字本身的描边颜色。

如果设置为 'inherit',则为视觉映射得到的颜色,如系列色。

series-graph.label. textBorderWidth 试一试

number

文字本身的描边宽度。

series-graph.label. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选:

  • 'solid'
  • 'dashed'
  • 'dotted'

v5.0.0 开始,也可以是 number 或者 number 数组,用以指定线条的 dash array,配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如:

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}

series-graph.label. textBorderDashOffset 试一试

number

v5.0.0 开始支持

用于设置虚线的偏移量,可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset

series-graph.label. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

series-graph.label. textShadowBlur 试一试

number

文字本身的阴影长度。

series-graph.label. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

series-graph.label. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

series-graph.label. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

  • 'truncate' 截断,并在末尾显示ellipsis配置的文本,默认为...
  • 'break' 换行
  • 'breakAll' 换行,跟'break'不同的是,在英语等拉丁文中,'breakAll'还会强制单词内换行

series-graph.label. ellipsis = '...'

string

overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本。

series-graph.label. rich

Object

rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

例如:

label: {
    // 在文本中,可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号:
    // `{styleName|text content text content}` 标记样式名。
    // 注意,换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

详情参见教程:富文本标签

所有属性
{ <style_name> }

series-graph. edgeLabel

Object

series-graph.edgeLabel. show

boolean

是否显示标签。

series-graph.edgeLabel. position = 'middle'

string

标签位置,可选:

  • 'start' 线的起始点。
  • 'middle' 线的中点。
  • 'end' 线的结束点。

series-graph.edgeLabel. formatter

stringFunction

标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行。

字符串模板 模板变量有:

  • {a}:系列名。
  • {b}:数据名。
  • {c}:数据值。
  • {@xxx}:数据中名为 'xxx' 的维度的值,如 {@product} 表示名为 'product' 的维度的值。
  • {@[n]}:数据中维度 n 的值,如 {@[3]} 表示维度 3 的值,从 0 开始计数。

示例:

formatter: '{b}: {@score}'

回调函数

回调函数格式:

(params: Object|Array) => string

参数 params 是 formatter 需要的单个数据集。格式如下:

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)
    value: number|Array|Object,
    // 坐标轴 encode 映射信息,
    // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)
    // value 必然为数组,不会为 null/undefined,表示 dimension index 。
    // 其内容如:
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index,如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string
}

注:encode 和 dimensionNames 的使用方式,例如:

如果数据为:

dataset: {
    source: [
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
}

则可这样得到 y 轴对应的 value:

params.value[params.encode.y[0]]

如果数据为:

dataset: {
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
    ]
}

则可这样得到 y 轴对应的 value:

params.value[params.dimensionNames[params.encode.y[0]]]

series-graph.edgeLabel. color = '#fff' 试一试

Color

文字的颜色。

series-graph.edgeLabel. fontStyle = 'normal' 试一试

string

文字字体的风格。

可选:

  • 'normal'
  • 'italic'
  • 'oblique'

series-graph.edgeLabel. fontWeight = 'normal' 试一试

stringnumber

文字字体的粗细。

可选:

  • 'normal'
  • 'bold'
  • 'bolder'
  • 'lighter'
  • 100 | 200 | 300 | 400...

series-graph.edgeLabel. fontFamily = 'sans-serif' 试一试

string

文字的字体系列。

还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

series-graph.edgeLabel. fontSize = 12 试一试

number

文字的字体大小。

series-graph.edgeLabel. align 试一试

string

文字水平对齐方式,默认自动。

可选:

  • 'left'
  • 'center'
  • 'right'

rich 中如果没有设置 align,则会取父层级的 align。例如:

{
    align: right,
    rich: {
        a: {
            // 没有设置 `align`,则 `align` 为 right
        }
    }
}

series-graph.edgeLabel. verticalAlign 试一试

string

文字垂直对齐方式,默认自动。

可选:

  • 'top'
  • 'middle'
  • 'bottom'

rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。例如:

{
    verticalAlign: bottom,
    rich: {
        a: {
            // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
        }
    }
}

series-graph.edgeLabel. lineHeight 试一试

number

行高。

rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`,则 `lineHeight` 为 56
        }
    }
}

series-graph.edgeLabel. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

可以使用颜色值,例如:'#123234', 'red', 'rgba(0,23,11,0.3)'

也可以直接使用图片,例如:

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL,
    // 或者图片的 dataURI,
    // 或者 HTMLImageElement 对象,
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候,可以使用 widthheight 指定高宽,也可以不指定自适应。

series-graph.edgeLabel. borderColor 试一试

Color

文字块边框颜色。

series-graph.edgeLabel. borderWidth 试一试

number

文字块边框宽度。

series-graph.edgeLabel. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选:

  • 'solid'
  • 'dashed'
  • 'dotted'

v5.0.0 开始,也可以是 number 或者 number 数组,用以指定线条的 dash array,配合 borderDashOffset 可实现更灵活的虚线效果。

例如:

{

borderType: [5, 10],

borderDashOffset: 5
}

series-graph.edgeLabel. borderDashOffset 试一试

number

v5.0.0 开始支持

用于设置虚线的偏移量,可搭配 borderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset

series-graph.edgeLabel. borderRadius 试一试

numberArray

文字块的圆角。

series-graph.edgeLabel. padding 试一试

numberArray

文字块的内边距。例如:

  • padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
  • padding: 4:表示 padding: [4, 4, 4, 4]
  • padding: [3, 4]:表示 padding: [3, 4, 3, 4]

注意,文字块的 widthheight 指定的是内容高宽,不包含 padding

series-graph.edgeLabel. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

series-graph.edgeLabel. shadowBlur 试一试

number

文字块的背景阴影长度。

series-graph.edgeLabel. shadowOffsetX 试一试

number

文字块的背景阴影 X 偏移。

series-graph.edgeLabel. shadowOffsetY 试一试

number

文字块的背景阴影 Y 偏移。

series-graph.edgeLabel. width 试一试

number

文本显示宽度。

series-graph.edgeLabel. height 试一试

number

文本显示高度。

series-graph.edgeLabel. textBorderColor 试一试

Color

文字本身的描边颜色。

series-graph.edgeLabel. textBorderWidth 试一试

number

文字本身的描边宽度。

series-graph.edgeLabel. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选:

  • 'solid'
  • 'dashed'
  • 'dotted'

v5.0.0 开始,也可以是 number 或者 number 数组,用以指定线条的 dash array,配合 textBorderDashOffset 可实现更灵活的虚线效果。

例如:

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}

series-graph.edgeLabel. textBorderDashOffset 试一试

number

v5.0.0 开始支持

用于设置虚线的偏移量,可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。

更多详情可以参考 MDN lineDashOffset

series-graph.edgeLabel. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

series-graph.edgeLabel. textShadowBlur 试一试

number

文字本身的阴影长度。

series-graph.edgeLabel. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

series-graph.edgeLabel. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

series-graph.edgeLabel. overflow = 'none' 试一试

string

文字超出宽度是否截断或者换行。配置width时有效

  • 'truncate' 截断,并在末尾显示ellipsis配置的文本,默认为...
  • 'break' 换行
  • 'breakAll' 换行,跟'break'不同的是,在英语等拉丁文中,'breakAll'还会强制单词内换行

series-graph.edgeLabel. ellipsis = '...'

string

overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本。

series-graph.edgeLabel. rich

Object

rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。

例如:

label: {
    // 在文本中,可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号:
    // `{styleName|text content text content}` 标记样式名。
    // 注意,换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

详情参见教程:富文本标签

所有属性
{ <style_name> }

series-graph. labelLayout

ObjectFunction

v5.0.0 开始支持

标签的统一布局配置。

该配置项是在每个系列默认的标签布局基础上,统一调整标签的(x, y)位置,标签对齐等属性以实现想要的标签布局效果。

该配置项也可以是一个有如下参数的回调函数

// 标签对应数据的 dataIndex
dataIndex: number
// 标签对应的数据类型,只在关系图中会有 node 和 edge 数据类型的区分
dataType?: string
// 标签对应的系列的 index
seriesIndex: number
// 标签显示的文本
text: string
// 默认的标签的包围盒,由系列默认的标签布局决定
labelRect: {x: number, y: number, width: number, height: number}
// 默认的标签水平对齐
align: 'left' | 'center' | 'right'
// 默认的标签垂直对齐
verticalAlign: 'top' | 'middle' | 'bottom'
// 标签所对应的数据图形的包围盒,可用于定位标签位置
rect: {x: number, y: number, width: number, height: number}
// 默认引导线的位置,目前只有饼图(pie)和漏斗图(funnel)有默认标签位置
// 如果没有该值则为 null
labelLinePoints?: number[][]

示例:

将标签显示在图形右侧 10px 的位置,并且垂直居中:

labelLayout(params) {
    return {
        x: params.rect.x + 10,
        y: params.rect.y + params.rect.height / 2,
        verticalAlign: 'middle',
        align: 'left'
    }
}

根据图形的包围盒尺寸决定文本尺寸


labelLayout(params) {
    return {
        fontSize: Math.max(params.rect.width / 10, 5)
    };
}

series-graph.labelLayout. hideOverlap

boolean

是否隐藏重叠的标签。

下面示例演示了在关系图中开启该配置后,在缩放时可以实现自动的标签隐藏。

series-graph.labelLayout. moveOverlap

string

在标签重叠的时候是否挪动标签位置以防止重叠。

目前支持配置为:

  • 'shiftX' 水平方向依次位移,在水平方向对齐时使用
  • 'shiftY' 垂直方向依次位移,在垂直方向对齐时使用

下面是标签右对齐并配置垂直方向依次位移以防止重叠的示例。

series-graph.labelLayout. x

numberstring

标签的 x 位置。支持绝对的像素值或者'20%'这样的相对值。

series-graph.labelLayout. y

numberstring

标签的 y 位置。支持绝对的像素值或者'20%'这样的相对值。

series-graph.labelLayout. dx

number

标签在 x 方向上的像素偏移。可以和x一起使用。

series-graph.labelLayout. dy

number

标签在 y 方向上的像素偏移。可以和y一起使用

series-graph.labelLayout. rotate

number

标签旋转角度。

series-graph.labelLayout. width

number

标签显示的宽度。可以配合overflow使用控制标签显示在固定宽度内

series-graph.labelLayout. height

number

标签显示的高度。

series-graph.labelLayout. align

string

标签水平对齐方式。可以设置'left', 'center', 'right'

series-graph.labelLayout. verticalAlign

string

标签垂直对齐方式。可以设置'top', 'middle', 'bottom'

series-graph.labelLayout. fontSize

number

The text size of the label.

series-graph.labelLayout. draggable

boolean

标签是否可以允许用户通过拖拽二次调整位置。

series-graph.labelLayout. labelLinePoints

Array

标签引导线三个点的位置。格式为:

[[x, y], [x, y], [x, y]]

在饼图中常用来微调已经计算好的引导线,其它情况一般不建议设置。

series-graph. emphasis

Object

高亮状态的图形样式。

series-graph.emphasis. disabled 试一试

boolean

v5.3.0 开始支持

是否关闭高亮状态。

关闭高亮状态可以在鼠标移到图形上,tooltip 触发,或者图例联动的时候不再触发高亮效果。在图形非常多的时候可以关闭以提升交互流畅性。

series-graph.emphasis. scale = true 试一试

booleannumber

v5.0.0 开始支持

是否开启高亮后节点的放大效果。从 5.3.2 版本开始支持 number,用以设置高亮放大倍数,默认放大 1.1 倍。

series-graph.emphasis. focus = 'none'

string

v5.0.0 开始支持

在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:

  • 'none' 不淡出其它图形,默认使用该配置。
  • 'self' 只聚焦(不淡出)当前高亮的数据的图形。
  • 'series' 聚焦当前高亮的数据所在的系列的所有图形。
  • 'adjacency' 聚焦关系图中的邻接点和边的图形。

示例:

下面代码配置了柱状图在高亮一个图形的时候,淡出当前直角坐标系所有其它的系列。

emphasis: {
    focus: 'series',
    blurScope: 'coordinateSystem'
}

series-graph.emphasis. blurScope = 'coordinateSystem'

string

v5.0.0 开始支持

在开启focus的时候,可以通过blurScope配置淡出的范围。支持如下配置

  • 'coordinateSystem' 淡出范围为坐标系,默认使用该配置。
  • 'series' 淡出范围为系列。
  • 'global' 淡出范围为全局。

series-graph.emphasis. itemStyle

Object
所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

series-graph.emphasis. lineStyle

Object
所有属性
{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , curveness }

series-graph.emphasis. label

Object
所有属性
{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-graph.emphasis. edgeLabel

Object
所有属性
{ show , position , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-graph. blur

Object

v5.0.0 开始支持

淡出状态的图形样式。开启 emphasis.focus 后有效。

series-graph.blur. itemStyle

Object
所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

series-graph.blur. lineStyle

Object
所有属性
{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , curveness }

series-graph.blur. label

Object
所有属性
{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-graph.blur. edgeLabel

Object
所有属性
{ show , position , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-graph. select

Object

v5.0.0 开始支持

选中状态的图形样式。开启 selectedMode 后有效。

series-graph.select. disabled 试一试

boolean

v5.3.0 开始支持

是否可以被选中。在开启 selectedMode 的时候有效,可以用于关闭部分数据。

series-graph.select. itemStyle

Object
所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

series-graph.select. lineStyle

Object
所有属性
{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , curveness }

series-graph.select. label

Object
所有属性
{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-graph.select. edgeLabel

Object
所有属性
{ show , position , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-graph. selectedMode 试一试

booleanstring

v5.0.0 开始支持

选中模式的配置,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single''multiple''series' 分别表示单选,多选以及选择整个系列。

从 v5.3.0 开始支持 'series'

series-graph. categories

Array

节点分类的类目,可选。

如果节点有分类的话可以通过 data[i].category 指定每个节点的类目,类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。

series-graph.categories. name

string

类目名称,用于和 legend 对应以及格式化 tooltip 的内容。

series-graph.categories. symbol 试一试

string

该类目节点标记的图形。

ECharts 提供的标记类型包括

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI

URL 为图片链接例如:

'image://http://example.website/a/b.png'

URL 为 dataURI 例如:

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如:

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

series-graph.categories. symbolSize 试一试

numberArray

该类目节点标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10

series-graph.categories. symbolRotate 试一试

number

该类目节点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 markLine 中当 symbol'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series-graph.categories. symbolKeepAspect 试一试

boolean

如果 symbolpath:// 的形式,是否在缩放时保持该图形的长宽比。

series-graph.categories. symbolOffset = [0, 0] 试一试

Array

该类目节点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如 [0, '-50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series-graph.categories. itemStyle

Object

该类目节点的样式。

所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

series-graph.categories. label

Object

该类目节点标签的样式。

所有属性
{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , rich }

series-graph.categories. emphasis

Object

该类目节点的高亮状态。

所有属性
{ disabled , itemStyle , label }

series-graph.categories. blur

Object

v5.0.0 开始支持

该类目节点的淡出状态。

所有属性
{ itemStyle , label }

series-graph.categories. select

Object

v5.0.0 开始支持

该类目节点的选中状态。

所有属性
{ disabled , itemStyle , label }

series-graph. autoCurveness

booleannumberArray

针对节点之间存在多边的情况,自动计算各边曲率,默认不开启。

设置为 true 时,开启自动曲率计算,默认边曲率数组长度为 20,如果两点间边数大于 20,请使用 numberArray 设置边曲率数组。

设置为 number 时,表示两点间边曲率数组的长度,由内部算法给出计算结果。

设置为 Array 时,表示直接指定边曲率数组,多边曲率会从数组中直接按顺序选取。

注意: 如果设置 lineStyle.curveness 则此属性失效。

series-graph. data

Array

关系图的节点数据列表。

data: [{
    name: '1',
    x: 10,
    y: 10,
    value: 10
}, {
    name: '2',
    x: 100,
    y: 100,
    value: 20,
    symbolSize: 20,
    itemStyle: {
        color: 'red'
    }
}]

注意: 节点的name不能重复。

所有属性
{ name , x , y , fixed , value , category , symbol , symbolSize , symbolRotate , symbolKeepAspect , symbolOffset , itemStyle , label , emphasis , blur , select , tooltip }

series-graph. nodes

Array

别名,同 data

series-graph. edges

Array

别名,同 links

series-graph. markPoint

Object

图表标注。

所有属性
{ symbol , symbolSize , symbolRotate , symbolKeepAspect , symbolOffset , silent , label , itemStyle , emphasis , blur , data , animation , animationThreshold , animationDuration , animationEasing , animationDelay , animationDurationUpdate , animationEasingUpdate , animationDelayUpdate }

series-graph. markLine

Object

图表标线。

所有属性
{ silent , symbol , symbolSize , symbolOffset , precision , label , lineStyle , emphasis , blur , data , animation , animationThreshold , animationDuration , animationEasing , animationDelay , animationDurationUpdate , animationEasingUpdate , animationDelayUpdate }

series-graph. markArea

Object

图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

所有属性
{ silent , label , itemStyle , emphasis , blur , data , animation , animationThreshold , animationDuration , animationEasing , animationDelay , animationDurationUpdate , animationEasingUpdate , animationDelayUpdate }

series-graph. zlevel

number

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

series-graph. z = 2

number

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

series-graph. left = 'center' 试一试

stringnumber

组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'

如果 left 的值为 'left', 'center', 'right',组件会根据相应的位置自动对齐。

series-graph. top = 'middle' 试一试

stringnumber

组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'

如果 top 的值为 'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

series-graph. right = 'auto' 试一试

stringnumber

组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series-graph. bottom = 'auto' 试一试

stringnumber

组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

series-graph. width = 自适应 试一试

stringnumber

组件的宽度。

series-graph. height = 自适应 试一试

stringnumber

组件的高度。

series-graph. silent 试一试

boolean

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series-graph. animation = true 试一试

boolean

是否开启动画。

series-graph. animationThreshold = 2000

number

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series-graph. animationDuration = 1000 试一试

numberFunction

初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:

animationDuration: function (idx) {
    // 越往后的数据时长越大
    return idx * 100;
}

series-graph. animationEasing = 'cubicOut' 试一试

string

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series-graph. animationDelay

numberFunction

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelay: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series-graph. animationDurationUpdate = 300 试一试

numberFunction

数据更新动画的时长。

支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:

animationDurationUpdate: function (idx) {
    // 越往后的数据时长越大
    return idx * 100;
}

series-graph. animationEasingUpdate = 'cubicInOut' 试一试

string

数据更新动画的缓动效果。

series-graph. animationDelayUpdate

numberFunction

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series-graph. tooltip

Object

本系列特定的 tooltip 设定。

所有属性
{ position , formatter , valueFormatter , backgroundColor , borderColor , borderWidth , padding , textStyle , extraCssText }
预览