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

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

王林

リリース： 2023-12-17 12:47:38

オリジナル

1498 人が閲覧しました

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

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

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

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

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

ECharts のインストール
まず、プロジェクトに ECharts ライブラリをインストールする必要があります。 npm を使用してインストールできます。コマンドは次のとおりです。
```
npm install echarts --save
```
ログイン後にコピー
ECharts ライブラリの導入
使用する必要があるページに ECharts ライブラリを導入します。 html ページ:
```
<script src="echarts.min.js"></script>
```
ログイン後にコピー
コンテナの準備
マルチレベルファネルチャートを表示するコンテナを HTML ページに準備します。例:
```
<div id="chartContainer1" style="width: 600px;height: 400px;"></div>
```
ログイン後にコピー
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);

ログイン後にコピー

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

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

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