echarts属性之timeline

一行注释

已于 2024-11-02 17:08:47 修改

阅读量924

点赞数 16

分类专栏： echarts配置项文章标签： echarts 前端 python javascript 信息可视化

于 2024-10-29 16:41:49 首次发布

本文链接：https://blog.csdn.net/qq_37818095/article/details/143334341

版权

echarts配置项专栏收录该内容

49 篇文章

订阅专栏

timeline

timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。

示例效果如下：

timeline 和其他场景有些不同，它需要操作『多个option』。我们把传入 setOption 第一个参数的东西，称为 ECOption，然后称传统的 ECharts 单个 option 为 ECUnitOption。

当 timeline 和 media query 没有被设置时，一个 ECUnitOption 就是一个 ECOption。
当 timeline 或 media query 被使用设置时，一个 ECOption 由几个 ECUnitOption 组成。
- ECOption 的各个根属性，形成一个 ECUnitOption，叫做 baseOption，它代表了各种默认设置。
- options 数组每项，形成一个 ECUnitOption，我们为了方便也叫做 switchableOption，它代表了每个时间粒度对应的 option。
baseOption 和一个 switchableOption 会用来计算最终的 finalOption，图表就是根据这个最终结果绘制的。

例如：

// 如下，baseOption 是一个 『原子option』，options 数组
// 中的每一项也是一个 『原子option』。
// 每个『原子option』中就是本文档中描述的各种配置项。
myChart.setOption({
    // `baseOption` 的属性.
    timeline: {
        ...,
        // `timeline.data` 中的每一项，对应于 `options`
        // 数组中的每个 `option`
        data: ['2002-01-01', '2003-01-01', '2004-01-01']
    },
    grid: { ... },
    xAxis: [ ... ],
    yAxis: [ ... ],
    series: [{
        // 系列一的一些其他配置
        type: 'bar',
        ...
    }, {
        // 系列二的一些其他配置
        type: 'line',
        ...
    }, {
        // 系列三的一些其他配置
        type: 'pie',
        ...
    }],
    // `switchableOption`s:
    options: [{
        // 这是'2002-01-01' 对应的 option
        title: {
            text: '2002年统计值'
        },
        series: [
            { data: [] }, // 系列一的数据
            { data: [] }, // 系列二的数据
            { data: [] }  // 系列三的数据
        ]
    }, {
        // 这是'2003-01-01' 对应的 option
        title: {
            text: '2003年统计值'
        },
        series: [
            { data: [] },
            { data: [] },
            { data: [] }
        ]
    }, {
        // 这是'2004-01-01' 对应的 option
        title: {
            text: '2004年统计值'
        },
        series: [
            { data: [] },
            { data: [] },
            { data: [] }
        ]
    }]
});

finalOption 是怎么计算出来的?

初始化的时候，对应于当前时间的那个 switchableOption 会被合并（merge）到 baseOption，形成 finalOption。而每当时间变化时，对应于新时间的 switchableOption 会被合并（merge）到finalOption。

有两种合并（merge）策略：

默认使用 NORMAL_MERGE。
如果 timeline.replaceMerge 被指定了，则使用 REPLACE_MERGE。如果要知道 REPLACE_MERGE 更多信息，可以参见 setOption 中 REPLACE_MERGE 一节。。

兼容 ECharts4

如下这种设置方式，也支持：

option = {
    baseOption: {
        timeline: {},
        series: [],
        // ... other properties of baseOption.
    },
    options: []
};

所有属性

timeline. show = true 试一试

boolean

是否显示 timeline 组件。如果设置为false，不会显示，但是功能还存在。

timeline. type = 'slider'

string

这个属性目前只支持为 slider，不需要更改。

timeline. axisType = 'time'

string

轴的类型。可选值为：

'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

timeline. currentIndex 试一试

number

表示当前选中项是哪项。比如，currentIndex 为 0 时，表示当前选中项为 timeline.data[0]（即使用 options[0]）。

timeline. autoPlay 试一试

boolean

表示是否自动播放。

timeline. rewind 试一试

boolean

表示是否反向播放。

timeline. loop = true 试一试

boolean

表示是否循环播放。

timeline. playInterval = 2000 试一试

