echartslegend位置_一起读ECharts配置项手册之series[i]line（上）

之前的文章写得都比较杂&＃xff0c;还总是想不到要写点什么……

所以最近打算把 ECharts 所有系列挨个聊一遍&＃xff0c;写一个 series 系列的简单介绍&＃xff0c;解决一大段时间的难选题问题- -b&＃xff0c;顺便方便比我还新的新手入门。

正文

• ​series[i]-line.type

series[i]-line 也就是折线图/面积图&＃xff0c;要使用折线图/面积图时&＃xff0c;首先需要使用 series[i]-line 的第一个配置「type」&＃xff0c;将其设置为字符串值 &＃39;line&＃39;。

• series[i]-line.id

「id」这个配置无默认值&＃xff0c;但实测最新的 ECharts 4.2.1 是有默认值的&＃xff0c;规则如下&＃xff08;「seriesId」即「id」&＃xff0c;「seriesIndex」即 series[i] 的 i&＃xff0c;「seriesName」是后面的「series[i]-line.name」&＃xff09;

「id」可传入字符串值作为当前 series[i] 的 ID&＃xff0c;用途如官方所说&＃xff0c;「可用于在 option 或者 API 中引用组件」。

举个栗子&＃xff0c;这样的配置项&＃xff0c;series 中有多个 series[i]

我们想更新 series2 的数据&＃xff0c;可以这么写&＃xff0c;setOption 会自动匹配。

• series[i]-line.name

「name」系列名称&＃xff0c;可用于

1. tooltip.formatter 的模版变量 {a}
2. legend.data 的图例筛选&＃xff3b; seriesName1, seriesName2, ...&＃xff3d;
3. setOption 更新数据和配置项时用于指定对应的系列&＃xff08;与前面的「id」作用类似&＃xff09;

• series[i]-line.coordinateSystem

「coordinateSystem」&＃xff0c;用于指定该系列使用的坐标系

1. 默认值为 &＃39;cartesian2d&＃39;&＃xff0c;使用二维的直角坐标系&＃xff08;也称笛卡尔坐标系&＃xff09;&＃xff0c;通过 xAxisIndex, yAxisIndex 指定相应的坐标轴组件。
2. 也可以设置为 &＃39;polar&＃39;&＃xff0c;使用极坐标系&＃xff0c;通过 polarIndex 指定相应的极坐标组件

• series[i]-line.xAxisIndex 和 series[i]-line.yAxisIndex

默认值为 0&＃xff0c;使用的 x/y 轴的 index&＃xff08;xAxis[i] / yAxis[i]&＃xff09;&＃xff0c;在单个图表实例中存在多个 x/y 轴的时候有用。

• series[i]-line.polarIndex

与上条类似&＃xff0c;默认值为 0&＃xff0c;使用的极坐标系的 index&＃xff08;polar[i]&＃xff09;&＃xff0c;在单个图表实例中存在多个极坐标系的时候有用。

• series[i]-line.symbol

标记的图形&＃xff0c;可传入字符串值或函数。默认值为 &＃39;emptyCircle&＃39;。

1. 还可以设置为&＃39;circle&＃39;, &＃39;rect&＃39;, &＃39;roundRect&＃39;, &＃39;triangle&＃39;, &＃39;diamond&＃39;, &＃39;pin&＃39;, &＃39;arrow&＃39;, &＃39;none&＃39; &＃xff1b;
2. 通过 &＃39;image://url&＃39; 设置为图片&＃xff0c;其中 URL 为图片的链接&＃xff0c;或者 dataURI&＃xff1b;
3. 通过 &＃39;path://&＃39; 将图标设置为任意的矢量路径&＃xff0c;支持任意比例。SVG PathData 可以去阿里巴巴矢量图标库 Iconfont 网站下载&＃xff0c;也可以从 Adobe Illustrator 等工具编辑导出。
4. 如果需要每个数据的图形不一样&＃xff0c;可以设置为如下格式的回调函数&＃xff1a;(value: Array|number, params: Object) &＃61;> string
   1. 其中第一个参数 value 为 data 中的数据值。
   2. 第二个参数params 是其它的数据项参数。
   3. 经验证这个回调函数在 4.2.1 里还未支持&＃xff0c;在 4.3.0-rc.2&＃xff08;Pre-release&＃xff09; 里已提供.

