ECharts ファネル チャート (マルチレベル): データ フローとコンバージョン率を表示する方法

ECharts ファネル チャート (マルチレベル): データ フローとコンバージョン率を表示する方法、具体的なコード例が必要です

はじめに:
インターネットとデータ分析 発展に伴い、データプロセスと変換率の分析と表示がますます重要になってきました。 ECharts は、開発者が使用できる豊富な種類のチャートを提供する JavaScript ベースのデータ視覚化ライブラリです。その中でもファネル チャートは、データ フローとコンバージョン率を表示するために使用される一般的なチャート タイプの 1 つです。この記事では、ECharts を使用してマルチレベル ファネル チャートを作成する方法と、具体的なコード例を紹介します。

1. マルチレベル ファネル チャートとは
マルチレベル ファネル チャートは、従来のファネル チャートを拡張したもので、複数段階のデータ フローとコンバージョン率を表示できます。各ステージのファネルはプロセスを表し、隣接する 2 つのファネル間にはコンバージョン率の関係があります。マルチレベルファネルチャートは、データの流れの方向と変換効果をより直観的に表示できるため、データ変換プロセスをより深く理解するのに役立ちます。

2. ECharts マルチレベル ファネル チャートを作成する手順

1. ECharts のインストール
   まず、プロジェクトに ECharts ライブラリをインストールする必要があります。 npm を使用してインストールできます。コマンドは次のとおりです。

   npm install echarts --save

2. ECharts ライブラリの導入
   使用する必要があるページに ECharts ライブラリを導入します。 html ページ:

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

3. コンテナの準備
   マルチレベル ファネル チャートを表示するコンテナを HTML ページに準備します。例:

   <div id="chartContainer1" style="width: 600px;height: 400px;"></div>

4. JavaScript コードの記述
   JavaScript コードでは、まず準備されたコンテナーを取得し、ECharts インスタンスを作成する必要があります。次に、データ、スタイル、コンバージョン率、その他の情報を含む、マルチレベル ファネル チャートの関連パラメーターを構成します。最後に、構成されたパラメーターをインスタンスに渡し、グラフをレンダリングします。

具体的なコード例は次のとおりです。

// 获取容器
var container = document.getElementById('chartContainer1');
// 创建ECharts实例
var myChart = echarts.init(container);
// 配置参数
var option = {
    title: {
        text: '多级漏斗图',
        subtext: '数据流程和转化率'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: true,
        feature: {
            magicType: {
                type: ['funnel', 'pyramid']
            },
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['阶段1', '阶段2', '阶段3']
    },
    calculable: true,
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            width: '80%',
            label: {
                normal: {
                    formatter: '{b} : {c}%'
                }
            },
            data: [
                {value: 60, name: '阶段1'},
                {value: 40, name: '阶段2'},
                {value: 20, name: '阶段3'}
            ]
        }
    ]
};
// 渲染图表
myChart.setOption(option);

5. 実行効果の表示
   上記のコードを保存し、ブラウザで HTML ファイルを開くと、生成された A が表示されます。マルチレベルファネルチャート。

3. 概要
ECharts は、開発者が使用できる豊富なチャート タイプを提供し、関連するパラメーターを構成することで、さまざまなデータ視覚化チャートを作成できます。マルチレベルファネルチャートはデータプロセスと変換率を視覚的に表示できるため、データ変換プロセスをより深く理解するのに役立ちます。この記事で紹介した手順とコード例を使用すると、複数レベルのファネル チャートをすばやく作成できます。この記事が皆さんのデータ視覚化の学習と実践に役立つことを願っています。

以上がECharts ファネル チャート (マルチレベル): データ フローとコンバージョン率を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。