echarts 折线图线条粗细_ECharts折线/面积图属性大全

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 ]

标志图形默认只有主轴显示(随主轴标签间隔隐藏策略)，如需全部显示