坐标轴

直角坐标系中的 x/y 轴。

x 轴、y 轴

x 轴和 y 轴都包含轴线、刻度、标签和标题。有些图表会使用网格线来辅助查看和计算数据。

一个普通的二维坐标系拥有 x 轴和 y 轴。通常情况下，x 轴位于底部，y 轴位于左侧。配置项如下所示。

option = {
  xAxis: {
    // ...
  },
  yAxis: {
    // ...
  }
  // ...
};

x 轴通常用来声明类目，也称作观察数据的维度，例如：“销售时间”、“销售地点”、“产品名称”等。y 轴通常用来表示类目的数值。这些数据用于考察某一类数据的量化数值或需要分析的某些指标，例如：“销售数量”、“销售价格”。

option = {
  xAxis: {
    type: 'time',
    name: 'Sales Time'
    // ...
  },
  yAxis: {
    type: 'value',
    name: 'Sales Quantity'
    // ...
  }
  // ...
};

当 x 轴的数据跨度很大时，我们可以使用缩放（zoom）的方法来显示图表中的部分数据。

option = {
  xAxis: {
    type: 'time',
    name: 'Sales Time'
    // ...
  },
  yAxis: {
    type: 'value',
    name: 'Sales Quantity'
    // ...
  },
  dataZoom: []
  // ...
};

在二维数据中，可以有多于两个坐标轴。在 ECharts 中，通常可以同时存在两个 x 轴或 y 轴。你可以更改配置项 offset 来避免坐标轴在同一位置重叠。x 轴可以显示在顶部和底部，y 轴可以显示在左侧和右侧。

option = {
  xAxis: {
    type: 'time',
    name: 'Sales Time'
    // ...
  },
  yAxis: [
    {
      type: 'value',
      name: 'Sales Quantity'
      // ...
    },
    {
      type: 'value',
      name: 'Sales Price'
      // ...
    }
  ]
  // ...
};

坐标轴轴线

ECharts 提供了 axisLine 的配置项。你可以根据需求更改设置，例如坐标轴两端的箭头和轴线样式。

option = {
  xAxis: {
    axisLine: {
      symbol: 'arrow',
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
    // ...
  },
  yAxis: {
    axisLine: {
      symbol: 'arrow',
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
  }
  // ...
};

坐标轴刻度

ECharts 提供了 axisTick 的配置项。你可以根据需求更改设置，例如刻度的长度和样式。

option = {
  xAxis: {
    axisTick: {
      length: 6,
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
    // ...
  },
  yAxis: {
    axisTick: {
      length: 6,
      lineStyle: {
        type: 'dashed'
        // ...
      }
    }
  }
  // ...
};

坐标轴刻度标签

ECharts 提供了 axisLabel 的配置项。你可以根据需求更改设置，例如文本对齐方式和自定义标签内容。

option = {
  xAxis: {
    axisLabel: {
      formatter: '{value} kg',
      align: 'center'
      // ...
    }
    // ...
  },
  yAxis: {
    axisLabel: {
      formatter: '{value} ¥',
      align: 'center'
      // ...
    }
  }
  // ...
};

示例

左侧的 y 轴代表东京的月平均气温，右侧的 y 轴代表东京的降水量。x 轴代表时间。它反映了平均气温和降水量之间的趋势和关系。

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        rotate: 30
      },
      data: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      position: 'right',
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      min: 0,
      max: 25,
      position: 'left',
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Precipitation',
      type: 'bar',
      yAxisIndex: 0,
      data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
    },
    {
      name: 'Temperature',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      data: [
        6.0,
        10.2,
        10.3,
        11.5,
        10.3,
        13.2,
        14.3,
        16.4,
        18.0,
        16.5,
        12.0,
        5.2
      ]
    }
  ]
};
在线示例

以上是关于坐标轴配置项用法的简明介绍。更多详情请查阅官方网站。

贡献者 在 GitHub 上编辑此页

pissang