ECharts 깔때기형 차트(다단계): 데이터 흐름 및 전환율을 표시하는 방법

ECharts 깔때기형 차트(다단계): 데이터 흐름과 전환율을 표시하는 방법, 구체적인 코드 예제가 필요합니다.

소개:
인터넷과 데이터 분석의 발달로 데이터 흐름과 전환율을 분석하고 표시합니다. 전환율이 점점 더 중요해졌습니다. ECharts는 개발자가 사용할 수 있는 다양한 차트 유형을 제공하는 JavaScript 기반 데이터 시각화 라이브러리입니다. 그중 깔때기형 차트는 데이터 흐름과 전환율을 표시하는 데 사용되는 일반적인 차트 유형 중 하나입니다. 이 기사에서는 ECharts를 사용하여 다단계 깔때기형 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 다단계 깔때기형 차트란 무엇입니까? 다단계 깔때기형 차트는 기존 깔때기형 차트의 확장이며 데이터 프로세스 및 전환율을 여러 단계로 표시할 수 있습니다. 각 단계의 유입경로는 프로세스를 나타내며 인접한 두 유입경로 사이에는 전환율 관계가 있습니다. 다단계 깔때기형 차트는 데이터의 흐름 방향과 변환 효과를 보다 직관적으로 표시할 수 있어 데이터 변환 프로세스를 더 잘 이해하는 데 도움이 됩니다.

2. ECharts 다단계 깔때기형 차트를 만드는 단계

1. ECharts 설치

   먼저 프로젝트에 ECharts 라이브러리를 설치해야 합니다. npm을 사용하여 설치할 수 있으며 명령은 다음과 같습니다.
   

   npm install echarts --save

2. ECharts 라이브러리 소개

   사용해야 하는 페이지에 ECharts 라이브러리를 소개하고 html 페이지에 직접 소개할 수 있습니다.
   

   <script src="echarts.min.js"></script>

3. 컨테이너 준비

   다단계 깔때기형 차트를 표시하는 데 사용되는 컨테이너를 html 페이지에서 준비하세요. 예:
   

   <div id="chartContainer1" style="width: 600px;height: 400px;"></div>

JavaScript 코드 작성
4. 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);

실행 효과 표시
5. 위 코드를 저장하고 브라우저에서 html 파일을 열면 생성된 다단계 깔때기형 차트를 볼 수 있습니다.
   

3. 요약

ECharts는 개발자가 사용할 수 있는 다양한 차트 유형을 제공하며 관련 매개변수를 구성하여 다양한 데이터 시각화 차트를 생성할 수 있습니다. 다단계 깔때기형 차트는 데이터 처리 및 전환율을 시각적으로 표시하여 데이터 전환 프로세스를 더 잘 이해할 수 있도록 도와줍니다. 이 기사에 소개된 단계와 코드 예제를 통해 다단계 깔때기형 차트를 빠르게 만들 수 있습니다. 이 글이 모든 분들의 데이터 시각화 학습과 실습에 도움이 되기를 바랍니다.

위 내용은 ECharts 깔때기형 차트(다단계): 데이터 흐름 및 전환율을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!