한국어
한국어
인터넷 기술의 발전으로 데이터 시각화는 데이터 분석 및 의사 결정 지원에 없어서는 안될 부분이되었습니다. 직관적이고 이해하기 쉬운 디스플레이 방법으로서 통계 차트가 널리 사용되었습니다. Echarts는 풍부한 차트 유형과 기능을 갖춘 강력하고 오픈 소스 차트 라이브러리이며 개발자가 널리 선호합니다.
이 기사는 특정 예제를 결합하여 Echarts 및 PHP 인터페이스를 사용하여 레이블 및 범례로 통계 차트를 생성하는 방법을 설명합니다.
먼저, Echarts 관련 리소스를 프로젝트에 도입해야합니다. 공식 웹 사이트 또는 GitHub에서 최신 버전을 얻고 프로젝트 디렉토리에 배치하고 해당 JS 및 CSS 파일을 HTML에 소개 할 수 있습니다.
PHP 측면에서 데이터는 일반적으로 데이터베이스 쿼리 또는 API 호출을 통해 얻은 다음 프론트 엔드 사용을 위해 JSON 형식으로 변환됩니다. 샘플 데이터는 다음과 같습니다.
$data = [
['name' => '전설1', 'value' => 100],
['name' => '전설2', 'value' => 200],
['name' => '전설3', 'value' => 300],
// ...
];HTML 파일에서 차트를 표시 할 컨테이너 요소를 만듭니다.
<div id="chart" style="width: 600px; height: 400px;"></div>다음으로 JavaScript 코드를 통해 Echarts 인스턴스를 초기화하고 차트를 구성하십시오.
// 소개ECharts도서관
import echarts from 'echarts';
// 컨테이너 요소를 얻으십시오
var chartContainer = document.getElementById('chart');
// 초기화ECharts예
var chart = echarts.init(chartContainer);
// 차트의 구성 항목과 데이터를 설정하십시오
var option = {
title: {
text: '통계 차트',
subtext: '데이터 소스: PHP인터페이스',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: <?=json_encode(array_column($data, 'name'))?>,
},
series: [
{
name: '태그 이름',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: <?=json_encode($data)?>,
label: {
normal: {
show: true,
formatter: '{b} : {c} ({d}%)',
},
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
},
},
},
],
};
// 방금 지정한 구성 항목 및 데이터를 사용하여 차트 표시
chart.setOption(option);코드에서 먼저 Echarts 라이브러리를 소개하고 차트 컨테이너를 가져온 다음 echarts.init () 를 통해 차트 인스턴스를 만듭니다. 옵션 객체는 제목, 프롬프트 상자, 범례 및 차트의 일련의 데이터를 정의합니다. 여기서는 PIE 차트가 사용되며 PHP 인터페이스를 통해 동적으로 생성 된 데이터를 통해 레이블 및 범례가 표시됩니다.
마지막으로 SetOption () 메소드를 호출하여 차트 렌더링을 완료하십시오.
Echarts 및 PHP 인터페이스를 기반으로 통계 차트를 구현하는 주요 단계 :
위의 단계를 통해 데이터 표시 효과 및 사용자 경험을 향상시키기위한 요구에 따라보다 다양하고 풍부한 통계 그래픽을 사용자 정의 할 수 있습니다. 이 기사가 귀하의 데이터 시각화 프로젝트에 도움이되기를 바랍니다.
