Belajar menggunakan ECharts dan golang untuk mencipta tutorial carta statistik yang unik-Golang-php.cn

Rumah

pembangunan bahagian belakang

Golang

Belajar menggunakan ECharts dan golang untuk mencipta tutorial carta statistik yang unik

Dec 17, 2023 am 08:02 AM

golang echarts Carta statistik

Belajar menggunakan ECharts dan golang untuk mencipta tutorial carta statistik yang unik

Belajar menggunakan ECharts dan golang untuk mencipta tutorial carta statistik yang unik, contoh kod khusus diperlukan

Pengenalan
Dengan peningkatan data besar dan visualisasi data, carta statistik telah menjadi alat penting untuk paparan dan analisis data. Dalam projek sebenar, cara menggunakan kod untuk menjana pelbagai carta statistik unik telah menjadi tumpuan pembangun. Artikel ini akan memperkenalkan cara menggunakan ECharts dan golang untuk mencipta carta statistik yang unik dan memberikan contoh kod khusus.

1. Pengenalan kepada ECharts
ECharts ialah projek sumber terbuka Baidu Ia adalah perpustakaan carta visualisasi data yang ditulis dalam JavaScript tulen. ECharts menyediakan pelbagai jenis carta dan kaedah interaksi, berkuasa dan mudah digunakan. Ia menyokong reka bentuk responsif dan boleh dipaparkan dengan baik pada peranti yang berbeza. ECharts juga menyediakan mekanisme lanjutan yang kaya untuk menyesuaikan dan mengembangkan keperluan anda sendiri dengan mudah.

2. Pengenalan kepada golang
golang ialah bahasa pengaturcaraan sumber terbuka yang memfokuskan pada kesederhanaan, kecekapan dan prestasi serentak. Golang sesuai untuk membina aplikasi rangkaian berprestasi tinggi dan sistem teragih. Dalam tutorial ini, kami akan menggunakan golang sebagai bahasa bahagian belakang yang bertanggungjawab untuk menjana data yang diperlukan oleh ECharts.

3. Persediaan
Pertama, kita perlu memasang persekitaran pembangunan ECharts dan golang. Laman web rasmi ECharts (https://echarts.apache.org/) menyediakan dokumentasi pemasangan terperinci, dan kami boleh memasangnya mengikut dokumentasi. Laman web rasmi Golang (https://golang.org/) juga menyediakan panduan pemasangan yang sepadan, dan kami boleh memasangnya mengikut keperluan.

4. Integrasi ECharts dan golang

Buat halaman ECharts asas
Pertama, kami mencipta halaman ECharts asas untuk memaparkan carta. Cipta fail baharu bernama index.html, dan kemudian tulis kod berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts图表</title>
    <script src="https://echarts.apache.org/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
         
        // 在这里编写图表的配置和数据
         
        chart.setOption({
            // 在这里设置图表的配置和数据
        });
    </script>
</body>
</html>

Salin selepas log masuk

Gunakan golang untuk menjana data statistik
Seterusnya, kami menggunakan golang untuk menjana data statistik untuk paparan. Buat fail bernama main.go dan tulis kod berikut:

package main
 
import (
    "encoding/json"
    "fmt"
    "io/ioutil"
    "net/http"
)
 
func main() {
    http.HandleFunc("/data", handler)
    http.ListenAndServe(":8080", nil)
}
 
func handler(w http.ResponseWriter, r *http.Request) {
    data := map[string]interface{}{
        "categories": []string{"类别1", "类别2", "类别3", "类别4", "类别5"},
        "series": []map[string]interface{}{
            {
                "name": "系列1",
                "type": "bar",
                "data": []float64{100, 200, 300, 400, 500},
            },
            {
                "name": "系列2",
                "type": "bar",
                "data": []float64{200, 300, 400, 500, 600},
            },
        },
    }
 
    bytes, err := json.Marshal(data)
    if err != nil {
        fmt.Println("错误:", err)
        return
    }
 
    w.Header().Set("Content-Type", "application/json")
    w.Write(bytes)
}

Salin selepas log masuk

Hantar data ke halaman ECharts
Dalam index.html, kita perlu menggunakan teknologi ajax untuk mendapatkan data daripada pelayan golang dan menghantar data kepada ECharts carta . Tambah kod berikut dalam teg skrip:

<script>
    var chart = echarts.init(document.getElementById('chart'));
     
    // 发送ajax请求
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/data');
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
             
            chart.setOption({
                xAxis: {
                    type: 'category',
                    data: data.categories,
                },
                yAxis: {
                    type: 'value',
                },
                series: data.series,
            });
        }
    };
    xhr.send();
</script>

Salin selepas log masuk

5. Jalankan dan nyahpepijat

Mulakan pelayan golang
Dalam baris arahan, masukkan direktori di mana main.go terletak, dan kemudian jalankan arahan berikut untuk memulakan pelayan golang:

1	`go run main.go`

Salin selepas log masuk

Buka halaman ECharts dalam penyemak imbas
Buka halaman index.html dalam penyemak imbas (contohnya http://localhost:8080/index.html), anda boleh melihat carta statistik yang dihasilkan.

Kesimpulan
Tutorial ini memperkenalkan cara menggunakan ECharts dan golang untuk mencipta carta statistik yang unik, dan menyediakan contoh kod khusus. Dengan mempelajari tutorial ini, saya percaya anda boleh menggunakan ECharts dan golang dengan lebih fleksibel untuk mencipta pelbagai carta statistik yang indah. Semoga tutorial ini bermanfaat kepada semua.

Atas ialah kandungan terperinci Belajar menggunakan ECharts dan golang untuk mencipta tutorial carta statistik yang unik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn