ECharts 퍼널 차트: 데이터 퍼널 변경 사항을 표시하는 방법-JS 튜토리얼-php.cn

ECharts 퍼널 차트: 데이터 퍼널 변경 사항을 표시하는 방법

WBOY

풀어 주다： 2023-12-18 14:13:42

원래의

985명이 탐색했습니다.

ECharts 퍼널 차트: 데이터 퍼널 변경 사항을 표시하는 방법

ECharts 깔때기형 차트: 데이터 깔때기 변경 사항을 표시하려면 특정 코드 예제가 필요합니다.

소개
깔때기형 차트는 데이터의 프로세스 변경 또는 단계 분석을 표시하는 데 사용할 수 있는 일반적으로 사용되는 데이터 시각화 방법입니다. ECharts는 다양한 대화형 차트를 만드는 데 사용할 수 있는 오픈 소스 JavaScript 데이터 시각화 라이브러리입니다. 이 기사에서는 EChart를 사용하여 데이터의 퍼널 변경 사항을 표시하고 특정 코드 예제를 제공하는 방법을 소개합니다.
ECharts 깔때기형 차트의 기본 개념
깔때기형 차트는 데이터의 깔때기 모양을 나타내는 데 사용되는 특수 차트 유형입니다. 일반적으로 깔때기형 차트의 아래쪽 너비는 시작 데이터를 나타내고 위쪽 너비는 최종 데이터를 나타내며 그 사이의 각 단계 너비는 중간 데이터를 나타냅니다. 깔때기형 차트는 데이터의 프로세스 변화를 정확하게 표시할 수 있어 청중이 데이터의 증가 또는 감소를 직관적으로 이해할 수 있습니다.
ECharts 깔때기형 차트를 사용하는 단계
ECharts를 사용하여 깔때기형 차트를 만드는 것은 일반적으로 다음 단계로 나눌 수 있습니다:

3.1 데이터 준비
먼저 표시해야 할 데이터를 준비해야 합니다. 각 단계의 데이터에는 단계 이름과 단계 값이라는 두 가지 속성이 포함되어야 합니다. 예를 들어 다음과 같은 데이터가 있을 수 있습니다.

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입니다. 'chart'是一个HTML元素的id，用于容纳ECharts图表。

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
        }
    ]
};

로그인 후 복사

在上述配置中，我们可以设置tooltip的内容和格式，设置漏斗图的位置和大小，设置数据的排序方式和标签显示方式等。

3.4 渲染图表
最后，将配置应用到图表实例中，并使用setOption

3.3 깔때기형 차트 구성

```
myChart.setOption(option);
```
로그인 후 복사
위 구성에서는 툴팁의 내용과 형식, 깔때기형 차트의 위치와 크기, 데이터 정렬 방법 및 표시 방법을 설정할 수 있습니다. 라벨 등

3.4 차트 렌더링

마지막으로 차트 인스턴스에 구성을 적용하고 setOption 메서드를 사용하여 렌더링합니다.

<!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 예:

rrreee🎜위 코드를 사용하면 브라우저에 깔때기형 차트를 표시하고 ECharts에서 제공하는 대화형 기능을 통해 데이터를 추가로 분석하고 탐색할 수 있습니다. 🎜🎜🎜요약🎜이 글에서는 ECharts 깔때기형 차트의 기본 개념과 사용 단계를 소개하고 구체적인 코드 예제를 제공합니다. 이 기사가 독자에게 도움이 되고 EChart를 사용하여 데이터의 퍼널 변경 사항을 표시하는 방법에 대한 더 깊은 이해를 제공할 수 있기를 바랍니다. 물론 ECharts에는 독자가 더 자세히 배우고 탐색할 수 있는 다른 많은 강력한 기능이 있습니다. 🎜🎜

위 내용은 ECharts 퍼널 차트: 데이터 퍼널 변경 사항을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!