number

表示播放的速度（跳动的间隔），单位毫秒（ms）。

timeline. realtime = true 试一试

boolean

拖动圆点的时候，是否实时更新视图。

timeline. replaceMerge = undefined

Arraystring

有两种合并（merge）策略：

默认使用 NORMAL_MERGE。
如果 timeline.replaceMerge 被指定了，则使用 REPLACE_MERGE。如果要知道 REPLACE_MERGE 更多信息，可以参见 setOption 中 REPLACE_MERGE 一节。。

replaceMerge 的值可以是一个组件的 mainType，例如 replaceMerge: 'xAxis'。也可以是 mainType 数组，例如 replaceMerge: ['xAxis', 'series']。

常见需要使用 replaceMerge 的地方是，如果需要下一个时间刻度的 series 完全替换上一个时间刻度的 series 而不进行任何 merge ，可以设置 replaceMerge: 'series'，并且两个时间刻度的 series id 不相同或者没有 id 。

参见这个示例。

timeline. controlPosition = 'left' 试一试

string

表示『播放』按钮的位置。可选值：'left'、'right'。

timeline. zlevel

number

所有图形的 zlevel 值。

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

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

timeline. z = 2

number

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

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

timeline. left = 'auto' 试一试

stringnumber

timeline组件离容器左侧的距离。

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

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

timeline. top = 'auto' 试一试

stringnumber

timeline组件离容器上侧的距离。

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

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

timeline. right = 'auto' 试一试

stringnumber

timeline组件离容器右侧的距离。

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

默认自适应。

timeline. bottom = 'auto' 试一试

stringnumber

timeline组件离容器下侧的距离。

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

默认自适应。

timeline. padding = 5 试一试

numberArray

timeline内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

使用示例：

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

timeline. orient = 'horizontal' 试一试

string

摆放方式，可选值有：

'vertical'：竖直放置。
'horizontal'：水平放置。

timeline. inverse 试一试

boolean

是否反向放置 timeline，反向则首位颠倒过来。

timeline. symbol = 'emptyCircle' 试一试

string

timeline标记的图形。

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/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 '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'

timeline. symbolSize = 10 试一试

numberArray

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

timeline. symbolRotate 试一试

number

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

timeline. symbolKeepAspect 试一试

boolean

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

timeline. symbolOffset = [0, 0] 试一试

Array

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

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

timeline. lineStyle

Object

timeline.lineStyle. show = true 试一试

boolean

是否显示轴线。可以设置为 false 不显示轴线，则可以做出不同的样式效果。

timeline.lineStyle. color = '#DAE1F5' 试一试

Color

timeline 线的颜色。

timeline.lineStyle. width = 2 试一试

number

timeline 线宽。

timeline.lineStyle. type = 'solid' 试一试

stringnumberArray

线的类型。

可选：

'solid'
'dashed'
'dotted'

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

例如：

{

type: [5, 10],

dashOffset: 5
}

timeline.lineStyle. dashOffset 试一试

number

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

更多详情可以参考 MDN lineDashOffset。

timeline.lineStyle. cap = 'butt' 试一试

string

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

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

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

timeline.lineStyle. join = 'bevel' 试一试

string

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

可以是：

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

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

timeline.lineStyle. miterLimit = 10 试一试

number

用于设置斜接面限制比例。只有当 join 为 miter 时， miterLimit 才有效。

默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。

更多详情可以参考 MDN miterLimit。

timeline.lineStyle. shadowBlur 试一试

number

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

示例：

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

timeline.lineStyle. shadowColor 试一试

Color

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

timeline.lineStyle. shadowOffsetX 试一试

number

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

timeline.lineStyle. shadowOffsetY 试一试

number

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

timeline.lineStyle. opacity = 1 试一试

number

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

timeline. label

Object

轴的文本标签。emphasis 是文本高亮的样式，比如鼠标悬浮或者图例联动高亮的时候会使用 emphasis 作为文本的样式。

timeline.label. position = 'auto' 试一试

stringnumber

可选的配置方式：

