以前、プロジェクトを行う際に 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. ダイナミックバーチャート
<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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル (Linux)
>>: Linux でファイアウォールがオフになっているかどうかを確認する方法
データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...
1. インストールパッケージをダウンロードするダウンロードアドレス: https://sourcef...
目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...
1. 基礎知識: HTTP ヘッダー ユーザーエージェントユーザー エージェントは、ユーザー エージ...
<area> タグは、イメージ マップ内の領域を定義します (注: イメージ マップはク...
目次序文基本的な紹介コードの実装基本構造アップロード分析Excel にエクスポート基本構造Excel...
Redux はデータ状態管理プラグインです。React や Vue を使用してコンポーネント化された...
この記事では、コードレイン効果を実現するためのキャンバスの具体的なコードを参考までに共有します。具体...
目次1. 順番に紹介する2. ユーザーを作成する3. ユーザーアカウントを削除する4. アクセス権5...
目次スケルトンスクリーンとはアプレットでスケルトン画面を生成する方法導入方法表示と非表示ユーザーエク...
目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...
Ubuntu 20.04 がリリースされ、多くの新機能が導入されましたが、慣れていない機能も多くあ...
目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...
目次1. はじめに2. vue-cli の紹介2.1 コマンドライン2.2 CLI サービス2.3 ...
目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...