軸

デカルト座標系における x/y 軸。

x軸、y軸

x軸とy軸はどちらも軸線、目盛り、ラベル、タイトルを含んでいます。一部のチャートでは、グリッドを使用してデータの表示と計算を補助します。

通常の2次元座標系にはx軸とy軸があります。一般的に、x軸は下部に、y軸は左側に配置されます。設定は以下のとおりです。

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

x軸は通常、データを観察する側面とも呼ばれるカテゴリの数を宣言するために使用されます。「販売時期」、「販売場所」、「製品名」などです。y軸は通常、カテゴリの数値を示すために使用されます。「販売数量」や「販売価格」など、特定の種類のデータの量的価値や分析する必要がある指標を調べるために使用されるデータです。

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

x軸の範囲が広い場合は、ズームメソッドを使用してチャートにデータの一部を表示できます。

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

二次元データでは、軸が3つ以上存在する可能性があります。 EChartsでは通常、2つの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 pissang