• series[i]-line.symbolSize

标记的大小&＃xff0c;可传入数值、数组或函数&＃xff0c;默认值为 4&＃xff08;宽和高均为 4&＃xff09;&＃xff0c;也可以分别设置宽高&＃xff0c;如 [20, 10] 表示标记宽为 20&＃xff0c;高为 10。

同样支持回调函数&＃xff1a;

(value: Array|number, params: Object) &＃61;> number|Array

1. 其中第一个参数 value 为 data 中的数据值
2. 第二个参数params 是其它的数据项参数。

• series[i]-line.symbolRotate

标记的旋转角度&＃xff0c;可传入数值&＃xff0c;如 90&＃xff08;代表逆时针旋转 90 度&＃xff09;。

• series[i]-line.symbolKeepAspect

如果 symbol 是 path:// 的形式&＃xff0c;是否在缩放时保持该图形的长宽比&＃xff0c;可传入布尔值&＃xff0c;默认为 false。

• series[i]-line.symbolOffset

标记相对于原本位置的偏移&＃xff0c;可传入数组&＃xff0c;默认值为 [0, 0] &＃xff0c;数组元素既可以是数值&＃xff0c;也可以是百分比&＃xff08;以元素尺寸&＃xff0c;即宽或者高作为 100%&＃xff09;。数组第一个值代表向右的偏移量&＃xff0c;第二个值代表向下的偏移量。

• series[i]-line.showSymbol

是否显示 symbol, 可传入布尔值&＃xff0c;默认为 true。如果 false 则只有在 tooltip hover 的时候显示。

• series[i]-line.showAllSymbol

是否显示所有 symbol 图形&＃xff0c;可传入布尔值&＃xff0c;只在主轴为类目轴&＃xff08;axis.type 为 &＃39;category&＃39;&＃xff09;时有效&＃xff0c;可选值如下&＃xff1a;

1. 默认值 &＃39;auto&＃39;&＃xff0c;如果有足够空间则显示所有 symbol 图形&＃xff0c;否则随主轴标签间隔隐藏策略&＃xff1b;
2. true&＃xff0c;显示所有 symbol 图形&＃xff1b;
3. 随主轴标签间隔隐藏策略&＃xff0c;效果如下图。

• series[i]-line.hoverAnimation

是否开启 hover 在拐点标志上的提示动画效果&＃xff08;强调/高亮&＃xff09;&＃xff0c;可传入布尔值&＃xff0c;默认为 true。比如鼠标浮在该 symbol 上、浮在 series 对应图例&＃xff08;legend&＃xff09;上、浮在该 symbol 所在轴&＃xff08;tootip.trigger 为 &＃39;axis&＃39;&＃xff09;等。

• series[i]-line.legendHoverLink

是否启用图例 hover 时的联动高亮&＃xff0c;即鼠标浮在图例&＃xff08;legend&＃xff09;上的时候&＃xff0c;该图例对应的 series 的 symbol 是否高亮&＃xff08;放大&＃xff09;可传入布尔值&＃xff0c;默认为 true。

• series[i]-line.stack

数据堆叠&＃xff0c;同个类目轴上系列配置相同的stack值后&＃xff0c;后一个系列的值会在前一个系列的值上相加&＃xff08;堆叠柱图也是用这个属性实现&＃xff09;。相同数据是否堆叠的对比&＃xff0c;如效果官方例子所示&＃xff1a;

• series[i]-line.cursor

鼠标浮在该系列的 symbol 上时&＃xff0c;鼠标光标的样式&＃xff0c;同 CSS 的 cursor&＃xff0c;可传入字符串值&＃xff0c;默认为一只手 &＃39;pointer&＃39; &＃xff0c;其他可用属性还有 &＃39;crosshair&＃39;&＃xff0c;&＃39;move&＃39;&＃xff0c;&＃39;wait&＃39; 等等。

• series[i]-line.connectNulls

是否连接空数据&＃xff0c;可传入布尔值&＃xff0c;默认值为 false。效果如下&＃xff1a;

• series[i]-line.clipOverflow

