基础折线图

简单示例

我们可以使用以下代码构建一个 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'
        }
      }
    }
  ]
};
在线示例

当我们在这里设置线宽时，图形项（items）的线宽不会改变。图形项的样式需要单独设置。

图形项样式

图形项样式可以通过 series.itemStyle 更改。它包括 color、borderColor、borderStyle、borderWidth、borderType、shadowColor、opacity 等。其工作原理与 lineStyle 相同，因此我们不再深入讨论。

在图形项上显示数值

在系列（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 pissang