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

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

Dalam era Internet moden, visualisasi data adalah salah satu cara penting untuk menarik pengguna dan memaparkan maklumat. Sebagai satu bentuk visualisasi data, carta statistik boleh memaparkan dengan jelas dan intuitif arah aliran dan perhubungan data. Artikel ini akan mengajar anda cara menggunakan ECharts dan golang untuk mencipta carta statistik yang menakjubkan, dengan contoh kod khusus.

(1) Pengenalan kepada ECharts

ECharts ialah perpustakaan carta sumber terbuka berasaskan JavaScript yang dibangunkan oleh pasukan hadapan Baidu. Ia menyediakan jenis carta yang kaya dan pilihan konfigurasi yang fleksibel, membolehkan pengguna membuat pelbagai carta statistik dengan mudah. Jenis carta yang disokong oleh ECharts termasuk carta garis, carta bar, carta pai, carta serakan, dsb.

(2) Pengenalan kepada golang

golang ialah bahasa pengaturcaraan sumber terbuka yang dibangunkan oleh Google dan dikeluarkan pada tahun 2009. Ia cekap, boleh dipercayai dan ringkas, dan sesuai untuk membangunkan aplikasi bahagian pelayan berprestasi tinggi. Dalam tutorial ini, kami akan menggunakan golang untuk menulis kod hujung belakang, menggunakan ECharts untuk menjana carta dan memaparkan carta statistik melalui interaksi data antara hujung hadapan dan belakang.

(3) Pasang ECharts

1. Muat turun fail perpustakaan ECharts

Anda boleh memuat turun fail perpustakaan ECharts terkini dari laman web rasmi ECharts (https://echarts.apache.org/). Selepas membuka zip, letakkan folder ECharts dalam direktori projek anda.

2. Perkenalkan fail perpustakaan ECharts

Dalam fail HTML, anda perlu memperkenalkan fail perpustakaan ECharts melalui tag skrip. Contohnya:

<script src="echarts.min.js"></script>

(4) Tulis kod hujung belakang golang

1. Pasang golang

Mula-mula, anda perlu memasang golang dan tetapkan pembolehubah persekitaran. Anda boleh memuat turun pakej pemasangan golang terkini dari laman web rasmi golang (https://golang.org/) dan memasangnya mengikut dokumentasi rasmi.

2. Buat projek golang

Dalam direktori kerja anda, buat projek golang baharu.

3. Tulis kod golang

Dalam fail go projek, tulis kod golang berikut:

package main

import (
    "encoding/json"
    "fmt"
    "net/http"
)

type Data struct {
    Name  string  `json:"name"`
    Value float64 `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {Name: "数据1", Value: 10},
            {Name: "数据2", Value: 20},
            {Name: "数据3", Value: 30},
            {Name: "数据4", Value: 40},
            {Name: "数据5", Value: 50},
        }
        dataBytes, _ := json.Marshal(data)
        w.Header().Set("Content-Type", "application/json")
        fmt.Fprint(w, string(dataBytes))
    })

    http.ListenAndServe(":8080", nil)
}

4. Jalankan program golang

Dalam baris arahan, masukkan direktori projek dan laksanakan arahan berikut untuk menjalankan program golang:

go run main.go

(5) Tulis kod HTML dan JavaScript

1. Buat fail HTML dan tulis kandungan berikut dalam fail:

    


    


    <script src="echarts.min.js"></script>
    <script>
        var chart = echarts.init(document.getElementById('chart'));

        // 发送请求获取数据
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                // 生成图表
                var option = {
                    title: {
                        text: '统计图表'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(function (item) {
                            return item.name;
                        })
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.map(function (item) {
                            return item.value;
                        }),
                        type: 'bar'
                    }]
                };
                chart.setOption(option);
            }
        };
        xhr.open('GET', 'http://localhost:8080/', true);
        xhr.send();
    </script>

2. Buka pelayar dan lawati halaman HTML

Buka HTML fail dalam pelayar, anda Anda akan melihat carta statistik mudah.

Di atas adalah keseluruhan tutorial untuk mencipta carta statistik yang menakjubkan menggunakan ECharts dan golang. Melalui tutorial ini, anda akan belajar cara menggunakan ECharts dan golang untuk mencipta carta statistik dan merealisasikan paparan dan interaksi data. Harap ini membantu dengan pembelajaran dan pembangunan projek anda!

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