是否对超出部分裁剪&＃xff0c;可传入布尔值&＃xff0c;默认为裁剪 true。

• series[i]-line.step

是否是阶梯线图&＃xff0c;可传入布尔值或字符串值&＃xff0c;默认为 false。可以设置为 true 显示成阶梯线图&＃xff0c;也支持设置成 &＃39;start&＃39;&＃xff08;与 true 等效&＃xff09;, &＃39;middle&＃39;, &＃39;end&＃39; 分别配置在当前点&＃xff0c;当前点与下个点的中间点&＃xff0c;下个点拐弯&＃xff0c;效果见下图&＃xff08;官方示例&＃xff09;。

• series[i]-line.smooth

是否曲线平滑度&＃xff0c;可传入布尔值或 0 到 1 的数值&＃xff08;数值越大越平滑&＃xff09;&＃xff0c;默认值为 false&＃xff0c;与传入 0 等效&＃xff0c;即折线效果&＃xff1b;传入 true&＃xff0c;与传入 0.5 等效。具体效果如下图所示。

• series[i]-line.smoothMonotone

平滑算法&＃xff0c;可传入字符串值&＃xff0c;默认值手册未提及&＃xff0c;经测试应该为 &＃39;none&＃39;&＃xff0c;即老算法&＃xff1b;传入 &＃39;x&＃39; 则曲线在数据点处方向为水平&＃xff0c;传入 &＃39;y&＃39; 则为竖直。具体效果如下图。

• series[i]-line.sampling

官方描述&＃xff1a;折线图在数据量远大于像素点时候的降采样策略&＃xff0c;开启后可以有效的优化图表的绘制效率&＃xff0c;默认关闭&＃xff0c;也就是全部绘制不过滤数据点。

1. &＃39;average&＃39; 取过滤点的平均值
2. &＃39;max&＃39; 取过滤点的最大值
3. &＃39;min&＃39; 取过滤点的最小值
4. &＃39;sum&＃39; 取过滤点的和

具体效果如下图&＃xff1a;

• series[i]-line.zlevel

折线图所有图形的 zlevel 值&＃xff0c;可传入数值&＃xff0c;默认值为 0。

主要用于 Canvas 分层&＃xff0c;将变化较多和较少的组件通过分层隔离开&＃xff0c;但要注意分层过多会加大内存开销&＃xff0c;需要用手机浏览时谨慎使用。

• series[i]-line.z

官方描述&＃xff1a;折线图组件的所有图形的z值。控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低&＃xff0c;而且不会创建新的 Canvas。

可传入数值&＃xff0c;默认值为 2。

• series[i]-line.silent

官方描述&＃xff1a;图形是否不响应和触发鼠标事件&＃xff0c;默认为 false&＃xff0c;即响应和触发鼠标事件。

可传入布尔值。

series[i]-line.animation

是否开启动画&＃xff0c;可传入布尔值&＃xff0c;默认为 true。

series[i]-line.animationThreshold

关闭动画的阈值&＃xff0c;当单个 series 显示的图形数量大于阈值时会关闭动画。

可传入数值&＃xff0c;默认 2000。

• series[i]-line.animationDuration

初始动画持续的时长&＃xff0c;symbol 渲染动画的快慢&＃xff0c;可传入数值&＃xff0c;默认值 1000&＃xff08;毫秒&＃xff09;&＃xff0c;也可通过回调函数为每个数据定义不同的时长。

• series[i]-line.animationDurationUpdate

更新动画持续的时长&＃xff0c; symbol 渲染动画的快慢&＃xff0c;可传入数值&＃xff0c;默认值 1000&＃xff08;毫秒&＃xff09;&＃xff0c;也可通过回调函数为每个数据定义不同的时长。

• series[i]-line.animationDelay

初始动画的延迟时间&＃xff0c;symbol 渲染动画的早晚&＃xff0c;可传入数值&＃xff0c;默认值 0&＃xff08;毫秒&＃xff09;&＃xff0c;也可通过回调函数为每个数据定义不同的时长。

• series[i]-line.animationDelayUpdate

更新动画的延迟时间&＃xff0c;symbol 渲染动画的早晚&＃xff0c;可传入数值&＃xff0c;默认值 0&＃xff08;毫秒&＃xff09;&＃xff0c;也可通过回调函数为每个数据定义不同的时长。

