데이터 시각화가 널리 적용되면서 뛰어난 시각화 라이브러리인 ECharts도 점점 더 주목을 받고 있습니다. 그 중 원형 차트는 데이터의 비율을 표시하는 데 널리 사용됩니다. 이 기사에서는 ECharts 원형 차트를 사용하여 데이터 비율을 표시하고 특정 코드 예제를 제공하는 방법을 소개합니다.
1. ECharts 파이 차트의 기본 개념
먼저 파이 차트의 기본 개념을 이해해야 합니다. 파이 차트는 데이터의 비율을 나타내는 데 자주 사용됩니다. 특정 값을 각도 크기로 변환한 후 섹터 영역의 크기로 표시합니다. 각 섹터의 크기는 수치에 비례합니다.
2. ECharts 원형 차트 구현 방법
ECharts를 사용하여 원형 차트를 그리려면 먼저 ECharts 라이브러리를 소개하고 원형 차트를 표시하기 위해 지정된 크기의 div 태그를 만들어야 합니다. 구체적인 코드는 다음과 같습니다.
<style type="text/css">
#myChart {
width: 400px;
height: 400px;
}
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>그 중 스타일 태그는 파이 차트가 위치한 div 태그의 크기를 지정하는 데 사용됩니다. 스크립트 태그는 ECharts 라이브러리의 최소 버전을 소개합니다.
그런 다음 JavaScript 코드를 통해 원형 차트를 구현해야 합니다. 구체적인 코드는 다음과 같습니다.
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: '饼图示例',
left: 'center'
},
tooltip: {},
legend: {
data:['数据1', '数据2', '数据3']
},
series: [
{
name:'数据占比',
type:'pie',
radius: '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'数据1'},
{value:310, name:'数据2'},
{value:234, name:'数据3'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);위 코드에서는 먼저 echarts.init() 메서드를 사용하여 ECharts 인스턴스를 초기화합니다. 그런 다음 원형 차트에 필요한 다양한 속성과 데이터를 정의하는 JavaScript 개체 옵션을 정의합니다. 마지막으로 setOption() 메소드를 사용하여 이 옵션 객체를 ECharts 인스턴스에 적용하여 원형 차트를 생성합니다.
특히 옵션 개체에는 다음 속성이 포함됩니다.
ECharts 원형 차트는 기본 데이터 표시 외에도 다양한 스타일 설정 옵션을 제공하며 해당 속성을 수정하여 다양한 스타일의 원형 차트를 구현할 수 있습니다.
내부 및 외부 반경series: [
{
type: 'pie',
radius: ['50%', '70%'],
data: [
{value: 335, name: '数据1'},
{value: 310, name: '数据2'},
{value: 234, name: '数据3'},
{value: 135, name: '数据4'},
{value: 1548, name: '数据5'}
]
}
]위 코드에서 radius 속성에는 배열이 포함되어 있으며, 배열의 두 값은 각각 내부 반경과 외부 반경의 백분율을 나타냅니다. 이 예에서는 내부 반경이 50%이고 외부 반경이 70%입니다.
범례 위치legend: {
x: 'left',
y: 'center',
orient: 'vertical',
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
}위 코드에서 x 속성은 범례의 가로 위치를 왼쪽으로 설정하고, y 속성은 범례의 세로 위치를 가운데로 설정하며, orient 속성은 범례의 방향을 설정합니다. 수직 방향으로.
그림자 효과itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}위 코드에서 ShadowBlur는 그림자의 흐림 정도를 나타내고,shadowOffsetX 및 ShadowOffsetY는 그림자의 가로 및 세로 오프셋을 나타내며,shadowColor는 그림자의 색상을 나타냅니다.
4. ECharts 원형 차트의 예
아래에서는 위에서 언급한 기본 데이터와 스타일 설정이 포함된 특정 ECharts 원형 차트 예를 제공합니다. 코드는 다음과 같습니다.
<style type="text/css">
#myChart {
width: 400px;
height: 400px;
}
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: '饼图示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
top: 20,
data:['数据1', '数据2', '数据3', '数据4', '数据5']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data:[
{value:335, name:'数据1'},
{value:310, name:'数据2'},
{value:234, name:'数据3'},
{value:135, name:'数据4'},
{value:1548, name:'数据5'}
]
}
]
};
myChart.setOption(option);
</script>이 파이 차트에는 다음 기능이 포함되어 있습니다.
범례를 추가하고 범례 위치를 왼쪽 상단으로 조정합니다.위 내용은 ECharts 원형 차트: 데이터 비율을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
