ホームページ > 記事 > ウェブフロントエンド > ECharts ファネルチャート: データファネルの変更を表示する方法

ECharts ファネルチャート: データファネルの変更を表示する方法

WBOYオリジナル: 2023-12-18 14:13:42935ブラウズ

ECharts ファネルチャート: データファネルの変更を表示する方法、特定のコードサンプルが必要です

はじめに
ECharts ファネルチャートの基本概念
ECharts ファネルチャートを使用する手順

3.1 データを準備する

まず、次の手順が必要です。必要な表示データを準備します。各ステージのデータには、ステージの名前とステージの値という 2 つの属性が含まれている必要があります。たとえば、次のデータを取得できます。

var data = [
    { name: '访问', value: 100 },
    { name: '浏览', value: 80 },
    { name: '点击', value: 60 },
    { name: '转化', value: 40 },
    { name: '下单', value: 20 },
    { name: '支付', value: 10 }
];

3.2 チャートインスタンスの作成

次に、ECharts チャートインスタンスを作成する必要があります。基本的なファンネルチャートのインスタンスは、次のコードで作成できます。

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

ここで、'chart'

は、ECharts チャートを収容するために使用される HTML 要素の ID です。

3.3 ファネルチャートの構成

ECharts には、ファネルチャートのスタイルをカスタマイズするために使用できる豊富な構成オプションが用意されています。以下は、ファネルチャートの基本的な構成例です。

var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 20
                }
            },
            data: data
        }
    ]
};

上記の構成では、ツールチップの内容と形式を設定し、ファネルチャートの位置とサイズを設定し、データの並べ替え方法を設定し、ラベル等の表示方法

3.4 チャートをレンダリングする最後に、設定をチャートインスタンスに適用し、setOption

メソッドを使用してレンダリングします。

myChart.setOption(option);

完全なコード例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 漏斗图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var data = [
            { name: '访问', value: 100 },
            { name: '浏览', value: 80 },
            { name: '点击', value: 60 },
            { name: '转化', value: 40 },
            { name: '下单', value: 20 },
            { name: '支付', value: 10 }
        ];
        
        var myChart = echarts.init(document.getElementById('chart'));
        
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20
                        }
                    },
                    data: data
                }
            ]
        };
        
        myChart.setOption(option);
    </script>
</body>
</html>

上記のコードを通じて、ブラウザーにファネルチャートを表示し、対話型ツールを通じてデータを操作できます。さらなる分析と探索のために ECharts によって提供される関数。

概要

###

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

JavaScript echarts html

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：極座標系を使用して ECharts にデータを表示する方法次の記事：極座標系を使用して ECharts にデータを表示する方法

続きを見る

ECharts ファネル チャート: データ ファネルの変更を表示する方法

関連記事

ECharts ファネルチャート: データファネルの変更を表示する方法