ECharts和golang實戰: 製作精美的統計圖表教程-Golang-PHP中文網

ECharts和golang實戰: 製作精美的統計圖表教程

WBOY

發布： 2023-12-18 12:52:17

原創

1199 人瀏覽過

ECharts和golang实战: 制作精美的统计图表教程

ECharts和golang實戰: 製作精美的統計圖表教學

導語
資料視覺化是現代Web應用中不可或缺的一部分。 ECharts是一款強大且靈活的開源圖表庫，而golang則是一種強大而快速的程式語言。將這兩者結合起來，可以在Web應用中實現精美的統計圖表效果。本文將向您介紹如何使用ECharts和golang製作精美的統計圖表，並提供具體的程式碼範例。

一、準備工作
在開始之前，我們需要安裝對應的軟體以及載入必要的函式庫。

安裝golang
首先，您需要下載並安裝golang。您可以造訪Golang官方網站（https://golang.org/）下載最新版本的golang，並按照官方指南進行安裝。
安裝ECharts
ECharts可以透過npm進行安裝。在終端機中執行以下命令來安裝ECharts。

npm install echarts --save

登入後複製

建立golang項目
建立一個新的golang項目，並使用下列指令初始化一個新的golang模組。

go mod init your_project_name

登入後複製

然後，使用下列命令安裝必要的程式庫。

go get github.com/gin-gonic/gin

登入後複製

二、建立Web伺服器
在golang中使用gin框架可以輕鬆建立一個Web伺服器。

在您的golang專案中建立一個名為main.go的文件，並將以下程式碼新增至文件。

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    router := gin.Default()

    router.LoadHTMLGlob("templates/*")

    router.GET("/", func(c *gin.Context) {
        c.HTML(http.StatusOK, "index.html", gin.H{})
    })

    router.Run(":8080")
}

登入後複製

在templates資料夾中建立一個名為index.html的文件，並新增以下程式碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts and golang</title>
    <script src="/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        // 在这里编写ECharts的代码
    </script>
</body>
</html>

登入後複製

三、寫ECharts程式碼
在index.html檔案中，您可以寫ECharts的程式碼來製作各種統計圖表。

首先，在body標籤內加入一個div元素，設定寬度和高度。

然後，在script標籤內加入ECharts的程式碼。

假設我們要繪製一個長條圖，我們可以使用以下程式碼。

<script>
    var chart = echarts.init(document.getElementById('chart'));

    var option = {
        title: {
            text: '柱状图'
        },
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10]
        }]
    };

    chart.setOption(option);
</script>

登入後複製

這段程式碼創建了一個長條圖，x軸顯示了資料的分類，y軸顯示了銷量。透過設定series的data屬性，可以設定長條圖的具體資料。

根據您的需求，您可以編寫各種不同類型的圖表程式碼，並將其新增至index.html檔案。

四、執行Web應用程式
在終端機中，使用以下命令執行您的golang應用程式。