基础折线图

简单示例

我们可以使用以下代码构建一个以 category 为 x 轴，value 为 y 轴的折线图

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 已经指定了 category 的 data。 在这种情况下，ECharts 可以识别出这是一个 category 坐标轴。

笛卡尔坐标系中的折线图

如果我们希望折线图是连续的，该如何实现？答案很简单，只要 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