'auto'：完全自动决定。
'left'：贴左边界放置。当 timline.orient 为 'vertical' 时有效。
'right'：当 timline.orient 为 'vertical' 时有效。贴右边界放置。
'top'：贴上边界放置。当 timline.orient 为 'horizontal' 时有效。
'bottom'：贴下边界放置。当 timline.orient 为 'horizontal' 时有效。
number：指定某个数值时，表示 label 和轴的距离。为 0 时则和坐标轴重合，可以为正负值，决定 label 在坐标轴的哪一边。

timeline.label. show = true 试一试

boolean

是否显示 label。

timeline.label. interval = 'auto'

stringnumber

label 的间隔。当指定为数值时，例如指定为 2，则每隔两个显示一个 label。

timeline.label. rotate

prefix

label 的旋转角度。正值表示逆时针旋转。

timeline.label. formatter

stringFunction

刻度标签的内容格式器，支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    return value + 'kg';
}

对于时间轴（type: 'time'），formatter 的字符串模板支持多种形式：

字符串模板：简单快速实现常用日期时间模板，string 类型
回调函数：自定义 formatter，可以用来实现复杂高级的格式，Function 类型
分级模板：为不同时间粒度的标签使用不同的 formatter，object 类型

下面我们分别介绍这三种形式。

字符串模板

使用字符串模板是一种方便实现常用日期时间格式化方式的形式。如果字符串模板可以实现你的效果，那我们优先推荐使用此方式；如果无法实现，再考虑其他两种更复杂的方式。支持的模板如下：

分类	模板	取值（英文）	取值（中文）
Year	{yyyy}	e.g., 2020, 2021, ...	例：2020, 2021, ...
	{yy}	00-99	00-99
Quarter	{Q}	1, 2, 3, 4	1, 2, 3, 4
Month	{MMMM}	e.g., January, February, ...	一月、二月、……
	{MMM}	e.g., Jan, Feb, ...	1月、2月、……
	{MM}	01-12	01-12
	{M}	1-12	1-12
Day of Month	{dd}	01-31	01-31
	{d}	1-31	1-31
Day of Week	{eeee}	Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday	星期日、星期一、星期二、星期三、星期四、星期五、星期六
	{ee}	Sun, Mon, Tues, Wed, Thu, Fri, Sat	日、一、二、三、四、五、六
	{e}	1-54	1-54
Hour	{HH}	00-23	00-23
	{H}	0-23	0-23
	{hh}	01-12	01-12
	{h}	1-12	1-12
Minute	{mm}	00-59	00-59
	{m}	0-59	0-59
Second	{ss}	00-59	00-59
	{s}	0-59	0-59
Millisecond	{SSS}	000-999	000-999
	{S}	0-999	0-999

示例:

formatter: '{yyyy}-{MM}-{dd}' // 得到的 label 形如：'2020-12-02'
formatter: '{d}日' // 得到的 label 形如：'2日'

回调函数

回调函数可以根据刻度值返回不同的格式，如果有复杂的时间格式化需求，也可以引用第三方的日期时间相关的库（如 Moment.js、date-fns 等），返回显示的文本。

示例：

// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    // 格式化成月/日，只在第一个刻度显示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getFullYear());
    }
    return texts.join('/');
}

分级模板

有时候，我们希望对不同的时间粒度采用不同的格式化策略。例如，在季度图表中，我们可能希望对每个月的第一天显示月份，而其他日期显示日期。我们可以使用以下方式实现该效果：

示例：

formatter: {
    month: '{MMMM}', // 一月、二月、……
    day: '{d}日' // 1日、2日、……
}

支持的分级以及各自默认的取值为：

{
    year: '{yyyy}',
    month: '{MMM}',
    day: '{d}',
    hour: '{HH}:{mm}',
    minute: '{HH}:{mm}',
    second: '{HH}:{mm}:{ss}',
    millisecond: '{hh}:{mm}:{ss} {SSS}',
    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
}

以 day 为例，当一个刻度点的值的小时、分钟、秒、毫秒都为 0 时，将采用 day 的分级值作为模板。none 表示当其他规则都不适用时采用的模板，也就是带有毫秒值的刻度点的模板。

富文本

以上这三种形式的 formatter 都支持富文本，所以可以做成一些复杂的效果。

示例：

