grafana 折线图横坐标 折线图横坐标怎么做

基础折线图

简单折线图

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

option = {
  xAxis: {
    type: "category",
    data: ["a", "b", "c"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      type: "line",
      data: [1, 2, 3],
    },
  ],
};

只需要把类型设置为line即可

这里 xAxis 和 yAxis 的 type 属性都可以隐去不写。因为坐标轴的默认类型是数值型，而 xAxis 指定了类目型的 data，所以 ECharts 也能识别出这是类目型的坐标轴。

为了让大家更容易理解，我们特意写了 type。在实际的应用中，如果是 'value' 类型，也可以省略不写。

笛卡尔坐标系折线图

如果我们希望折线图在横坐标和纵坐标上都是连续的，即在笛卡尔坐标系中，只要把 series 的 data 每个数据用一个包含两个元素的数组表示就行了。

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      data: [
        [1, 2],
        [2, 1],
        [3, 4],
      ],
      type: "line",
    },
  ],
};

折线图样式设置

折线图样式

折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 series.lineStyle 了解。

这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: {
    data: [1, 2, 3, 4, 5, 6],
    type: "line",
    lineStyle: {
      normal: {
        color: "red",
        width: 3,
        type: "dashed",
      },
    },
  },
};

数据点样式

数据点的样式可以通过 series.itemStyle 指定填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）等。

案例：

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: {
    data: [1, 2, 3, 4, 5, 6],
    type: "line",
    lineStyle: {
      normal: {
        opacity: 0,
      },
    },
  },
};

在数据点处显示数值

在系列中，这数据点的标签通过 series.label 属性指定。

如果将 label 下的 show 指定为true，则表示该数值默认时就显示；

如果为 false，而 series.emphasis.label.show 为 true，则表示只有在鼠标移动到该数据时，才显示数值。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: {
    data: [1, 2, 3, 4, 5, 6],
    type: "line",
    label: {
      show: false,
      position: "top",
      textStyle: {
        fontSize: 20,
      },
    },
    emphasis: {
      label: {
        show: true,
      },
    },
  },
};

空数据

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

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

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: {
    data: [1, 2, '-', 4, 5, 6],
    type: "line",
  },
};

---

堆叠折线图

与堆叠柱状图类似，堆叠折线图也是用系列的 stack 设置哪些系列堆叠在一起。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      stack: "x",
    },
    {
      data: [6, 5, 4, 3, 2, 1],
      type: "line",
      stack: "x",
    },
  ],
};

但是不同的是，如果不加说明的话，我们很难判断出这是一个堆叠折线图，还是一个普通的折线图。

所以，对于堆叠折线图而言，一般建议使用区域填充色以表明堆叠的情况。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      stack: "x",
      areaStyle: {},
    },
    {
      data: [6, 5, 4, 3, 2, 1],
      type: "line",
      stack: "x",
      areaStyle: {},
    },
  ],
};

---

区域面积图

当然你也可以不堆叠，这样更适合对比

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      stack: "x",
    },
    {
      data: [6, 5, 4, 3, 2, 1],
      type: "line",
      stack: "y",
    },
  ],
};

区域面积图将折线到坐标轴的空间设置背景色，用区域面积表达数据。

相比普通的折线图，区域面积图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      areaStyle: {},
    },
    {
      data: [6, 5, 4, 3, 2, 1],
      type: "line",
      areaStyle: {
        opacity: 0.5,
      },
    },
  ],
};

通过 areaStyle 设置折线图的填充区域样式，将其设为为 {} 表示使用默认样式，即使用系列的颜色以半透明的方式填充区域。

如果想指定特定的样式，可以通过设置 areaStyle 下的配置项覆盖，如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。

除了opacity之外还可以通过调整color中的```rgba``颜色的透明度实现

---

平滑曲线图

平滑曲线图也是折线图的一种变形，这种更柔和的样式也是一种不错的视觉选择。使用时，只需要将折线图系列的 smooth 属性设置为 true 即可。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      smooth: true,
    },
  ],
};

---

阶梯线图

阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。

阶梯线图能够很好地表达数据的突变。

在 ECharts 中，系列的 step 属性用来表征阶梯线图的连接类型，它共有三种取值：'start'、'middle' 和 'end'，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      step: "start",
      smooth: true,
    },
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      step: "middle",
      smooth: true,
    },
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      step: "end",
      smooth: true,
    },
  ],
};

请注意这个例子中不同的 step 取值对应的数据点和连线的区别。