series[i]-line 用于表示 ECharts 图表中的折线/面积图,折线/面积图是用折线将各个数据点标志连接起来的图表,可以用于展现数据的变化趋势,在 ECharts 直角坐标系和极坐标系上的使用较为广泛。ECharts 折线/面积图属性比较多,本节对这些属性做出详细讲解,配合实例的使用,帮助您更好运用 ECharts 折线/面积图。Tip: 设置 areaStyle 后可以绘制面积图;配合分段型 visualMap 组件可以将折线/面积图通过不同颜色分区间。
如下示例:
series[i]-line.type | string
[ default: 'line' ]
设置 ECharts 系列的类型为折线/面积图。
series[i]-line.name | string
系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
series[i]-line.coordinateSystem | string
[ default: 'cartesian2d' ]
该系列使用的坐标系,可选:
'cartesian2d'使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'polar'使用极坐标系,通过 polarIndex 指定相应的极坐标组件
series[i]-line.xAxisIndex | number
[ default: 0 ]
使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
series[i]-line.yAxisIndex | number
[ default: 0 ]
使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
series[i]-line.polarIndex | number
[ default: 0 ]
使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
series[i]-line.symbol | string
[ default: 'emptyCircle' ]
标记的图形。
ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
也可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI。
可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
series[i]-line.symbolSize | number, Array, Function
[ default: 4 ]
标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:(value: Array|number, params: Object) => number|Array
其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。
series[i]-line.symbolRotate | number
标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
series[i]-line.symbolOffset | Array
[ default: [0, 0] ]
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
series[i]-line.showSymbol | boolean
[ default: true ]
是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
series[i]-line.showAllSymbol | boolean
[ default: false ]
标志图形默认只有主轴显示(随主轴标签间隔隐藏策略),如需全部显示