JavaScript ECharts の使用方法の説明

JavaScript ECharts の使用方法の説明

以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多くの人の役に立てばと思います。

まず、ECharts は純粋な JavaScript チャート ライブラリであることを簡単に紹介します。基盤となるレイヤーは、軽量の Canvas ライブラリ ZRender に依存しています。これは BSD オープン ソース プロトコルに基づいており、優れた視覚化フロントエンド フレームワークです。

公式ウェブサイトアドレス: http://echarts.baidu.com/

1.まず、公式サイトで適切なダウンロードバージョンを選択します

http://echarts.baidu.com/download.html

2. Echartsの紹介

 <script src="js/echarts.js"></script>

3. 簡単なチャートを描く

DOMコンテナを準備する

 <div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>

4. シンプルなレーダーチャートを作成する

<script type="text/javascript">
window.onload = 関数 (){
		//チャートの設定項目とデータを指定する option = {
				//タイトル	
			    タイトル:
			        テキスト: 「基本的なレーダーチャート」
			    },
			    ツールチップ: {},
			    伝説: {
			        データ: ['割り当てられた予算', '実際の支出']
			    },
			    レーダー:
			        // 形状: '円',
			        名前: {
			            テキストスタイル: {
			                色: '#fff',
			                背景色: '#999',
			                境界半径: 3,
			                パディング: [3, 5]
			           }
			        },
			        インジケータ: [
			           { 名前: 'sales'、最大: 6500}、
			           { 名前: '管理'、最大: 16000}、
			           { 名前: '情報技術', 最大: 30000},
			           { 名前: 'カスタマーサポート'、最大: 38000}、
			           { 名前: '開発'、最大: 52000}、
			           { 名前: 'マーケティング'、最大: 25000}
			        ]
			    },
			    シリーズ: [{
			        名前: 「予算と支出」
			        タイプ: 'レーダー'、
			        // エリアスタイル: {normal: {}},
			        データ : [
			            {
			                値: [4300, 10000, 28000, 35000, 50000, 19000],
			                名前: 「割り当てられた予算」
			            },
			             {
			                値: [5000, 14000, 28000, 31000, 42000, 21000],
			                名前: 「実際の支出」
			            }
			        ]
			    }]
			};
			//DOM コンテナを取得します var myChart = echarts.init(document.getElementById('chartmain'));
			// 指定した構成項目とデータを使用してグラフを表示します。
			myChart.setOption(オプション);
}
</スクリプト>

こんな簡単なレーダーチャートでもいいので、下のエフェクト画像を見てみましょう

5. ダイナミックバーチャート

  1. またはECharts用のDOMコンテナを作成する
  2. バックエンドはデータを返す
  3. フロントエンドのJavaScriptコード
<script type="text/javascript">
 
 
  window.onload = 関数 (){
	//年間契約金額の財務ビュー echart データ ソース $.ajax({
		url:''、
		タイプ:'投稿',
		データ型: 'json',
		成功: function(data){
			var partners = new Array(); //会社名 for(var i=0;i<data.length;i++){
				パートナー.push(データ[i].partner);
			} 
			var odata = [];
			for(var i=0;i<data.length;i++){
				var obj = {};
				obj.name=パートナー[i];
				obj.type='バー';
				obj.data=[data[i].qyearOne,data[i].qyearTwo,data[i].qyearThree,data[i].qyearFour,data[i].yearOne,data[i].yearTwo,data[i].yearThree,data[i].yearFour,data[i].hyearOne,data[i].hyearTwo,data[i].hyearThree,data[i].hyearFour];
				obj.barWidth=30;//幅 odata.push(obj);
			}
			オプション = {
			    ツールチップ: {
			        トリガー: '軸'
			    },
			    伝説: {
			        データ:パートナー
			    },
			    ツールボックス:
			        表示: true、
			    },
			    計算可能: true、
			    x軸: [{
			            タイプ: 'カテゴリ'、
			            データ:[qyear+'Q1'、qyear+'Q2'、qyear+'Q3'、qyear+'Q4'、year+'Q1'、year+'Q2'、year+'Q3'、year+'Q4'、hyear+'Q1'、hyear+'Q2'、hyear+'Q3'、hyear+'Q4']
			        }],
			    y軸: [{
			            タイプ: '値'
			        }],
			     
			    series : odata // フロントエンドアセンブリデータ };
                      //割り当てる DOM コントロールを取得します var myChart = echarts.init(document.getElementById('chartmain'));
                      //値を割り当てる myChart.setOption(option);
		} 
	});
</スクリプト>

このようなフロントエンドとバックエンドの相互作用の棒グラフは OK で、効果図は次のようになります。

JavaScript での ECharts の使用に関するこの記事はこれで終わりです。JavaScript での ECharts に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSはキャンバス技術を使用してeChartsの棒グラフを模倣します
  • Baidu ECharts プラグインを使用して JavaScript で円グラフを描画する例
  • ECharts.js を使用してローソク足チャートを描画する方法の例
  • レポート統計を実装するために echarts を使用する jsp の例
  • JavaScript によるデータ視覚化: ECharts マップの作成

<<:  MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル (Linux)

>>:  Linux でファイアウォールがオフになっているかどうかを確認する方法

推薦する

Vueは遅延読み込みによりページの応答速度を向上

目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...

MySQL の中国語ソートの詳細と例

MySQL の漢字ソートの詳細な説明デフォルトでは、MySQL は日付、時刻、および英語の文字列の並...

MySQLの浅いエントリと深いエグジットの原則についての簡単な説明

目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....

WeChatアプレットの手動および自動追跡の実装の詳細説明(Taro)

どの企業もユーザーベースを拡大したいのであれば、ユーザーの操作データを収集・分析する必要があり、その...

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

Docker管理に関する断片的な知識のまとめ

目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...

一意の注文番号を生成するためのMySQLの高同時実行方法

序文このブログ記事が公開された後、何人かの友人からSQL Serverバージョンがあるかどうか尋ねら...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

CSS はモバイル互換性の問題を解決するために 0.5px の線を実装します (推奨)

【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...

Linux IO 多重化 epoll ネットワーク プログラミング

序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...

CSS でフロートをクリアするための完全ガイド (要約)

1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...

シンプルなスネークゲームを実現するネイティブjs

この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

Vueはドラッグ可能なツリー構造図を実装します

目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...

シンプルな計算機を実装する JavaScript コード

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...