깔때기형 장미 차트를 사용하여 ECharts에 데이터 비율 및 전환율을 표시하는 방법
- 王林원래의
- 2023-12-18 08:10:101398검색
깔때기 장미 차트를 사용하여 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은 원형 차트 유형을 깔때기형 장미 차트를 나타내는 '반경'으로 설정합니다.
- data는 파이 차트의 데이터 소스를 설정합니다. 위에서 준비한 데이터가 여기에 사용됩니다.
3단계: 차트 그리기
마지막으로 ECharts 인스턴스를 통해 차트를 그려야 합니다. HTML 페이지에서 다음 코드를 포함하는 스크립트 태그를 생성합니다:
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);위 코드에서는 document.getElementById('chart') 메소드를 사용하여 HTML 페이지에 차트를 표시하는 데 사용되는 컨테이너 div를 가져오고 전달 ECharts 인스턴스를 생성하려면 echarts.init() 메소드를 제공하십시오. 그런 다음 setOption() 메서드를 호출하여 인스턴스에 대한 구성 항목을 설정합니다.
요약하자면, 위의 세 단계를 통해 깔때기형 장미 차트를 사용하여 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 페이지를 실행하면 데이터의 비율과 전환율을 보여주는 "Funnel Rose Chart"라는 차트를 볼 수 있습니다.
결론:
이 기사에서는 퍼널 로즈 차트를 사용하여 ECharts에서 데이터 비율과 전환율을 표시하는 방법을 소개합니다. 간단한 데이터 처리 및 구성을 통해 깔때기 장미 차트의 표시 효과를 쉽게 얻을 수 있습니다. 독자들이 이 글을 통해 기본적인 ECharts 활용 기술을 이해하고, 이를 실제 데이터 시각화 프로젝트에 적용하고 확장할 수 있기를 바랍니다.
위 내용은 깔때기형 장미 차트를 사용하여 ECharts에 데이터 비율 및 전환율을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!