ドーナツ チャートを使用して ECharts でデータの比率を表示する方法

ドーナツ チャートを使用して ECharts でデータの比率を表示するには、特定のコード サンプルが必要です。

ECharts は、データを簡単に表示して傾向を分析できる JavaScript ベースのビジュアル チャート ライブラリです。 。その中でもドーナツ グラフは一般的なグラフの種類で、データの比率関係を表示するためによく使用されます。この記事では、ECharts でドーナツ チャートを使用してデータの比率を表示する方法を紹介し、具体的なコード例を示します。

まず、ECharts 環境を準備する必要があります。 ECharts の JavaScript コードは CDN (コンテンツ配信ネットワーク) を通じて導入することも、ECharts のソース コードをダウンロードしてプロジェクトに導入することもできます。便宜上、CDN を通じて ECharts を導入できます。具体的なコードは次のとおりです:

<script src="https://cdn.jsdelivr.net/npm/echarts@4.10.0/dist/echarts.min.js"></script>

次に、ドーナツ チャートを配置するコンテナを作成する必要があります。 HTML <div> タグを使用してコンテナを作成し、コンテナの識別子として一意の ID を設定できます。コード例は次のとおりです。 <pre class='brush:php;toolbar:false;'>&lt;div id=&quot;chart-container&quot; style=&quot;width: 600px; height: 400px;&quot;&gt;&lt;/div&gt;</pre><p> 次に、JavaScript を使用してドーナツ チャートを動的に生成できます。まず、Echarts インスタンスを作成し、コンテナーの ID をパラメーターとして指定します。コード例は次のとおりです。 </p><pre class='brush:php;toolbar:false;'>var myChart = echarts.init(document.getElementById('chart-container'));</pre><p> 次に、ドーナツ チャートのデータとチャートの構成項目を定義する必要があります。具体的なコードは次のとおりです: </p><pre class='brush:javascript;toolbar:false;'>// 定义数据 var data = [ { value: 335, name: '数据1' }, { value: 310, name: '数据2' }, { value: 234, name: '数据3' }, { value: 135, name: '数据4' }, { value: 1548, name: '数据5' } ]; // 定义配置项 var option = { tooltip: { trigger: 'item', formatter: '{a} &lt;br/&gt;{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, series: [ { name: '数据占比', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: data } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);</pre><p> 上記のコードでは、最初に表示する必要があるデータを定義します。各データ オブジェクトには 2 つの属性が含まれています: <code>value と name、value はデータの数値を表し、name はデータの名前を表します。

次に、チャートの構成項目を定義します。このうち、tooltip はプロンプト ボックスのスタイルと内容を設定するために使用され、legend は凡例のスタイルと位置を設定するために使用されます。最後に、series を使用してシリーズ、つまりグラフのデータとその表示方法を定義します。ここで使用される系列は、ドーナツ グラフを表す pie タイプです。内半径と外半径のサイズは、radius、label、# によって設定されます。 ##labelLine が使用されます。テキスト ラベルとコネクタ ラインのスタイルを設定するために使用されます。

コードの最後の行では、

setOption メソッドを使用して構成項目とデータをグラフに適用します。グラフは自動的に更新され、コンテナーに表示されます。

上記の手順により、ドーナツ チャートを使用して ECharts でデータの割合を表示することができます。実際のアプリケーションでは、特定のニーズに応じてコードを変更および拡張し、より多くの表示ニーズを満たすことができます。

要約すると、ECharts でドーナツ グラフを使用してデータの割合を表示するには、ECharts 環境を準備し、HTML でコンテナを作成し、JavaScript コードを使用してドーナツ グラフを動的に生成する必要があります。データと構成項目を定義し、

setOption メソッドを使用してグラフに適用します。上記は、ドーナツ チャートを使用して ECharts でデータの割合を表示するための具体的な手順とコード例です。