Rumah > Artikel > pembangunan bahagian belakang > ECharts dan golang dalam tindakan: Tutorial membuat carta statistik yang cantik

ECharts dan golang dalam tindakan: Tutorial membuat carta statistik yang cantik

WBOYasal: 2023-12-18 12:52:171279semak imbas

. ECharts ialah perpustakaan carta sumber terbuka yang berkuasa dan fleksibel, manakala golang ialah bahasa pengaturcaraan yang berkuasa dan pantas. Menggabungkan kedua-duanya boleh mencapai kesan carta statistik yang indah dalam aplikasi web. Artikel ini akan memperkenalkan anda kepada cara menggunakan ECharts dan golang untuk mencipta carta statistik yang cantik, dan memberikan contoh kod khusus.

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

Sebelum bermula, kita perlu memasang perisian yang sepadan dan memuatkan perpustakaan yang diperlukan.

Pasang golang
Pertama, anda perlu memuat turun dan memasang golang. Anda boleh melayari laman web rasmi Golang (https://golang.org/) untuk memuat turun versi terkini golang dan memasangnya mengikut panduan rasmi.

Pasang ECharts
ECharts boleh dipasang melalui npm. Jalankan arahan berikut dalam terminal untuk memasang ECharts.

npm install echarts --save

Buat projek golang
```
go mod init your_project_name
```

go get github.com/gin-gonic/gin

Menggunakan rangka kerja gin dalam golang boleh membuat pelayan web dengan mudah.

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")
}

Buat fail bernama index.html dalam folder templat dan tambah kod berikut.

<!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>

3. Tulis kod ECharts
Dalam fail index.html, anda boleh menulis kod ECharts untuk mencipta pelbagai carta statistik.

Mula-mula, tambahkan elemen div di dalam teg badan dan tetapkan lebar dan tinggi.

Kemudian, tambahkan kod ECharts di dalam teg skrip.

Seandainya kita ingin melukis histogram, kita boleh menggunakan kod berikut.

<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>

Kod ini mencipta carta bar dengan paksi-x menunjukkan klasifikasi data dan paksi-y menunjukkan volum jualan. Dengan menetapkan atribut data siri, anda boleh menetapkan data khusus histogram.

Bergantung pada keperluan anda, anda boleh menulis pelbagai jenis kod carta dan menambahkannya pada fail index.html.

4. Jalankan aplikasi web

Di terminal, gunakan arahan berikut untuk menjalankan aplikasi golang anda.

go run main.go

Seterusnya, buka pelayar anda dan lawati http://localhost:8080.

Anda akan melihat halaman web menunjukkan histogram.

Dengan menulis kod ECharts yang sepadan, anda boleh mencipta pelbagai jenis carta statistik dan memaparkannya dalam aplikasi web.

Kesimpulan

Dengan menggabungkan ECharts dan golang, kita boleh mencipta carta statistik yang cantik dengan mudah. Artikel ini memperkenalkan anda kepada cara membuat pelayan web dan menggunakan ECharts untuk menulis kod carta statistik dalam aplikasi web. Saya harap artikel ini dapat membantu anda memperdalam pemahaman anda tentang ECharts dan golang, dan menambah kesan visualisasi data yang lebih jelas dan menarik pada aplikasi web anda.

Atas ialah kandungan terperinci ECharts dan golang dalam tindakan: Tutorial membuat carta statistik yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

golang gin echarts html npm http https

Kenyataan：

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

Artikel sebelumnya：Cara menggunakan ECharts dan golang untuk mencipta carta statistik peringkat profesionalArtikel seterusnya：Cara menggunakan ECharts dan golang untuk mencipta carta statistik peringkat profesional

Artikel berkaitan

Lihat lagi