xAxis: {
    type: 'time',
    axisLabel: {
        formatter: {
            // 一年的第一个月显示年度信息和月份信息
            year: '{yearStyle|{yyyy}}\n{monthStyle|{MMM}}',
            month: '{monthStyle|{MMM}}'
        },
        rich: {
            yearStyle: {
                // 让年度信息更醒目
                color: '#000',
                fontWeight: 'bold'
            },
            monthStyle: {
                color: '#999'
            }
        }
    }
},

使用回调函数形式实现上面例子同样的效果：

示例：

xAxis: {
    type: 'time',
    axisLabel: {
        formatter: function (value) {
            const date = new Date(value);
            const yearStart = new Date(value);
            yearStart.setMonth(0);
            yearStart.setDate(1);
            yearStart.setHours(0);
            yearStart.setMinutes(0);
            yearStart.setSeconds(0);
            yearStart.setMilliseconds(0);
            // 判断一个刻度值知否为一年的开始
            if (date.getTime() === yearStart.getTime()) {
                return '{year|' + date.getFullYear() + '}\n'
                    + '{month|' + (date.getMonth() + 1) + '月}';
            }
            else {
                return '{month|' + (date.getMonth() + 1) + '月}'
            }
        },
        rich: {
            year: {
                color: '#000',
                fontWeight: 'bold'
            },
            month: {
                color: '#999'
            }
        }
    }
},

timeline.label. color = '#A4B1D7' 试一试

Color

timeline.lable文字的颜色。

timeline.label. fontStyle = 'normal' 试一试

string

timeline.lable文字字体的风格。

可选：

'normal'
'italic'
'oblique'

timeline.label. fontWeight = 'normal' 试一试

stringnumber

timeline.lable文字字体的粗细。

可选：

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

timeline.label. fontFamily = 'sans-serif' 试一试

string

timeline.lable文字的字体系列。

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

timeline.label. fontSize = 12 试一试

number

timeline.lable文字的字体大小。

timeline.label. align 试一试

string

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

可选：

'left'
'center'
'right'

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

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

timeline.label. verticalAlign 试一试

string

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

可选：

'top'
'middle'
'bottom'

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

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

timeline.label. lineHeight 试一试

number

行高。

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

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

timeline.label. backgroundColor = 'transparent' 试一试

stringObject

文字块背景色。

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

也可以直接使用图片，例如：

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

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

timeline.label. borderColor 试一试

Color

文字块边框颜色。

timeline.label. borderWidth 试一试

number

文字块边框宽度。

timeline.label. borderType = 'solid' 试一试

stringnumberArray

文字块边框描边类型。

可选：

'solid'
'dashed'
'dotted'

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

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}

timeline.label. borderDashOffset 试一试

number

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

更多详情可以参考 MDN lineDashOffset。

timeline.label. borderRadius 试一试

numberArray

文字块的圆角。

timeline.label. padding 试一试

numberArray

文字块的内边距。例如：

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

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

timeline.label. shadowColor = 'transparent' 试一试

Color

文字块的背景阴影颜色。

timeline.label. shadowBlur 试一试

number

文字块的背景阴影长度。

timeline.label. shadowOffsetX 试一试

number

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

timeline.label. shadowOffsetY 试一试

number

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

timeline.label. width 试一试

number

文本显示宽度。

timeline.label. height 试一试

number

文本显示高度。

timeline.label. textBorderColor 试一试

Color

文字本身的描边颜色。

timeline.label. textBorderWidth 试一试

number

文字本身的描边宽度。

timeline.label. textBorderType = 'solid' 试一试

stringnumberArray

文字本身的描边类型。

可选：

'solid'
'dashed'
'dotted'

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

例如：

{

textBorderType: [5, 10],

textBorderDashOffset: 5
}

timeline.label. textBorderDashOffset 试一试

number

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

更多详情可以参考 MDN lineDashOffset。

timeline.label. textShadowColor = 'transparent' 试一试

Color

文字本身的阴影颜色。

timeline.label. textShadowBlur 试一试

number

文字本身的阴影长度。

timeline.label. textShadowOffsetX 试一试

number

文字本身的阴影 X 偏移。

timeline.label. textShadowOffsetY 试一试

number

文字本身的阴影 Y 偏移。

