Bermula dari awal: menggunakan ECharts dan golang untuk mencipta carta statistik yang cantik-Golang-php.cn

Bermula dari awal: menggunakan ECharts dan golang untuk mencipta carta statistik yang cantik

PHPz

Lepaskan： 2023-12-17 09:35:36

asal

1169 orang telah melayarinya

Bermula dari awal: menggunakan ECharts dan golang untuk mencipta carta statistik yang cantik

Mula dari awal: Gunakan ECharts dan golang untuk mencipta carta statistik yang cantik

Dalam era visualisasi data, carta statistik telah menjadi alat penting untuk memaparkan data. Sebagai perpustakaan sumber terbuka yang berkuasa dan mudah digunakan, ECharts menyediakan kami dengan pelbagai jenis carta dan gaya carta yang kaya. Digabungkan dengan golang, bahasa pengaturcaraan yang cekap dan berkuasa, kami boleh mencipta carta statistik yang cantik dan interaktif dengan mudah.

Artikel ini akan membawa anda dari awal untuk mencipta carta statistik mudah menggunakan ECharts dan golang. Kami akan menggunakan golang sebagai bahasa hujung belakang untuk mendapatkan data dan menghantarnya ke pustaka ECharts pada bahagian hadapan untuk menjana carta. Mari mulakan!

Pertama, kita perlu memasang perpustakaan golang dan ECharts. Jika anda belum memasang golang lagi, anda boleh memuat turun dan memasangnya dari laman web rasmi: https://golang.org/

Seterusnya, kami perlu memasang perpustakaan ECharts, anda boleh mencari kaedah pemasangan dalam dokumentasi rasmi daripada ECharts: https:/ /echarts.apache.org/zh/index.html

Selepas pemasangan, kami mencipta projek golang baharu dan mencipta fail bernama main.go dalam direktori projek. main.go的文件。

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

package main

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

Salin selepas log masuk

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

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

Salin selepas log masuk

第三步，我们创建一个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)
}

Salin selepas log masuk

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

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

Salin selepas log masuk

接下来，我们回到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>

Salin selepas log masuk

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

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

Dalam langkah pertama, kita perlu mengimport pakej golang yang diperlukan:

rrreee

Dalam langkah kedua, kami mencipta struktur data mudah untuk mewakili statistik kami:

rrreee

Dalam langkah ketiga, kami mencipta fungsi pengendali untuk mengendalikan Permintaan HTTP, dan kembalikan data ke bahagian hadapan dalam format JSON: 🎜rrreee🎜Dalam langkah keempat, kami mencipta fungsi utama dan memulakan pelayan HTTP untuk mendengar permintaan: 🎜rrreee🎜Seterusnya, kami kembali ke hadapan- bahagian akhir ECharts. Buat fail bernama index.html dalam direktori projek dan tambahkan kod berikut padanya: 🎜rrreee🎜Akhir sekali, kami membuka terminal, masukkan direktori projek dan jalankan go run main.go Mulakan pelayan golang kami. 🎜🎜Lawati http://localhost:8080 dalam penyemak imbas anda, anda akan melihat halaman yang mengandungi carta statistik. Carta ini akan mempamerkan data kami, dibentangkan sebagai carta bar. 🎜🎜Melalui contoh mudah ini, kami belajar cara menggunakan ECharts dan golang untuk mencipta carta statistik yang cantik. Anda boleh mengubah suai data dan jenis carta mengikut keperluan anda sendiri, dan ECharts menyediakan banyak pilihan untuk memenuhi keperluan yang berbeza. 🎜🎜Saya harap artikel ini membantu anda, dan saya berharap anda pergi lebih jauh dan lebih jauh di jalan visualisasi data! 🎜

Atas ialah kandungan terperinci Bermula dari awal: menggunakan ECharts dan golang untuk mencipta carta statistik yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!