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

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

PHPz

Lepaskan： 2023-12-18 16:37:03

asal

1143 orang telah melayarinya

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

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

Ikhtisar:
Dengan keperluan analisis dan visualisasi data moden, mencipta carta statistik yang pelbagai telah menjadi tugas pembangunan yang penting. ECharts ialah perpustakaan carta sumber terbuka berdasarkan JavaScript, yang menyediakan pelbagai jenis carta dan fungsi interaktif untuk memenuhi pelbagai keperluan paparan data. Sebagai bahasa pengaturcaraan pelayan yang cekap, golang boleh digabungkan dengan ECharts untuk mencapai perkhidmatan visualisasi data yang fleksibel dan berprestasi tinggi.

Artikel ini akan menggunakan contoh khusus untuk memperkenalkan cara menggunakan ECharts dan golang untuk mencipta carta statistik yang pelbagai dari awal. Kami akan menggunakan golang sebagai rangka kerja bahagian belakang untuk berinteraksi dengan ECharts bahagian hadapan dengan menyediakan antara muka data, dan akhirnya melaksanakan carta statistik yang dikemas kini secara dinamik.

Langkah 1: Sediakan persekitaran pembangunan golang
Pertama, kita perlu menyediakan persekitaran pembangunan golang secara tempatan. Anda boleh pergi ke tapak web rasmi (https://golang.org/dl/) untuk memuat turun pakej pemasangan golang yang sesuai untuk sistem pengendalian anda, kemudian pasang dan konfigurasikannya mengikut dokumentasi rasmi.

Langkah 2: Buat projek golang
Dalam baris arahan, gunakan arahan berikut untuk mencipta projek golang baharu:

mkdir golang-echarts-demo
cd golang-echarts-demo
go mod init github.com/your-username/golang-echarts-demo

Salin selepas log masuk

Di sini nama pengguna anda ialah nama pengguna github anda, digunakan untuk menentukan projek laluan import. your-username是你的github用户名，用于指定项目的导入路径。

步骤三：安装golang的http库
golang中有很多第三方库可以用于处理http请求，这里我们使用标准库的net/http来搭建一个简单的http服务。在命令行中，使用以下命令安装http库：

go get -u github.com/gorilla/mux

Salin selepas log masuk

步骤四：编写golang后端代码
在项目根目录下，创建一个名为main.go的文件，并使用以下代码编写golang后端代码：

package main

import (
    "encoding/json"
    "log"
    "net/http"
    "github.com/gorilla/mux"
)

type Data struct {
    Labels []string `json:"labels"`
    Values []int    `json:"values"`
}

func GetData(w http.ResponseWriter, r *http.Request) {
    data := Data{
        Labels: []string{"Mon", "Tue", "Wed", "Thu", "Fri"},
        Values: []int{120, 200, 150, 80, 300},
    }
    json.NewEncoder(w).Encode(data)
}

func main() {
    router := mux.NewRouter()
    router.HandleFunc("/data", GetData).Methods("GET")
    log.Fatal(http.ListenAndServe(":8000", router))
}

Salin selepas log masuk

这段代码定义了一个名为Data的结构体，结构体中包含了图表需要的标签和数值数据。GetData函数用于处理客户端的请求，并返回一个包含标签和数值数据的json响应。

步骤五：运行golang后端服务
在命令行中，使用以下命令运行golang后端服务：

go run main.go

Salin selepas log masuk

步骤六：创建前端页面
在项目根目录下，创建一个名为index.html的文件，并使用以下代码编写前端页面：

<!DOCTYPE html>
<html>
<head>
    <title>ECharts Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px;height:400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
        var option = {
            title: {
                text: '统计图表'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'bar'
            }]
        };
        setInterval(function() {
            fetch('/data')
                .then(response => response.json())
                .then(data => {
                    option.xAxis.data = data.labels;
                    option.series[0].data = data.values;
                    chart.setOption(option);
                });
        }, 2000);
    </script>
</body>
</html>

Salin selepas log masuk

这段代码使用了ECharts提供的JavaScript库，并创建了一个名为chart

Langkah 3: Pasang perpustakaan http golang

Terdapat banyak perpustakaan pihak ketiga dalam golang yang boleh digunakan untuk mengendalikan permintaan http Di sini kami menggunakan net/http perpustakaan standard untuk membina perkhidmatan http yang mudah . Dalam baris arahan, gunakan arahan berikut untuk memasang perpustakaan http:

python -m http.server

Salin selepas log masuk

Langkah 4: Tulis kod hujung belakang golang

Dalam direktori akar projek, buat fail bernama main.go dan gunakan berikut Kod menulis kod belakang golang:

rrreee

Kod ini mentakrifkan struktur bernama Data, yang mengandungi label dan data berangka yang diperlukan untuk carta. Fungsi GetData digunakan untuk memproses permintaan klien dan mengembalikan respons json yang mengandungi label dan data berangka.

🎜Langkah lima: Jalankan perkhidmatan hujung belakang golang🎜Dalam baris arahan, gunakan arahan berikut untuk menjalankan perkhidmatan hujung belakang golang:🎜rrreee🎜Langkah enam: Buat halaman hujung hadapan🎜Dalam direktori akar projek, buat fail bernama index. html fail, dan gunakan kod berikut untuk menulis halaman muka hadapan: 🎜rrreee🎜Kod ini menggunakan perpustakaan JavaScript yang disediakan oleh ECharts dan mencipta bekas carta bernama cart. Dengan kerap meminta antara muka data perkhidmatan bahagian belakang dan menetapkan data yang dikembalikan kepada pilihan carta, carta statistik dikemas kini secara dinamik dilaksanakan. 🎜🎜Langkah 7: Jalankan halaman hadapan hadapan 🎜Dalam baris arahan, gunakan arahan berikut untuk menjalankan halaman hujung hadapan: 🎜rrreee🎜Ini akan memulakan pelayan http mudah secara setempat dan menyediakan halaman hujung hadapan untuk akses penyemak imbas . 🎜🎜Pada ketika ini, kami telah menyelesaikan proses penggunaan ECharts dan golang untuk mencipta carta statistik yang pelbagai. Dengan menggunakan golang untuk membina perkhidmatan bahagian belakang, digabungkan dengan jenis carta kaya dan fungsi interaktif yang disediakan oleh ECharts, kami boleh melaksanakan perkhidmatan visualisasi data yang fleksibel dan berprestasi tinggi dengan mudah. Saya harap artikel ini membantu dan saya doakan anda berjaya dalam kerja pembangunan anda dalam bidang visualisasi data! 🎜

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