timeline.label. overflow = 'none' 试一试

string

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

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

timeline.label. ellipsis = '...'

string

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

timeline.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> }

timeline. itemStyle

Object

timeline 图形样式。

timeline.itemStyle. color = '#A4B1D7' 试一试

Color

timeline 图形的颜色。

timeline.itemStyle. borderColor = '#000' 试一试

Color

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

timeline.itemStyle. borderWidth = 1 试一试

number

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

timeline.itemStyle. borderType = 'solid' 试一试

stringnumberArray

timeline 描边类型。

可选：

'solid'
'dashed'
'dotted'

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

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}

timeline.itemStyle. borderDashOffset 试一试

number

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

更多详情可以参考 MDN lineDashOffset。

timeline.itemStyle. borderCap = 'butt' 试一试

string

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

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

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

timeline.itemStyle. borderJoin = 'bevel' 试一试

string

可以是：

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

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

timeline.itemStyle. borderMiterLimit = 10 试一试

number

用于设置斜接面限制比例。只有当 borderJoin 为 miter 时， borderMiterLimit 才有效。

默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。

更多详情可以参考 MDN miterLimit。

timeline.itemStyle. shadowBlur 试一试

number

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

示例：

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

timeline.itemStyle. shadowColor 试一试

Color

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

timeline.itemStyle. shadowOffsetX 试一试

number

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

timeline.itemStyle. shadowOffsetY 试一试

number

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

timeline.itemStyle. opacity = 1 试一试

number

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

timeline. checkpointStyle

Object

『当前项』（checkpoint）的图形样式。

timeline.checkpointStyle. symbol = 'circle' 试一试

string

timeline.checkpointStyle 标记的图形。

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/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

例如：

'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'

timeline.checkpointStyle. symbolSize = 13 试一试

numberArray

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

timeline.checkpointStyle. symbolRotate 试一试

number

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

timeline.checkpointStyle. symbolKeepAspect 试一试

boolean

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

timeline.checkpointStyle. symbolOffset = [0, 0] 试一试

Array

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

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

timeline.checkpointStyle. color = '#316bf3' 试一试

Color

图形的颜色。

timeline.checkpointStyle. borderColor = '#fff' 试一试

Color

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

timeline.checkpointStyle. borderWidth = 2 试一试

number

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

timeline.checkpointStyle. borderType = 'solid' 试一试

stringnumberArray

描边类型。

可选：

'solid'
'dashed'
'dotted'

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

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}

timeline.checkpointStyle. borderDashOffset 试一试

number

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

更多详情可以参考 MDN lineDashOffset。

timeline.checkpointStyle. borderCap = 'butt' 试一试

string

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

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

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

timeline.checkpointStyle. borderJoin = 'bevel' 试一试

string

可以是：

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

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

timeline.checkpointStyle. borderMiterLimit = 10 试一试

number

用于设置斜接面限制比例。只有当 borderJoin 为 miter 时， borderMiterLimit 才有效。

默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。

更多详情可以参考 MDN miterLimit。

timeline.checkpointStyle. shadowBlur = 2 试一试

number

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

示例：

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

timeline.checkpointStyle. shadowColor = 'rgba(0, 0, 0, 0.3)' 试一试

Color

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

timeline.checkpointStyle. shadowOffsetX = 1 试一试

number

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

timeline.checkpointStyle. shadowOffsetY = 1 试一试

number

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

timeline.checkpointStyle. opacity = 1 试一试

number

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

timeline.checkpointStyle. animation = true 试一试

boolean

timeline组件中『当前项』（checkpoint）在 timeline 播放切换中的移动，是否有动画。

timeline.checkpointStyle. animationDuration = 300 试一试

number

timeline组件中『当前项』（checkpoint）的动画时长。

timeline.checkpointStyle. animationEasing = 'quinticInOut' 试一试

string

timeline组件中『当前项』（checkpoint）的动画的缓动效果。不同的缓动效果可以参考缓动示例。

timeline. controlStyle

Object

『控制按钮』的样式。『控制按钮』包括：『播放按钮』、『前进按钮』、『后退按钮』。

timeline.controlStyle. show = true 试一试

boolean

