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

Belajar menggunakan ECharts dan golang untuk mencipta carta statistik yang menakjubkan

WBOY

Lepaskan： 2023-12-17 10:26:34

asal

697 orang telah melayarinya

Belajar menggunakan ECharts dan golang untuk mencipta carta statistik yang menakjubkan

Belajar menggunakan ECharts dan Golang untuk mencipta carta statistik yang menakjubkan

Dengan pertumbuhan berterusan data dan perkembangan teknologi, visualisasi data telah menjadi cara penting untuk menyampaikan maklumat dan hasil paparan. Reka bentuk dan persembahan carta statistik data bukan sahaja memerlukan kesan paparan yang cantik dan intuitif, tetapi juga memerlukan tahap interaktiviti dan fleksibiliti yang tinggi. Artikel ini akan memperkenalkan cara menggunakan ECharts dan Golang, dua alat berkuasa, untuk mencapai carta statistik yang menakjubkan.

ECharts ialah perpustakaan visualisasi data berasaskan JavaScript sumber terbuka oleh Baidu. Ia mempunyai jenis visualisasi data yang kaya dan menyokong berbilang platform dan penyemak imbas. Melalui ECharts, kita boleh melukis pelbagai bentuk carta dengan mudah, seperti carta garis, carta bar, carta pai, dll. Pada masa yang sama, ECharts juga mempunyai keupayaan interaktif yang berkuasa, yang boleh merealisasikan interaksi antara pengguna dan carta melalui interaksi tetikus, pautan komponen carta, dsb.

Golang ialah bahasa pengaturcaraan yang dibangunkan oleh Google, yang cekap, mudah dan selamat. Melalui Golang, kami boleh membina aplikasi web berprestasi tinggi dengan pantas dan menggabungkannya dengan ECharts untuk mencapai proses lengkap pemerolehan, pemprosesan dan paparan data.

Seterusnya, kami akan menggunakan kes praktikal untuk menunjukkan cara menggunakan ECharts dan Golang untuk membina carta statistik yang menakjubkan.

Mula-mula, mari kita pertimbangkan keperluan: Katakan kita ingin mengira jualan bulanan wilayah tertentu dan memaparkannya dalam bentuk carta garis. Kami boleh mendapatkan data jualan bulanan melalui Golang dan melukis carta garis yang sepadan melalui ECharts.

Pertama sekali, di Golang, kita perlu menggunakan permintaan HTTP untuk mendapatkan data jualan Anda boleh menggunakan perpustakaan permintaan HTTP yang terkenal "gorilla/mux".

package main

import (
    "encoding/json"
    "log"
    "net/http"

    "github.com/gorilla/mux"
)

type Sale struct {
    Month  string  `json:"month"`
    Amount float64 `json:"amount"`
}

func main() {
    r := mux.NewRouter()
    r.HandleFunc("/sales", getSales).Methods("GET")
    log.Fatal(http.ListenAndServe(":8000", r))
}

func getSales(w http.ResponseWriter, r *http.Request) {
    sales := []Sale{
        {Month: "Jan", Amount: 1000.00},
        {Month: "Feb", Amount: 1500.00},
        {Month: "Mar", Amount: 2000.00},
        // 其他月份的销售额数据
    }

    json.NewEncoder(w).Encode(sales)
}

Salin selepas log masuk

Kod di atas menggunakan perpustakaan gorila/mux untuk mencipta laluan dan mentakrifkan fungsi pemprosesan permintaan GET getSales, yang mengembalikan tatasusunan JSON yang mengandungi data jualan. Dalam fungsi getSales, kami mentakrifkan contoh tetap untuk mensimulasikan data jualan, yang boleh anda ubah suai mengikut situasi sebenar.

Seterusnya, kami menggunakan ECharts untuk melukis carta garis, yang boleh dicapai dengan memperkenalkan fail perpustakaan ECharts dalam fail HTML dan memanggil API yang sepadan dalam kod JavaScript.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>销售统计</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>
        var chart = echarts.init(document.getElementById('chart'));

        // 发起HTTP请求获取销售额数据
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost:8000/sales", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var sales = JSON.parse(xhr.responseText);
                var months = [];
                var amounts = [];
                for (var i = 0; i < sales.length; i++) {
                    months.push(sales[i].month);
                    amounts.push(sales[i].amount);
                }

                // 绘制折线图
                chart.setOption({
                    xAxis: {
                        data: months
                    },
                    yAxis: {},
                    series: [{
                        name: '销售额',
                        type: 'line',
                        data: amounts
                    }]
                });
            }
        }
        xhr.send();
    </script>
</body>

</html>

Salin selepas log masuk

Dalam kod di atas, kami memulakan permintaan HTTP untuk mendapatkan data jualan melalui XMLHttpRequest, dan kemudian menghuraikan dan menggunakan API ECharts untuk melukis carta garis. Apabila melukis carta garisan, kami menggunakan bulan sebagai paksi-x dan jualan sebagai paksi-y Kami mengkonfigurasi gaya dan data carta dengan menetapkan parameter seperti xAxis, yAxis dan siri.

Melalui contoh kod di atas, kita dapat melihat bahawa carta statistik yang menakjubkan boleh dicapai dengan mudah menggunakan ECharts dan Golang. Anda hanya perlu mendapatkan data melalui permintaan HTTP, dan kemudian gunakan ECharts untuk melukis carta di bahagian hadapan, yang boleh dipaparkan dengan mudah. Pada masa yang sama, keupayaan interaktif ECharts yang berkuasa boleh meningkatkan lagi kesan visualisasi carta, membolehkan pengguna mempunyai interaksi yang lebih mendalam dengan carta.

Sudah tentu, contoh di atas hanyalah demonstrasi mudah Dalam amalan, anda perlu menyesuaikan dan mengembangkannya mengikut keperluan dan struktur data tertentu. Saya harap artikel ini membantu anda memahami cara menggunakan ECharts dan Golang untuk mencipta carta statistik yang menakjubkan!

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