基础折线图

简单示例

我们可以用以下代码构建一个 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 之间的区别。

贡献者 在 GitHub 上编辑此页

pissang