如何使用ECharts和golang輕鬆繪製多樣化的統計圖表-Golang-PHP中文網

首頁

後端開發

Golang

如何使用ECharts和golang輕鬆繪製多樣化的統計圖表

王林

Dec 18, 2023 pm 03:40 PM

golang echarts 統計圖表

如何使用ECharts和golang輕鬆繪製多樣化的統計圖表

隨著資料分析需求的不斷增加，繪製多樣化的統計圖表已經成為了非常常見的需求。 ECharts和golang是兩個非常不錯的工具，它們可以幫助我們輕鬆地繪製多樣化的圖表。以下我將介紹如何使用ECharts和golang來達到這個目的，同時提供一些具體的程式碼範例。

安裝並使用ECharts

在使用ECharts之前，我們需要先安裝它。可以在官方網站（https://echarts.apache.org）上下載最新的穩定版，並依照指示進行安裝。安裝完成後，我們就可以開始使用ECharts來繪製各種類型的圖表了。

在使用ECharts時，我們需要準備一個包含所有資料的數組，然後將其傳遞給ECharts，即可自動產生對應的圖表。以下是一個簡單的範例程式碼，它可以繪製一個長條圖。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
        var data = [5, 20, 36, 10, 10, 20];
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            xAxis: {
                data: ['A', 'B', 'C', 'D', 'E', 'F']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

登入後複製

可以看到，這個範例程式碼包含一個HTML頁面，其中插入了一個包含資料的JavaScript陣列。 ECharts會自動將資料轉換成一個長條圖，並渲染到ID為‘main’的元素上。

此外，ECharts還提供了各種類型的圖表，例如折線圖、圓餅圖、散佈圖等。我們可以根據實際需求選擇不同的圖表類型。

使用golang來準備資料

golang是一種非常流行的程式語言，它支援多種資料結構以及各種運算操作，非常適合用於處理數據。在使用ECharts之前，我們通常需要先準備好所有要繪製的圖表數據，並將其轉換成可以被ECharts識別的格式。 golang可以幫助我們完成這個工作。

以下是一個簡單的golang程序，它可以產生一個包含100個隨機數的數組，並將其輸出成json格式的資料。

package main

import (
    "encoding/json"
    "fmt"
    "math/rand"
)

type Data struct {
    Id    int    `json:"id"`
    Value int    `json:"value"`
}

func main() {
    data := make([]Data, 0)
    for i := 0; i < 100; i++ {
        data = append(data, Data{Id: i, Value: rand.Intn(100)})
    }
    jsonData, err := json.Marshal(data)
    if err != nil {
        fmt.Println("json encode error")
        return
    }
    fmt.Println(string(jsonData))
}

登入後複製

在這個程式中，我們使用rand套件產生了一個包含100個隨機數的數組，然後將其轉換成了json格式的資料。這個json資料可以被ECharts直接識別，並用於繪製各種類型的圖表。

整合ECharts和golang

有了ECharts和golang，我們就可以開始整合兩者，並繪製各種類型的圖表了。下面是一個簡單的golang程序，它可以產生一個包含隨機資料的json數組，並將其傳遞給一個HTML頁面。在HTML頁面中，我們可以使用ECharts來將這些資料繪製成一個長條圖。

golang程式碼：

package main

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

type Data struct {
    Id    int    `json:"id"`
    Value int    `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := make([]Data, 0)
        for i := 0; i < 10; i++ {
            data = append(data, Data{Id: i, Value: rand.Intn(100)})
        }
        jsonData, err := json.Marshal(data)
        if err != nil {
            fmt.Println("json encode error")
            return
        }
        w.Header().Set("Content-Type", "text/html; charset=utf-8")
        fmt.Fprintf(w, `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8">
                <title>柱状图示例</title>
                <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
            </head>
            <body>
                <div id="main" style="width:600px;height:400px;"></div>
                <script>
                    var data = %s;
                    var xAxisData = [];
                    var seriesData = [];
                    for (var i = 0; i < data.length; i++) {
                        xAxisData.push(data[i].id);
                        seriesData.push(data[i].value);
                    }
                    var myChart = echarts.init(document.getElementById('main'));
                    var option = {
                        title: {
                            text: '柱状图示例'
                        },
                        tooltip: {},
                        xAxis: {
                            data: xAxisData
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: seriesData
                        }]
                    };
                    myChart.setOption(option);
                </script>
            </body>
            </html>
        `, jsonData)
    })
    http.ListenAndServe(":8080", nil)
}

登入後複製

在這個程式碼中，我們使用了net/http套件來建立了一個簡單的web伺服器，並在存取根目錄時輸出了包含隨機資料的json數組。這個json陣列可以被HTML頁面直接使用。

HTML頁面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
        var data = [{"id":0,"value":36},{"id":1,"value":52},{"id":2,"value":64},{"id":3,"value":89},{"id":4,"value":48},{"id":5,"value":52},{"id":6,"value":10},{"id":7,"value":75},{"id":8,"value":86},{"id":9,"value":58}];
        var xAxisData = [];
        var seriesData = [];
        for (var i = 0; i < data.length; i++) {
            xAxisData.push(data[i].id);
            seriesData.push(data[i].value);
        }
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            xAxis: {
                data: xAxisData
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: seriesData
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

登入後複製

在這個HTML頁面中，我們使用了JSON.parse()方法將golang產生的json資料解析成javascript數組，然後將其傳遞給了ECharts。最終，我們得到了一個漂亮的長條圖。

以上是如何使用ECharts和golang輕鬆繪製多樣化的統計圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

如何使用 Golang 安全地讀取和寫入檔案？ Jun 06, 2024 pm 05:14 PM

在Go中安全地讀取和寫入檔案至關重要。指南包括：檢查檔案權限使用defer關閉檔案驗證檔案路徑使用上下文逾時遵循這些準則可確保資料的安全性和應用程式的健全性。

如何為 Golang 資料庫連線配置連線池？ Jun 06, 2024 am 11:21 AM

如何為Go資料庫連線配置連線池？使用database/sql包中的DB類型建立資料庫連線；設定MaxOpenConns以控制最大並發連線數；設定MaxIdleConns以設定最大空閒連線數；設定ConnMaxLifetime以控制連線的最大生命週期。

如何在 Golang 中將 JSON 資料保存到資料庫中？ Jun 06, 2024 am 11:24 AM

可以透過使用gjson函式庫或json.Unmarshal函數將JSON資料儲存到MySQL資料庫中。 gjson函式庫提供了方便的方法來解析JSON字段，而json.Unmarshal函數需要一個目標類型指標來解組JSON資料。這兩種方法都需要準備SQL語句和執行插入操作來將資料持久化到資料庫中。

Golang框架與Go框架：內部架構與外部特性對比 Jun 06, 2024 pm 12:37 PM

GoLang框架與Go框架的差異體現在內部架構與外部特性。 GoLang框架基於Go標準函式庫，擴充其功能，而Go框架由獨立函式庫組成，以實現特定目的。 GoLang框架更靈活，Go框架更容易上手。 GoLang框架在效能上稍有優勢，Go框架的可擴充性更高。案例：gin-gonic（Go框架）用於建立RESTAPI，而Echo（GoLang框架）用於建立Web應用程式。

從前端轉型後端開發，學習Java還是Golang更有前景？ Apr 02, 2025 am 09:12 AM

後端學習路徑：從前端轉型到後端的探索之旅作為一名從前端開發轉型的後端初學者，你已經有了nodejs的基礎，...

golang框架開發實戰教學：常見疑問解答 Jun 06, 2024 am 11:02 AM

Go框架開發常見問題：框架選擇：取決於應用需求和開發者偏好，如Gin（API）、Echo（可擴展）、Beego（ORM）、Iris（效能）。安裝和使用：使用gomod指令安裝，導入框架並使用。資料庫互動：使用ORM庫，如gorm，建立資料庫連線和操作。身份驗證和授權：使用會話管理和身份驗證中間件，如gin-contrib/sessions。實戰案例：使用Gin框架建立一個簡單的部落格API，提供POST、GET等功能。