ドーナツ チャートを使用して 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 を設定できます。コード例は次のとおりです。

<div id="chart-container" style="width: 600px; height: 400px;"></div>

次に、JavaScript を使用してドーナツ チャートを動的に生成できます。まず、Echarts インスタンスを作成し、コンテナーの ID をパラメーターとして指定します。コード例は次のとおりです。

var myChart = echarts.init(document.getElementById('chart-container'));

次に、ドーナツ チャートのデータとチャートの構成項目を定義する必要があります。具体的なコードは次のとおりです:

// 定义数据
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} <br/>{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);

上記のコードでは、最初に表示する必要があるデータを定義します。各データ オブジェクトには 2 つの属性が含まれています: value と name、value はデータの数値を表し、name はデータの名前を表します。

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

コードの最後の行では、

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

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

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

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

以上がドーナツ チャートを使用して ECharts でデータの比率を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。