基础折线图 简单示例 我们可以用以下代码构建一个 x 轴为类目（category）、y 轴为数值（value）的折线图。
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150],
type: 'line'
}
]
}; 在线示例 在这个例子中，我们在 xAxis 和 yAxis 中分别设置了坐标轴的类型为 category（类目）和 value（数值），并通过 data 明确了 x 轴上的内容。在 series 中，我们将类型设置为 line（折线），并通过 data 指定了三个点的值。这样，我们就得到了一个简单的折线图。
这里的 type 可以省略，因为坐标轴的默认类型是 value，而当 xAxis 指定了类目的 data 时，ECharts 能识别出这是一个类目轴。
直角坐标系中的折线图 如果我们希望折线图是连续的，该如何实现呢？答案很简单，只要将 series 的 data 中的每个值都表示为一个包含两个元素的数组即可。
option = {
xAxis: {},
yAxis: {},
series: [
{
data: [
[20, 120],
[50, 200],
[40, 50]
],
type: 'line'
}
]
}; 在线示例 自定义折线图 折线图样式 折线图样式可以通过 lineStyle 设置来更改。你可以指定颜色、线宽、折线类型和透明度等。详情请查阅手册 series.lineStyle。
这是一个设置颜色、线宽和类型的示例。
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
lineStyle: {
normal: {
color: 'green',
width: 4,
type: 'dashed'
}
}
}
]
}; 在线示例 当我们在这里设置线宽时，数据点的线宽不会改变。数据点的样式需要单独设置。
数据点样式 数据点样式可以通过 series.itemStyle 来更改。它包括 color（颜色）、borderColor（边框颜色）、borderStyle（边框样式）、borderWidth（边框宽度）、borderType（边框类型）、shadowColor（阴影颜色）、opacity（透明度）等。其工作方式与 lineType 类似，因此我们不再进一步讨论。
在数据点上显示数值 在系列（series）中，数据点的标签由 series.label 指定。如果我们将 label 下的 show 改为 true，数值将默认显示。另外，如果 series.emphasis.label.show 为 true，则只有当鼠标滑过数据点时才会显示标签。
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
label: {
show: true,
position: 'bottom',
textStyle: {
fontSize: 20
}
}
}
]
}; 在线示例 空数据 在 series 中可能存在空数据。它与 0 有所不同。当存在空数据时，折线图会忽略该点，而不会穿过它——空数据点不会被相邻的点连接起来。
在 ECharts 中，我们使用 '-' 来表示空数据，这也适用于其他系列中的数据。
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [0, 22, '-', 23, 19],
type: 'line'
}
]
}; 在线示例 请注意空数据和 0 之间的区别。