ECharts dan golang dalam tindakan: Tutorial membuat carta statistik yang cantik-Golang-php.cn

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

WBOY

Lepaskan： 2023-12-18 12:52:17

asal

1269 orang telah melayarinya

. 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

Salin selepas log masuk

Buat projek golang
```
go mod init your_project_name
```
Salin selepas log masuk

go get github.com/gin-gonic/gin

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!