series[i]-line.animationEasing

初始动画的缓动效果&＃xff0c;line 渲染动画的效果&＃xff0c;可传入字符串值&＃xff0c;默认为「linear」&＃xff0c;匀速渲染。

其他效果如「quadraticIn」、「cubicIn」等见手册处提供的官方示例&＃xff1a;

series[i]-line.animationEasingUpdate

更新动画的缓动效果&＃xff0c;line 渲染动画的效果&＃xff0c;可传入字符串值&＃xff0c;默认为「linear」&＃xff0c;匀速渲染。

• series[i]-line.data

系列中的数据内容数组。数组项通常为具体的数据项。可传入 Object。

Object 常见的形式有&＃xff1a;

1、二维数组表示

其中「维度X」和「维度Y」会默认对应于平面直角坐标系的 xAxis 和 yAxis&＃xff0c;或者极坐标系的 radiusAxis 和 angleAxis。

2、一维数组表示

当只有一个轴为类目轴&＃xff08;axis.type 为 &＃39;category&＃39;&＃xff09;的时候&＃xff0c;数据可以简化为一维数组。例如&＃xff1a;

3、数组项为&＃xff08;部分/全部&＃xff09;对象的情况

用于数据图形样式的个性化定制&＃xff0c;例如&＃xff1a;

对象的 key 支持&＃xff1a;

name&＃xff1a;数据项名称&＃xff0c;

value&＃xff1a;单个数据项的数值&＃xff0c;

symbol&symbolSize&＃xff1a;单个数据项的图形&图形大小&＃xff0c;

symbolRotate&＃xff1a;单个数据项的图形角度&＃xff0c;

symbolKeepAspect&＃xff1a;单个数据项的图形是否保持宽高比&＃xff0c;

symbolOffset &＃xff1a;单个数据项的图形的位置偏移量&＃xff0c;

label&＃xff1a;单个数据项的文字标签&＃xff0c;比 series[i]-line.label 优先级高&＃xff0c;

itemStyle&＃xff1a;单个数据项的图形样式&＃xff0c;比 series[i]-line.itemStyle 优先级高&＃xff0c;

emphasis&＃xff1a;单个数据项的图形的高亮形式&＃xff0c;比 series[i]-line.emphasis 优先级高&＃xff0c;

tooltip&＃xff1a;单个数据项图形的提示框&＃xff0c;比 series[i]-line.tooltip 优先级高。

待续

不写不知道&＃xff0c;一写发现内容真挺多的&＃xff0c;一个 series[i]-line 好长时间都没写完- -b&＃xff0c;只好把一些子配置太多的配置项&＃xff0c;留到下次写……

另外&＃xff0c;也在考虑是否有必要逐个介绍配置项&＃xff0c;因为有些仅仅是官方手册的摘抄……

比如只介绍些相对复杂的或有需要注意情况的&＃xff1f;

待续内容

• series[i]-line.label

官方描述&＃xff1a;图形上的文本标签&＃xff0c;可用于说明图形的一些数据信息&＃xff0c;比如值&＃xff0c;名称等。

该配置项有大量子配置&＃xff0c;常用的有 show、position、color、formatter 等等&＃xff0c;我们下次展开。

• series[i]-line.itemStyle、series[i]-line.lineStyle、series[i]-line.areaStyle、series[i]-line.emphasis

官方描述分别为&＃xff1a;折线拐点标志的样式、折线线条样式、区域填充样式、图形的高亮样式。

这 4 个配置项同样有不少子配置&＃xff0c;下次展开。

• series[i]-line.dimensions、series[i]-line.encode、series[i]-line.seriesLayoutBy、series[i]-line.datasetIndex

这 4 个配置与 4.0 新功能「使用 dataset 管理数据集」有关&＃xff0c;下次展开。

• series[i]-line.markPoint、series[i]-line.markLine、series[i]-line.markArea、series[i]-line.tooltip

分别用于&＃xff1a;图标的标注、标线、标域&＃xff0c;图形的提示框&＃xff0c;这 4 个配置项同样有不少子配置&＃xff0c;下次展开。