MultipleLine 图表
组件配置
图表组件容器的用法及图例功能。 显示代码
复杂折线图配置
功能较全的多条折线图示例。 显示代码
自定义tooltip
自定义tooltip的样式。 显示代码
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| series | 系列列表 | Array.<series> | — | — |
| title | 标题组件 | object | — | — |
| legend | 图例组件 | object | — | — |
| grid | 直角坐标系内绘图网格 | object | — | — |
| xAxis | 直角坐标系 grid 中的 x 轴 | object | — | — |
| yAxis | 直角坐标系 grid 中的 y 轴 | object | — | — |
| tooltip | 提示框组件 | object | — | — |
| backgroundColor | 背景色 | color | — | transparent |
series
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| name | 系列名称，用于tooltip的显示，legend 的图例筛选 | string | — | — |
| symbol | 标记的图形 | string | 'circle'/ 'rect'/ 'roundRect'/ 'triangle'/ 'diamond'/ 'pin'/ 'arrow'/ 'none'/ 'image://url' | 'circle' |
| symbolSize | 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 | number / Array | — | 8 |
| showSymbol | 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 | boolean | | false |
| itemStyle | 折线拐点标志的样式 | object | — | — |
| lineStyle | 线条样式 | object | — | — |
| showArea | 是否显示区域填充 | boolean | — | false |
| areaStyle | 区域填充样式 | object | — | — |
| smooth | 是否平滑曲线显示 | boolean | — | false |
| data | 系列中的数据内容数组。数组项通常为具体的数据项 | Array | — | — |
| z | 折线图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖 | number | - | 2 |
series.itemStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 图形的颜色 | color | — | — |
series.lineStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 线的颜色，如果设置区域填充透明度, 需要rgba格式的颜色。 | color | 例：rgb(0,0,0) / rgba(0,0,0,1) / #000 / balck | — |
| width | 线宽 | number | — | 2 |
`
series.areaStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| areaOffset | 图形区域颜色渐变为透明的偏移位置。 | number | 0-1 | 0.8 |
| areaOpacity | 图形区域填充初始颜色透明度。 | number | 0-1 | 0.5 |
title
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| show | 是否显示标题组件 | boolean | — | false |
| text | 主标题文本，支持使用 \n 换行。 | string | — | — |
| link | 主标题文本超链接。 | string | — | — |
| target | 指定窗口打开主标题超链接。 | string | 'self'/'target' | target |
| textStyle | 主标题文字样式配置。 | object | — | — |
| textAlign | 整体的水平对齐。 | string | 'auto'/'left'/'right'/'center' | 'auto' |
| textVerticalAlign | 整体的垂直对齐。 | string | 'auto'/'top'/'bottom'/'middle' | 'auto' |
| padding | 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距 | number/array | — | 5 |
| left | title 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。 | number/string | — | 'auto' |
| top | title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。 | number/string | — | 'auto' |
| right | title 组件离容器右侧的距离。 | number/string | — | 'auto' |
| bottom | title 组件离容器下侧的距离。 | number/string | — | 'auto' |
legend
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| show | 是否显示图例组件 | boolean | — | false |
| left | 图例组件离容器左侧的距离，left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐 | string / number | — | 'auto' |
| top | 图例组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。 | string / number | — | 'auto' |
| right | 图例组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 | string / number | — | 'auto' |
| bottom | 图例组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 | string / number | — | 'auto' |
| width | 图例组件的宽度。默认自适应 | string / number | — | 'auto' |
| height | 图例组件的高度。默认自适应。 | string / number | — | 'auto' |
| itemGap | 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。 | nunber | — | 20 |
| itemWidth | 图例标记的图形宽度。 | number | — | 7 |
| itemHeight | 图例标记的图形高度。 | number | — | 7 |
| selectedMode | 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭 | boolean | — | false |
| textStyle | 图例的公用文本样式 | object | — | — |
| icon | 图例项的 icon | string | 'circle'/ 'rect'/ 'roundRect'/ 'triangle'/ 'diamond'/ 'pin'/ 'arrow'/ 'none' / 'image://url' | false |
| data | 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name。 | Array | — | — |
legend.textStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 文字的颜色。 | color | — | 'rgba(255,255,255,0.8)' |
| fontSize | 文字的字体大小。 | number | — | 14 |
grid
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| left | grid 组件离容器左侧的距离。 | string / number | — | '10%' |
| top | grid 组件离容器上侧的距离。 | string / number | — | 60 |
| right | grid 组件离容器右侧的距离。 | string / number | — | '10%' |
| bottom | grid 组件离容器下侧的距离。 | string / number | — | 60 |
| width | 图例组件的宽度。默认自适应 | string / number | — | 'auto' |
| height | 图例组件的高度。默认自适应。 | string / number | — | 'auto' |
xAxis
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| boundaryGap | 坐标轴两边留白策略。 | boolean | — | false |
| axisLine | 坐标轴轴线相关设置。 | object | — | — |
| axisTick | 坐标轴刻度相关设置。 | object | — | — |
| axisLabel | 坐标轴刻度标签的相关设置。 | object | — | — |
| data | 单个类目名称。 | Array | — | — |
xAxis.axisLine
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| show | 是否显示坐标轴轴线。 | boolean | — | false |
| lineStyle | 坐标轴线线配置。 | object | — | 14 |
xAxis.axisLine.lineStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 坐标轴线线的颜色。 | color | — | 'rgba(255,255,255,0.1)' |
xAxis.axisTick
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| show | 是否显示坐标轴刻度。 | boolean | — | false |
| lineStyle | 刻度线的样式设置。 | object | — | — |
xAxis.axisTick.lineStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 刻度线的颜色。 | color | — | 'rgba(255,255,255,0.1)' |
xAxis.axisLabel
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| interval | 坐标轴刻度标签的显示间隔。 默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。 | number | — | — |
| rotate | 刻度标签旋转的角度。 | number | — | 45 |
| color | 刻度标签文字的颜色。 | color | — | 'rgba(255,255,255,0.8)' |
| fontSize | 文字的字体大小。 | number | — | 14 |
| align | 文字水平对齐方式，默认自动。 | string | — | — |
yAxis
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| boundaryGap | 坐标轴两边留白策略。 | boolean | — | false |
| min | 坐标轴刻度最小值。 | number | — | — |
| max | 坐标轴刻度最大值。 | number | — | — |
| splitNumber | 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。 | number | — | 5 |
| axisLine | 坐标轴轴线相关设置。 | object | — | — |
| axisTick | 坐标轴刻度相关设置。 | object | — | — |
| axisLabel | 坐标轴刻度标签的相关设置。 | object | — | — |
| splitLine | 坐标轴在 grid 区域中的分隔线。 | object | — | — |
| data | 单个类目名称。 | Array | — | — |
yAxis.axisLine
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| show | 是否显示坐标轴轴线。 | boolean | — | false |
| lineStyle | 坐标轴线线配置。 | object | — | — |
yAxis.axisLine.lineStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 坐标轴线线的颜色。 | color | — | 'rgba(255,255,255,0.1)' |
yAxis.axisTick
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| show | 是否显示坐标轴轴线。 | boolean | — | false |
| lineStyle | 坐标轴线线配置。 | object | — | — |
yAxis.axisTick.lineStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 坐标轴线线的颜色。 | color | — | 'rgba(255,255,255,0.1)' |
yAxis.label
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| formatter | 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 | string | — | '{value}' |
| color | 坐标轴线线配置。 | color | — | 'rgba(255,255,255,0.8)' |
| fontSize | 坐标轴线线配置。 | number | — | 14 |
| align | 文字水平对齐方式，默认自动。 | string | — | — |
yAxis.splitLine
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| lineStyle | 线样式。 | object | — | — |
yAxis.splitLine.lineStyle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 线的颜色。 | color | — | 'rgba(255,255,255,0.1)' |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| show | 是否显示提示框组件。 | boolean | — | true |
| unit | 提示框value后缀，在使用默认提示框formatter时生效 | string | — | — |
| formatter | 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 | string / function | 模板变量有: {a}（系列名称）/ {b}（类目值）/ {c}（数值）/ {d} （无） | — |
| backgroundColor | 提示框浮层的背景颜色。 | color | — | 'rgba(18,20,29,0.95)' |
| axisPointer | 坐标轴指示器 | object | — | — |
| position | 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。 | string/array/function | — | [16, 10] |
| padding | 提示框浮层内边距，单位px | number/array | — | [16, 10] |
| extraCssText | 额外附加到浮层的 css 样式。 | string | — | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| lineStyle | 指示器样式。 | object | — | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| color | 线的颜色。 | color | — | '#FFF' |