サンプルコードvar データ = [220, 182, 191, 234, 290, 120, 65, 444]; var バーの幅 = 20; var 最大数 = 0; (var i = 0; i < データ長さ; i++) { if (データ[i] > maxNum) { 最大数 = データ[i]; } } オプション = { 背景色: '黒'、 グリッド: { 上: '10%'、 左: '20%'、 右: '10%'、 下部: '0%'、 }, タイトル: テキスト: 'パーセンテージ列'、 }, x軸: 表示: 偽、 }, y軸: { データ: data.map((item, index) => `data ${index}`), 分割行: { 表示: 偽、 }, 軸ラベル: { テキストスタイル: { フォントサイズ: '80%', 色: '#02afff' }, }, 軸線: { 表示: 偽、 }, 軸目盛り: false、 }, シリーズ: [ { タイプ: 'バー'、 バー幅: バー幅、 zレベル: 2, データ: data.map(function (item) { 戻る { 値: アイテム、 最大数: 最大数、 }; })、 ラベル: { 表示: true、 位置: 'inside'、 // 距離: 80, 配置: '中央'、 フォーマッタ: 関数 (パラメータ) { // params.data.realValue を返します。 var パーセント = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%'; リターン率; }, 色: '#fff', フォントサイズ: 12, }, アイテムスタイル: { 境界半径: 10, 色: 新しい echarts.graphic.LinearGradient(0, 1, 1, 1, [ { オフセット: 0、色: '#395CFE' }, { オフセット: 1、色: '#2EC7CF' }, ])、 }, }, { タイプ: 'バー'、 バー幅: バー幅、 バーギャップ: '-100%', データ: data.map(function (item) { 戻る { 実数値: 項目、 値: maxNum、 }; })、 ラベル: { 表示: true、 位置: '右'、 距離: 80, 配置: '右'、 フォーマッタ: 関数 (パラメータ) { params.data.realValue + 'item' を返します。 }, 色: '#02afff', フォントサイズ: 18, }, アイテムスタイル: { 境界半径: 10, 色: 'rgba(3,169,244, 0.5)', }, }, ]、 }; レンダリングコード分析1. オプションの前に、データ配列を定義し、for ループを使用して配列内の最大値を取得し、それを maxNum 変数として保存します。 2. シリーズに 2 つのバーを定義します。最初のバーのデータがマッピングされ、値は手順 1 のデータに設定されます。オブジェクト型が返されます。オブジェクトには、value と maxNum の 2 つの属性が含まれます (value は必須属性、maxNum はカスタム属性で、必要に応じて他のカスタム属性を追加できます)。maxNum 属性が追加されるのは、ラベルのフォーマッタが value/maxNum を使用してパーセンテージを計算する必要があるためです。シリーズでデータをオブジェクト型として返すという書き方は初めて目にしました。計算用のデータを取得するのにとても便利です。 3. シリーズの 2 番目のバーも、マップを通じてデータを割り当てます。違いは、このバーの値がすべて maxNum に設定されていることです。2 番目のバーは背景として機能し、100% の進行状況に相当します。 realValue 属性が必要な理由は、各項目の値 (220、182、191、234、290、120、65、444 など) をバーの右側に表示する必要があるためです。 4. 最初のバーは上にあり、2 番目のバーは下にあります。キーは、最初のバーの zlevel:2 と 2 番目のバーの barGap: '-100%' です。 echarts の公式ウェブサイトでより多くの事例を読むことは、私にとって本当に有益です。 要約するこれで、echarts でパーセンテージ付きの横棒グラフを実装する方法に関するこの記事は終了です。echarts パーセンテージ横棒グラフの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします
>>: 検索テキストボックスがフォーカスを外れたときにテキストの位置がジャンプする問題の解決方法
secure_file_priv = ' ';管理者としてcmdを実行します。 my...
等高レイアウト同じ親コンテナー内の同じ高さの子要素のレイアウトを指します。等高レイアウトの実装の観点...
HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...
<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...
序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...
アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...
JSON 形式のフィールドは、MySQL 5.7 で追加された新しい属性ですが、基本的には文字列とし...
基本的なネットワーク構成Docker はイメージに基づいて複数のコンテナを「開く」ことができ、各コン...
MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...
目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...
フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...
テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...
CSS では、テキストは私たちが毎日扱う最も一般的なものの 1 つです。テキストの場合、テキストの装...
他の人のウェブページを保存して見たことがあると思いますが、特にdwで開くと、多くのウェブページに&l...
以下の機能が実装されています。 1. ユーザー名: onfouc は msg ルールを表示します。o...