是否显示『控制按钮』。设置为 false 则全不显示。

timeline.controlStyle. showPlayBtn = true 试一试

boolean

是否显示『播放按钮』。

timeline.controlStyle. showPrevBtn = true 试一试

boolean

是否显示『后退按钮』。

timeline.controlStyle. showNextBtn = true 试一试

boolean

是否显示『前进按钮』。

timeline.controlStyle. itemSize = 24 试一试

number

『控制按钮』的尺寸，单位为像素（px）。

timeline.controlStyle. itemGap = 12 试一试

number

『控制按钮』的间隔，单位为像素（px）。

timeline.controlStyle. position = 'left' 试一试

string

『控制按钮』的位置。

当 timeline.orient 为 'horizontal'时，'left'、'right'有效。
当 timeline.orient 为 'vertical'时，'top'、'bottom'有效。

timeline.controlStyle. playIcon 试一试

string

『播放按钮』的『可播放状态』的图形。

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

URL 为图片链接例如：

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

URL 为 dataURI 例如：

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

例如：

'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'

timeline.controlStyle. stopIcon 试一试

string

『播放按钮』的『可停止状态』的图形。

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

URL 为图片链接例如：

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

URL 为 dataURI 例如：

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

例如：

'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'

timeline.controlStyle. prevIcon 试一试

string

『后退按钮』的图形

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

URL 为图片链接例如：

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

URL 为 dataURI 例如：

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

例如：

'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'

timeline.controlStyle. nextIcon 试一试

string

『前进按钮』的图形

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

URL 为图片链接例如：

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

URL 为 dataURI 例如：

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

例如：

'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'

timeline.controlStyle. color = '#A4B1D7' 试一试

Color

图形的颜色。

timeline.controlStyle. borderColor = '#A4B1D7' 试一试

Color

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

timeline.controlStyle. borderWidth = 1 试一试

number

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

timeline.controlStyle. borderType = 'solid' 试一试

stringnumberArray

描边类型。

可选：

'solid'
'dashed'
'dotted'

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

例如：

{

borderType: [5, 10],

borderDashOffset: 5
}

timeline.controlStyle. borderDashOffset 试一试

number

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

更多详情可以参考 MDN lineDashOffset。

timeline.controlStyle. borderCap = 'butt' 试一试

string

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

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

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

timeline.controlStyle. borderJoin = 'bevel' 试一试

string

可以是：

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

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

timeline.controlStyle. borderMiterLimit = 10 试一试

number

用于设置斜接面限制比例。只有当 borderJoin 为 miter 时， borderMiterLimit 才有效。

默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。

更多详情可以参考 MDN miterLimit。

timeline.controlStyle. shadowBlur 试一试

number

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

示例：

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

timeline.controlStyle. shadowColor 试一试

Color

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

timeline.controlStyle. shadowOffsetX 试一试

number

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

timeline.controlStyle. shadowOffsetY 试一试

number

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

timeline.controlStyle. opacity = 1 试一试

number

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

timeline. progress

Object

进度条中的线条，拐点，标签的样式。

timeline.progress. lineStyle

Object

所有属性

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

timeline.progress. itemStyle

Object

所有属性

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

timeline.progress. label

Object

所有属性

{ show , interval , rotate , 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 }

timeline. emphasis

Object

timeline.emphasis. label

Object

所有属性

timeline.emphasis. itemStyle

Object

所有属性

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

如下例：

[
    '2002-01-01',
    '2003-01-01',
    '2004-01-01',
    {
        value: '2005-01-01',
        tooltip: {          // 让鼠标悬浮到此项时能够显示 `tooltip`。
            formatter: '{b} xxxx'
        },
        symbol: 'diamond',  // 此项的图形的特别设置。
        symbolSize: 16      // 此项的图形大小的特别设置。
    },
    '2006-01-01',
    '2007-01-01',
    '2008-01-01',
    '2009-01-01',
    '2010-01-01',
    {
        value: '2011-01-01',
        tooltip: {          // 让鼠标悬浮到此项时能够显示 `tooltip`。
            formatter: function (params) {
                return params.name + 'xxxx';
            }
        },
        symbol: 'diamond',
        symbolSize: 18
    },
]