基础折线图

折线图主要用来展示数据项随着时间推移的趋势或变化。

最简单的折线图

如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line'
    }
  ]
};
live

在这个例子中,我们通过 xAxis 将横坐标设为类目型,并指定了对应的值;通过 typeyAxis 的类型设定为数值型。在 series 中,我们将系列类型设为 line,并且通过 data 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。

这里 xAxisyAxistype 属性都可以隐去不写。因为坐标轴的默认类型是数值型,而 xAxis 指定了类目型的 data,所以 ECharts 也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了 type。在实际的应用中,如果是 'value' 类型,也可以省略不写。

笛卡尔坐标系中的折线图

如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 seriesdata 每个数据用一个包含两个元素的数组表示就行了。

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      data: [
        [20, 120],
        [50, 200],
        [40, 50]
      ],
      type: 'line'
    }
  ]
};
live

折线图样式设置

折线的样式

折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 series.lineStyle 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。

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'
        }
      }
    }
  ]
};
live

这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。

数据点的样式

数据点的样式可以通过 series.itemStyle 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。

在数据点处显示数值

在系列中,这数据点的标签通过 series.label 属性指定。如果将 label 下的 show 指定为true,则表示该数值默认时就显示;如果为 false,而 series.emphasis.label.showtrue,则表示只有在鼠标移动到该数据时,才显示数值。

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
        }
      }
    }
  ]
};
live

空数据

在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。

在 ECharts 中,我们使用字符串 '-' 表示空数据,这对其他系列的数据也是适用的。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [0, 22, '-', 23, 19],
      type: 'line'
    }
  ]
};
live

注意区别这个例子中,“空”数据与取值为 0 的数据。

本文贡献者 在 GitHub 上编辑本页

pissang pissang