基础折线图

简单示例

我们可以使用以下代码构建一个折线图，其中 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.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