처음부터 시작하기: ECharts와 golang을 사용하여 아름다운 통계 차트 만들기-Golang-php.cn

처음부터 시작하기: ECharts와 golang을 사용하여 아름다운 통계 차트 만들기

PHPz

풀어 주다： 2023-12-17 09:35:36

원래의

1195명이 탐색했습니다.

처음부터 시작하기: ECharts와 golang을 사용하여 아름다운 통계 차트 만들기

처음부터 시작: ECharts와 golang을 사용하여 아름다운 통계 차트 만들기

데이터 시각화 시대에 통계 차트는 데이터를 표시하는 중요한 도구가 되었습니다. 강력하고 사용하기 쉬운 오픈 소스 라이브러리인 ECharts는 다양한 차트 유형과 풍부한 차트 스타일을 제공합니다. 효율적이고 강력한 프로그래밍 언어인 golang과 결합하면 아름답고 대화형 통계 차트를 쉽게 만들 수 있습니다.

이 기사에서는 ECharts와 golang을 사용하여 처음부터 간단한 통계 차트를 만드는 방법을 설명합니다. 우리는 golang을 백엔드 언어로 사용하여 데이터를 가져오고 이를 프런트엔드의 ECharts 라이브러리에 전달하여 차트를 생성합니다. 시작하자!

먼저 golang 및 ECharts 라이브러리를 설치해야 합니다. 아직 golang을 설치하지 않았다면 공식 웹사이트에서 다운로드하여 설치할 수 있습니다: https://golang.org/

다음으로 ECharts 라이브러리를 설치해야 합니다. 공식 문서에서 설치 방법을 찾을 수 있습니다. of ECharts: https:/ /echarts.apache.org/zh/index.html

설치 후 새로운 golang 프로젝트를 생성하고 프로젝트 디렉토리에 main.go라는 파일을 생성합니다. main.go的文件。

第一步，我们需要导入必要的golang包：

package main

import (
    "encoding/json"
    "fmt"
    "net/http"
)

로그인 후 복사

第二步，我们创建一个简单的数据结构，表示我们的统计数据：

type Data struct {
    Label string `json:"label"`
    Value int    `json:"value"`
}

로그인 후 복사

第三步，我们创建一个handler函数来处理HTTP请求，并将数据以JSON格式返回给前端：

func handler(w http.ResponseWriter, r *http.Request) {
    data := []Data{
        {Label: "Apple", Value: 10},
        {Label: "Banana", Value: 20},
        {Label: "Orange", Value: 15},
    }

    jsonData, err := json.Marshal(data)
    if err != nil {
        fmt.Println("Error:", err)
        return
    }

    w.Header().Set("Content-Type", "application/json")
    w.Write(jsonData)
}

로그인 후 복사

第四步，我们创建一个main函数，并启动一个HTTP服务器来监听请求：

func main() {
    http.HandleFunc("/data", handler)
    http.ListenAndServe(":8080", nil)
}

로그인 후 복사

接下来，我们回到ECharts的前端部分。在项目目录下创建一个名为index.html的文件，并在其中加入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        fetch('/data')
            .then(response => response.json())
            .then(data => {
                const chart = echarts.init(document.getElementById('chart'));
                
                const options = {
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.label),
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        type: 'bar',
                        data: data.map(item => item.value),
                    }],
                };
                
                chart.setOption(options);
            });
    </script>
</body>
</html>

로그인 후 복사

最后，我们打开终端，进入项目目录并运行go run main.go启动我们的golang服务器。

在浏览器中访问http://localhost:8080

첫 번째 단계에서는 필요한 golang 패키지를 가져와야 합니다.

rrreee

두 번째 단계에서는 통계를 나타내는 간단한 데이터 구조를 만듭니다.

rrreee

세 번째 단계에서는 처리할 핸들러 함수를 만듭니다. HTTP 요청을 수행하고 데이터를 JSON 형식으로 프런트 엔드에 반환합니다. 🎜rrreee🎜네 번째 단계에서는 기본 함수를 만들고 요청을 수신하기 위한 HTTP 서버를 시작합니다. 🎜rrreee🎜다음으로 프런트 엔드로 돌아갑니다. ECharts의 끝 부분. 프로젝트 디렉토리에 index.html라는 파일을 생성하고 다음 코드를 추가합니다: 🎜rrreee🎜마지막으로 터미널을 열고 프로젝트 디렉토리에 들어가서 go run main.go를 실행합니다. golang 서버를 시작합니다. 🎜🎜브라우저에서 http://localhost:8080을 방문하면 통계 차트가 포함된 페이지를 볼 수 있습니다. 이 차트는 막대 차트로 표시되는 데이터를 보여줍니다. 🎜🎜이 간단한 예를 통해 우리는 ECharts와 golang을 사용하여 아름다운 통계 차트를 만드는 방법을 배웠습니다. 필요에 따라 데이터와 차트 유형을 수정할 수 있으며 ECharts는 다양한 요구 사항을 충족하는 다양한 옵션을 제공합니다. 🎜🎜이 기사가 여러분에게 도움이 되기를 바라며, 여러분이 데이터 시각화의 길로 더욱 더 나아가길 바랍니다! 🎜

위 내용은 처음부터 시작하기: ECharts와 golang을 사용하여 아름다운 통계 차트 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!