ホームページ >ウェブフロントエンド >jsチュートリアル >ファネル ローズ チャートを使用して ECharts でデータの割合と変換率を表示する方法
ファネル ローズ チャートを使用して ECharts でデータの割合と変換率を表示する方法
- 王林オリジナル
- 2023-12-18 08:10:101406ブラウズ
ファネル ローズ チャートを使用して 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 サイトの他の関連記事を参照してください。