PHP 및 VUE.JS 구현 데이터 시각화 : 통계 차트 분석 자습서

gitbox 2025-06-12

소개

정보 시대에, 데이터 분석 및 시각화는 모든 생계에서 중요한 링크가되었습니다. 웹 개발에서 PHP와 VUE.JS의 조합은 개발자에게 강력한 프론트 엔드 및 백엔드 분리 기능을 제공합니다. 이 기사는 통계 차트를 통해 데이터 시각적 분석을 달성하기 위해 PHP를 백엔드 및 vue.js로 사용하는 방법을 보여줍니다.

1. 왜 PHP 및 VUE.JS를 선택합니까?

PHP는 널리 사용되는 서버 측 스크립팅 언어이며 vue.js는 사용자 인터페이스를 구축하기위한 점진적인 JavaScript 프레임 워크입니다. 이 둘을 결합한 장점은 전면 및 후면에서 분리 된 개발 모델을 달성하여 개발 효율성과 시스템 유연성을 향상시킬 수 있다는 것입니다. Vue.js는 PHP를 통해 프론트 엔드 디스플레이를 담당하므로 개발 프로세스를보다 효율적이고 유지 관리하기 쉽습니다.

2. 준비 작업

개발을 시작하기 전에 PHP 환경이 설치되고 프로젝트의 작업 디렉토리가 작성되었는지 확인하십시오. 다음으로 NPM을 사용하여 vue.js 및 Echarts 및 Axios를 포함한 일반적으로 사용되는 데이터 시각화 라이브러리를 설치하십시오. 다음은 필요한 라이브러리의 설치 명령입니다.

npm install vue
NPM ECHARTS 설치
NPM AXISOS 설치

III. 프로젝트 디렉토리 구조

프로젝트 파일을 구성하기 위해 다음 디렉토리 구조를 작성하십시오.

CSS/
    -Style.css
JS/
    -Main.js
PHP/
    - data.php
index.html

CSS 디렉토리에서 스타일 정의를 위해 Style.css 파일을 만듭니다.
JS 디렉토리에서 main.js 파일을 만들어 vue.js의 논리를 작성하십시오.
PHP 디렉토리에서 백엔드 데이터를 시뮬레이션하려면 data.php를 작성하십시오.
index.html은 프로젝트의 입력 파일로 사용됩니다.

4. 데이터 준비

`data.php` 파일에서, 우리는 일부 백엔드 데이터를 시뮬레이션 할 수 있습니다. 일부 백엔드 데이터를 시뮬레이션 할 수 있으며,이 백엔드 데이터는 통계 차트를 생성하는 데 프론트 엔드에서 사용됩니다. 예를 들어:

<?php
$data = [
    ['name' => &#39;a&#39;, &#39;value&#39;=> 100],
    [ &#39;name&#39;=> &#39;b&#39;, &#39;value&#39;=> 200],
    [ &#39;name&#39;=> &#39;c&#39;, &#39;value&#39;=> 300],
    [ &#39;name&#39;=> &#39;d&#39;, &#39;value&#39;=> 400],
    [ &#39;name&#39;=> &#39;e&#39;, &#39;value&#39;=> 500]
];
echo json_encode ($ data);
?>

위의 코드는 JSON_ENCODE 메소드를 통해 이름과 값을 포함하는 배열을 JSON 형식으로 변환하고 프론트 엔드로 반환 된 데이터를 시뮬레이션합니다.

vue.js 코드

`main.js` 파일에서 먼저 필요한 라이브러리를 소개하고 vue.js에 대한 코드를 작성하십시오.

&#39;vue&#39;에서 vue 가져 오기;
&#39;axios&#39;에서 axios 가져 오기;
&#39;Echarts&#39;에서 Echarts를 가져옵니다.

새로운 vue ({
   el : &#39;#app&#39;,
   데이터 : {
       ChartData : []
   },
   생성 된 () {
       this.fetchData ();
   },
   방법 : {
       fetchdata () {
           axios.get ( &#39;./ php/data.php&#39;)
               . 그런데 (응답 => {
                   this.chartdata = response.data;
                   this.drawchart ();
               })
               .catch (error => {
                   Console.log (오류);
               });
       },
       drawchart () {
           var chart = echarts.init (document.getElementById ( &#39;Chart-Container&#39;));
           var 옵션 = {
               제목: {
                   텍스트 : &#39;통계 차트&#39;
               },
               Xaxis : {
                   유형 : &#39;카테고리&#39;,
                   데이터 : this.chartdata.map (item => item.name)
               },
               yaxis : {
                   유형 : &#39;value&#39;
               },
               시리즈: [{
                   데이터 : this.chartdata.map (item => item.value),
                   유형 : &#39;바&#39;
               }]
           };
           Chart.SetOption (옵션);
       }
   }
});

이 코드는 Axios를 통해 백엔드 데이터를 가져오고 Echarts를 사용하여 막대 차트를 생성합니다.

6. HTML 페이지 코드

`index.html`에서 필요한 CSS 및 JS 파일을 소개하고 vue.js의 루트 요소를 만듭니다.

<meta charset="utf-8">
<title>PHP 및 VUE.JS 실용 자습서</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="./js/main.js"></script>
<div id="app">
    <div id="chart-container"></div>
</div>

HTML에서 우리는 a를 만듭니다

요소는 vue의 루트 노드 역할을하며 추가되었습니다.

차트를 표시하는 데 사용됩니다.

7. 프로젝트를 실행하십시오

터미널에 프로젝트 디렉토리를 입력하고 다음 명령을 실행하여 프로젝트를 시작하십시오.

NPM 달리기 서브

성공적인 실행 후 http : // localhost : 8080을 방문하여 생성 된 차트를보십시오.

8. 요약

이 튜토리얼을 통해 PHP 및 Vue.js 프레임 워크를 결합하여 데이터 시각 분석 기능을 구현하는 방법을 보여줍니다. PHP를 통해 백엔드 데이터를 시뮬레이션하고 vue.js 및 echarts 라이브러리를 사용하여 통계 차트를 생성하여 프론트 엔드 데이터 상호 작용 및 시각적 디스플레이를 성공적으로 실현합니다. 이 기사가 초보자가 차트를 사용하여 데이터 분석 결과를 표시 하고이 기술을 마스터하는 방법을 이해하는 데 도움이되기를 바랍니다.

json_encode