學會使用ECharts和golang打造令人驚嘆的統計圖表教程-Golang-PHP中文網

學會使用ECharts和golang打造令人驚嘆的統計圖表教程

王林

發布： 2023-12-18 16:06:42

原創

1274 人瀏覽過

學會使用ECharts和golang打造令人驚嘆的統計圖表教程

學會使用ECharts和golang打造令人驚嘆的統計圖表教學

在現代網路時代，資料視覺化是吸引使用者和展示資訊的重要手段之一。而統計圖表作為資料視覺化的一種形式，可以清晰直觀地顯示資料的趨勢和關係。本文將教你如何利用ECharts和golang來創建令人驚嘆的統計圖表，並附有具體程式碼範例。

（一）ECharts簡介

ECharts是百度前端團隊開發的一款基於JavaScript的開源圖表庫。它提供了豐富的圖表類型和靈活的配置選項，使得使用者可以輕鬆地創建各種各樣的統計圖表。 ECharts支援的圖表類型包括折線圖、長條圖、圓餅圖、散佈圖等等。

（二）golang簡介

golang是一種開源的程式語言，由Google開發並於2009年發布。它具有高效、可靠和簡潔的特點，適合用來開發高效能的伺服器端應用程式。在本教程中，我們將使用golang編寫後端程式碼，利用ECharts產生圖表，並透過前後端的資料互動實現統計圖表的展示。

（三）安裝ECharts

下載ECharts庫檔案

你可以從ECharts官網（https://echarts.apache.org/）下載最新的ECharts庫檔案。解壓縮後，將ECharts資料夾放置在你的專案目錄下。

引入ECharts庫檔案

在HTML檔案中，你需要透過script標籤引入ECharts的庫檔案。例如：

<script src="echarts.min.js"></script>

登入後複製

（四）寫golang後端程式碼

安裝golang

首先，你需要安裝golang並設定好環境變數。你可以從golang官網（https://golang.org/）下載最新的golang安裝包，並依照官方文件進行安裝。

建立golang專案

在你的工作目錄下，建立一個新的golang專案。

寫golang程式碼

在專案的go檔案中，寫以下golang程式碼：

package main

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

type Data struct {
    Name  string  `json:"name"`
    Value float64 `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {Name: "数据1", Value: 10},
            {Name: "数据2", Value: 20},
            {Name: "数据3", Value: 30},
            {Name: "数据4", Value: 40},
            {Name: "数据5", Value: 50},
        }
        dataBytes, _ := json.Marshal(data)
        w.Header().Set("Content-Type", "application/json")
        fmt.Fprint(w, string(dataBytes))
    })

    http.ListenAndServe(":8080", nil)
}

登入後複製

執行golang程式

在命令列中，進入專案目錄，並執行以下命令來執行golang程式：

go run main.go

登入後複製

（五）編寫HTML和JavaScript程式碼

建立一個HTML文件，並在文件中編寫以下內容：




    统计图表


    

    <script src="echarts.min.js"></script>
    <script>
        var chart = echarts.init(document.getElementById('chart'));

        // 发送请求获取数据
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                // 生成图表
                var option = {
                    title: {
                        text: '统计图表'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(function (item) {
                            return item.name;
                        })
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(function (item) {
                            return item.value;
                        }),
                        type: 'bar'
                    }]
                };
                chart.setOption(option);
            }
        };
        xhr.open('GET', 'http://localhost:8080/', true);
        xhr.send();
    </script>

登入後複製