ECharts 퍼널 차트: 데이터 퍼널 변경 사항을 표시하는 방법
- WBOY원래의
- 2023-12-18 14:13:42935검색
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
- ECharts는 깔때기형 차트의 스타일을 사용자 정의하는 데 사용할 수 있는 다양한 구성 옵션을 제공합니다. 다음은 기본 깔때기형 차트 구성 예입니다.
myChart.setOption(option);
위 구성에서는 툴팁의 내용과 형식, 깔때기형 차트의 위치와 크기, 데이터 정렬 방법 및 표시 방법을 설정할 수 있습니다. 라벨 등
마지막으로 차트 인스턴스에 구성을 적용하고 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 예:
위 내용은 ECharts 퍼널 차트: 데이터 퍼널 변경 사항을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.