echarts配置项手册整理

title: {...} ,

标题组件，包含主标题和副标题

legend: {...} ,

图例组件

展现不同系列的标记，颜色和名字

grid: {...} ,

直角坐标系内绘制网格

xAxis: {...} ,

直角坐标系 grid 中的 x 轴

yAxis: {...} ,

直角坐标系 grid 中的 y 轴

tooltip: {...} ,

提示框组件

axisPointer: {...} ,

坐标轴指示器的全局公用设置

toolbox: {...} ,

工具栏。

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

geo: {...} ,

地理坐标系组件

series: [{...}] ,

color ... ,

调色盘颜色

backgroundColor: 'transparent' ,

背景颜色

textStyle: {...} ,

全局字体样式

animation: true ,

是否开启动画

animationThreshold: 2000 ,

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

animationDuration: 1000 ,

初始动画的时长

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

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

animationEasing: 'cubicOut' ,

初始动画的缓动效果

animationDelay: 0 ,

初始动画的延迟

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

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

animationDurationUpdate: 300 ,

数据更新动画的时长

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

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

animationEasingUpdate: 'cubicInOut' ,

数据更新动画的缓动效果

animationDelayUpdate: 0 ,

数据更新动画的延迟

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

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

stateAnimation: {...} ,

状态切换的动画配置

支持在每个系列里设置单独针对该系列的配置

stateAnimation.duration = 300

状态切换的动画时长，设为 0 则关闭状态动画

stateAnimation.easing = cubicOut

状态切换的动画缓动

blendMode: 'source-over' ,

图形的混合模式

hoverLayerThreshold: 3000 ,

图形数量阈值，决定是否开启单独的 hover 层，在整个图表的图形数量大于该阈值时开启单独的 hover 层

useUTC: false ,

options ... ,

media: [{...}] ,

移动端自适应