ファネルローズチャートを使用して ECharts でデータの割合と変換率を表示する方法-jsチュートリアル-php.cn

ファネルローズチャートを使用して ECharts でデータの割合と変換率を表示する方法

王林

リリース： 2023-12-18 08:10:10

オリジナル

1366 人が閲覧しました

ファネルローズチャートを使用して ECharts でデータの割合と変換率を表示する方法

ファネルローズチャートを使用して ECharts でデータの割合とコンバージョン率を表示する方法

概要:
ファネルローズチャートは、一般的に使用されるデータ視覚化グラフです。 . データの割合やコンバージョン率をわかりやすく表示できます。 ECharts では、簡単なデータ処理と構成により、ファネルローズチャートの表示効果を簡単に実現できます。この記事では、ECharts でファネルローズチャートを使用してデータの割合と変換率を表示する方法と、対応するコード例を紹介します。

ステップ 1: データを準備する
まず、表示するデータを準備する必要があります。次のようなデータがあるとします。

var data = [
  { value: 100, name: '阶段1' },
  { value: 80, name: '阶段2' },
  { value: 60, name: '阶段3' },
  { value: 40, name: '阶段4' },
  { value: 20, name: '阶段5' }
];

ログイン後にコピー

このうち、value は各ステージのデータ量を表し、name は各ステージの名前を表します。

ステップ 2: チャートを構成する
次に、ファネルローズチャートのスタイルとプロパティを構成する必要があります。以下に簡単な構成例を示します。

var option = {
  series: [
    {
      name: '漏斗玫瑰图',
      type: 'pie',
      radius: ['40%', '55%'],
      center: ['50%', '50%'],
      roseType: 'radius',
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: data
    }
  ]
};

ログイン後にコピー

構成の重要なポイントは次のとおりです。

type は、グラフの種類を「pie」 (円グラフ) として指定します。
radius は、円グラフの内側と外側の半径を設定します。ここでは配列で表されます。 ['40%', '55%'] は、内側の半径が 40%、外側の半径が 55% であることを意味します。
center は、円グラフの中心点の位置を設定します。ここでは配列で表されます。 ['50%', '50%'] はキャンバスの中心を意味します。
roseType は、円グラフのタイプを「radius」に設定します。これはファネルローズグラフを表します。
dataは円グラフのデータソースを設定するもので、ここでは上記で用意したデータを使用します。

ステップ 3: チャートを描画する
最後に、ECharts インスタンスを通じてチャートを描画する必要があります。 HTML ページで、次のコードを含むスクリプトタグを作成します。

var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);

ログイン後にコピー

上記のコードでは、document.getElementById('chart') メソッドを使用して、グラフを表示するために使用されるコンテナ div を取得します。 HTML ページを echarts.init() メソッドに渡して ECharts インスタンスを作成します。次に、setOption() メソッドを呼び出して、インスタンスの構成項目を設定します。

要約すると、上記の 3 つの手順を通じて、ファネルローズチャートを使用して ECharts 内のデータの割合とコンバージョン率を表示できます。完全なコードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>漏斗玫瑰图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
      var data = [
        { value: 100, name: '阶段1' },
        { value: 80, name: '阶段2' },
        { value: 60, name: '阶段3' },
        { value: 40, name: '阶段4' },
        { value: 20, name: '阶段5' }
      ];

      var option = {
        series: [
          {
            name: '漏斗玫瑰图',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: data
          }
        ]
      };

      var myChart = echarts.init(document.getElementById('chart'));
      myChart.setOption(option);
    </script>
  </body>
</html>

ログイン後にコピー

上記のコードを通じて、ブラウザで HTML ページを実行すると、データとコンバージョンの割合を示す「ファネルローズチャート」と呼ばれるグラフが表示されます。レート。

結論:
この記事では、ファネルローズチャートを使用して ECharts 内のデータの割合と変換率を表示する方法を紹介します。簡単なデータ処理と構成により、ファンネルローズチャートの表示効果を簡単に実現できます。この記事を通じて読者が ECharts の基本的な使用スキルを理解し、実際のデータ視覚化プロジェクトに適用および拡張できることを願っています。

以上がファネルローズチャートを使用して ECharts でデータの割合と変換率を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。