Echarts 基本入門: 棒グラフと折れ線グラフの一般的な構成

1eChartsの基本手順

4つのステップ

1 DOMコンテナを見つける

2 初期化

3 設定オプション

4 オプションの設定

124ステップはほぼ全て同じです。オプションは設定項目です。表示したいアイコンを自由に設定できます。

最大値と最小値を示す最も基本的な棒グラフ

2 平均値マークライン属性

3 数値表示バー幅、横棒グラフ

数値表示ラベル属性

列幅 barWidth

水平の場合は、2 つの軸の変換にのみ注意する必要があります。

一般設定は円グラフと散布図の一般的な設定です

タイトル

ツールチップ: ヒント

ツールボックスのツールボタン

伝説

ツールチッププロンプトボックスコンポーネント、マウスがチャート上に移動したときにプロンプ​​トを表示します

フォーマッタは関数を設定することもできる

ツールボックス

画像のエクスポート、データビュー、動的タイプの切り替え、データ領域のズーム、リセットなどの5つのツールと機能があります。

凡例、シリーズをフィルタリングするために使用され、シリーズで使用する必要があります

4つの一般的な構成の基本的な使用法は次のようになります

タイトル タイトル ツールチップ ツールボタン ツールボックス 凡例: 凡例

折れ線グラフ

基本的な描画

サイズの平均値、マークされた間隔

サイズの平均値は棒グラフと全く同じです

マークエリア

ラインコントロールの滑らかさ

塗りつぶしスタイル

限界に近づく

Y軸の範囲

規模

チャートを積み重ねるには、各スタックを「すべて」に設定します。

普通

重複する場合は設定できます

各シリーズは

こうなります。重なりはありませんが、y軸の変化に注目してください。上の線の開始点は1000で、上に1000ずつ加算していくだけです。

プラスエリアスタイル

スタッキング効果はさらに顕著です。

要約する

Echarts の基本的な紹介、棒グラフと折れ線グラフの一般的な構成に関するこの記事はこれで終わりです。Echarts の棒グラフと折れ線グラフの一般的な構成に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。