echart の一般的な構成をいくつか整理します (コード例付き)

echarts の基本的な使い方については説明しませんが、公式 Web サイトにはデモが多数あり、コピー＆ペーストで実行できます。ここでは主に筆者の社内でよくある構成をまとめます。

1. デュアル Y 軸

データに複数のポリラインがあり、一部の線には大きなデータが含まれ、一部の線には非常に小さなデータが含まれる場合、それらがすべて 1 つの Y 上に配置されている場合、データが軸に表示されると、少量のデータは に非常に近くなります。

options.yAxis を構成してから、options.series yAxisIndex の各データに対して を構成するだけです。 で十分です。0 は左側、1 は右側です。

options = {
    series: [
        {
            data: [...],
            type: "line",
            yAxisIndex: 0,
        },
        {
            data: [...],
            type: "line",
            yAxisIndex: 1,
        },
        ...
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

2. 読み込み効果

echarts には読み込みが付属しています。データを読み込むときは showLoading() を呼び出し、読み込みをキャンセルするときは hideLoading() を呼び出すことができます。 ##。

3.no-data プレースホルダー

echarts は適切な no-data プレースホルダーを提供していません。使用できるのはタイトル マジック変更のみです。データがない場合は手動でX軸とY軸をクリアしてからタイトルを追加し、データがある場合はタイトルを削除します。

options = {
  title: {
    text: '此时间段暂无数据',
    textStyle: {
      color: 'black',
      fontWeight: 'normal',
      fontSize: 25,
    },
    left: '45%',
    top: '30%',
  },
};

4. 単位付きラベル

echarts のデフォルトのラベルには単位がなく、echarts は単位構成を提供します。シリーズの各ポリラインで toolstip.valueFormatter を構成するだけです。

ラベル表示スタイルに満足できない場合は、echarts でラベルの HTML をカスタマイズすることもできます。時間が経ったら、フォーマッタを使用して HTML 内にユニットを追加できます。

構成は次のとおりです。独自のプロジェクトに応じて変更してください:

<br/>

以上がechart の一般的な構成をいくつか整理します (コード例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。