ECharts 원형 차트(링): 데이터 비율 및 구조적 변화를 표시하는 방법
ECharts는 꺾은선형 차트, 막대형 차트, 분산형 차트, 지도 등 다양한 차트 유형을 제공하는 JavaScript 기반 데이터 시각화 라이브러리입니다. , 등. 그 중 원형 차트는 데이터의 비율과 구조적 변화를 표시하는 데 사용할 수 있는 일반적으로 사용되는 차트 유형입니다. 이 기사에서는 ECharts 원형 차트를 사용하여 데이터 비율과 구조적 변화를 표시하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 데이터 형식
ECharts 원형 차트를 사용하기 전에 데이터를 준비하고 데이터 형식을 ECharts에서 요구하는 형식으로 변환해야 합니다. 원형 차트에서 데이터 형식은 일반적으로 다음 방법을 채택합니다.
data:[
{name:'数据1',value:100},
{name:'数据2',value:200},
{name:'数据3',value:300},
{name:'数据4',value:400}
]여기서 name은 데이터의 이름을 나타내고 value는 데이터의 값을 나타냅니다. 데이터의 값은 일반적으로 숫자 유형이라는 점에 유의해야 합니다. 문자열 유형인 경우에는parseInt() 또는parseFloat()를 사용하여 변환해야 합니다.
2. 기본 원형 차트
다음은 ECharts를 사용하여 기본 원형 차트를 그리는 방법을 보여줍니다. 먼저 ECharts 라이브러리와 테마를 도입하고, 차트를 표시할 DOM 요소를 생성하고, ECharts 인스턴스를 초기화해야 합니다. 그런 다음 제목, 범례, 색상 등을 포함한 원형 차트의 기본 구성을 설정합니다. 마지막으로 데이터는 렌더링을 위해 원형 차트로 전달됩니다.
HTML 코드:
<div id="pie1" style="width: 600px;height:400px;"></div>
JavaScript 코드:
// 引入ECharts库和主题
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>
// 创建一个DOM元素用于显示图表
var chart1 = echarts.init(document.getElementById('pie1'),'macarons');
// 设置饼图的基本配置
var option1 = {
title: {
text: '基本饼图示例',
subtext: '数据来自Demo',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data:['数据1','数据2','数据3','数据4']
},
series: [
{
name:'饼图',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:100, name:'数据1'},
{value:200, name:'数据2'},
{value:300, name:'数据3'},
{value:400, name:'数据4'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 将数据传入到饼图中进行渲染
chart1.setOption(option1);위 코드에는 차트 제목, 데이터팁, 범례, 파이 차트 반경, 데이터 등이 설정되어 있습니다. 파이 차트의 효과는 다음과 같습니다:
3 링 파이 차트
링. 파이 차트(Pie Chart)는 기본 파이 차트의 변형으로 파이 차트의 가운데 부분을 파내어 도넛 모양의 도형을 형성한 것입니다. ECharts에서는 원형 차트의 innerRadius 속성을 설정하여 이 효과를 얻을 수 있습니다. 아래 예에서는 ECharts를 사용하여 도넛 원형 차트를 그리는 방법을 보여줍니다.
HTML 코드:
<div id="pie2" style="width: 600px;height:400px;"></div>
JavaScript 코드:
// 创建一个DOM元素用于显示图表
var chart2 = echarts.init(document.getElementById('pie2'),'macarons');
// 设置饼图的基本配置
var option2 = {
title: {
text: '环形饼图示例',
subtext: '数据来自Demo',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data:['数据1','数据2','数据3','数据4']
},
series: [
{
name:'饼图',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:100, name:'数据1'},
{value:200, name:'数据2'},
{value:300, name:'数据3'},
{value:400, name:'数据4'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
// 设置内半径
innerRadius:'50%'
}
]
};
// 将数据传入到饼图中进行渲染
chart2.setOption(option2);위 코드는 계열에 innerRadius 속성이 설정되어 있다는 점을 제외하면 기본 원형 차트의 코드와 거의 동일합니다. 이 원형 원형 차트의 효과는 다음과 같습니다.
4. 데이터 구조 변경
파이 데이터의 비율을 표시하는 것 외에도 그래프를 사용하여 데이터 구조의 변화를 표시할 수도 있습니다. ECharts에서는 데이터를 수정하고 다시 렌더링하여 이 효과를 얻을 수 있습니다. 다음 예에서는 원형 차트에서 데이터를 조작하여 데이터 구조 변경의 효과를 표시하는 방법을 보여줍니다.
HTML 코드:
<div id="pie3" style="width: 600px;height:400px;"></div>
JavaScript 코드:
// 数据源
var data1 = [
{value:100, name:'数据1'},
{value:200, name:'数据2'},
{value:300, name:'数据3'},
{value:400, name:'数据4'}
];
var data2 = [
{value:450, name:'数据5'},
{value:250, name:'数据6'},
{value:200, name:'数据7'},
{value:150, name:'数据8'}
];
// 创建一个DOM元素用于显示图表
var chart3 = echarts.init(document.getElementById('pie3'),'macarons');
// 设置饼图的基本配置
var option3 = {
title: {
text: '数据结构变化示例',
subtext: '数据来自Demo',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data:['数据1','数据2','数据3','数据4']
},
series: [
{
name:'饼图',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:data1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
innerRadius:'50%'
}
]
};
// 将数据1传入到饼图中进行渲染
chart3.setOption(option3);
// 点击事件
chart3.on('click', function (params) {
// alert(params.name);
if(params.name=='数据1'){
option3.legend.data = ['数据5','数据6','数据7','数据8'];
option3.series[0].data = data2;
}else{
option3.legend.data = ['数据1','数据2','数据3','数据4'];
option3.series[0].data = data1;
}
chart3.setOption(option3);
});위 코드에서는 각각 두 개의 서로 다른 데이터 구조를 나타내는 두 개의 데이터 소스 data1과 data2를 정의합니다. 파이 차트에 클릭 이벤트가 설정됩니다. 파이 차트를 클릭하면 클릭한 데이터 이름을 기준으로 판단됩니다. 클릭이 데이터1의 데이터 1인 경우 범례 및 시리즈의 데이터가 데이터2로 수정됩니다. 그렇지 않으면 data1 데이터 구조로 수정하세요. 마지막으로 setOption() 메서드를 호출하여 수정된 차트를 다시 렌더링합니다. 이 데이터 구조 변경의 효과는 아래 그림에 나와 있습니다.
요약하자면, 이 글은 ECharts 사용 방법을 소개하고 원형 차트를 그리고 구체적인 코드 예제를 제공합니다. 기본 원형 차트 및 링 원형 차트 외에도 원형 차트에서 데이터를 조작하여 데이터 구조 변경의 효과를 표시하는 방법도 보여줍니다. 독자는 자신의 필요와 데이터 형식에 따라 해당 수정 및 최적화를 수행할 수 있습니다.
위 내용은 ECharts 원형 차트(링): 데이터 비율 및 구조적 변화를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
