Cara mudah melukis carta statistik pelbagai menggunakan ECharts dan golang-Golang-php.cn

Cara mudah melukis carta statistik pelbagai menggunakan ECharts dan golang

王林

Lepaskan： 2023-12-18 15:40:19

asal

1300 orang telah melayarinya

Cara mudah melukis carta statistik pelbagai menggunakan ECharts dan golang

Dengan peningkatan permintaan untuk analisis data, lukisan carta statistik yang pelbagai telah menjadi keperluan yang sangat biasa. ECharts dan golang ialah dua alatan yang sangat baik yang boleh membantu kami melukis pelbagai carta dengan mudah. Di bawah saya akan memperkenalkan cara menggunakan ECharts dan golang untuk mencapai tujuan ini, sambil memberikan beberapa contoh kod khusus.

Memasang dan menggunakan ECharts

Sebelum menggunakan ECharts, kita perlu memasangnya terlebih dahulu. Anda boleh memuat turun versi stabil terkini di tapak web rasmi (https://echarts.apache.org) dan ikut arahan untuk memasangnya. Selepas pemasangan selesai, kita boleh mula menggunakan ECharts untuk melukis pelbagai jenis carta.

Apabila menggunakan ECharts, kita perlu menyediakan tatasusunan yang mengandungi semua data dan kemudian menyerahkannya kepada ECharts untuk menjana carta yang sepadan secara automatik. Di bawah ialah contoh kod mudah yang memplot histogram.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
        var data = [5, 20, 36, 10, 10, 20];
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            xAxis: {
                data: ['A', 'B', 'C', 'D', 'E', 'F']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

Salin selepas log masuk

Seperti yang anda lihat, kod contoh ini mengandungi halaman HTML dengan tatasusunan JavaScript yang mengandungi data yang dimasukkan ke dalamnya. ECharts secara automatik akan menukar data menjadi histogram dan menjadikannya kepada elemen dengan ID 'utama'.

Selain itu, ECharts juga menyediakan pelbagai jenis carta, seperti carta garis, carta pai, carta serakan, dll. Kita boleh memilih jenis carta yang berbeza mengikut keperluan sebenar.

Gunakan golang untuk menyediakan data

golang ialah bahasa pengaturcaraan yang sangat popular Ia menyokong pelbagai struktur data dan pelbagai operasi, dan sangat sesuai untuk memproses data. Sebelum menggunakan ECharts, biasanya kita perlu menyediakan semua data carta untuk dilukis dan menukarnya kepada format yang boleh dikenali oleh ECharts. golang dapat membantu kami menyiapkan kerja ini.

Berikut ialah program golang mudah yang boleh menjana tatasusunan yang mengandungi 100 nombor rawak dan mengeluarkannya ke dalam data format json.

package main

import (
    "encoding/json"
    "fmt"
    "math/rand"
)

type Data struct {
    Id    int    `json:"id"`
    Value int    `json:"value"`
}

func main() {
    data := make([]Data, 0)
    for i := 0; i < 100; i++ {
        data = append(data, Data{Id: i, Value: rand.Intn(100)})
    }
    jsonData, err := json.Marshal(data)
    if err != nil {
        fmt.Println("json encode error")
        return
    }
    fmt.Println(string(jsonData))
}

Salin selepas log masuk

Dalam program ini, kami menggunakan pakej rand untuk menjana tatasusunan yang mengandungi 100 nombor rawak, dan kemudian menukarnya kepada data format json. Data json ini boleh dikenali secara langsung oleh ECharts dan digunakan untuk melukis pelbagai jenis carta.

Sepadukan ECharts dan golang

Dengan ECharts dan golang, kita boleh mula mengintegrasikan kedua-duanya dan melukis pelbagai jenis carta. Di bawah ialah program golang mudah yang menjana tatasusunan json yang mengandungi data rawak dan menghantarnya ke halaman HTML. Dalam halaman HTML, kita boleh menggunakan ECharts untuk menarik data ini ke dalam histogram.

Kod golang:

package main

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

type Data struct {
    Id    int    `json:"id"`
    Value int    `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := make([]Data, 0)
        for i := 0; i < 10; i++ {
            data = append(data, Data{Id: i, Value: rand.Intn(100)})
        }
        jsonData, err := json.Marshal(data)
        if err != nil {
            fmt.Println("json encode error")
            return
        }
        w.Header().Set("Content-Type", "text/html; charset=utf-8")
        fmt.Fprintf(w, `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8">
                <title>柱状图示例</title>
                <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
            </head>
            <body>
                <div id="main" style="width:600px;height:400px;"></div>
                <script>
                    var data = %s;
                    var xAxisData = [];
                    var seriesData = [];
                    for (var i = 0; i < data.length; i++) {
                        xAxisData.push(data[i].id);
                        seriesData.push(data[i].value);
                    }
                    var myChart = echarts.init(document.getElementById('main'));
                    var option = {
                        title: {
                            text: '柱状图示例'
                        },
                        tooltip: {},
                        xAxis: {
                            data: xAxisData
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: seriesData
                        }]
                    };
                    myChart.setOption(option);
                </script>
            </body>
            </html>
        `, jsonData)
    })
    http.ListenAndServe(":8080", nil)
}

Salin selepas log masuk

Dalam kod ini, kami menggunakan pakej net/http untuk mencipta pelayan web ringkas dan mengeluarkan tatasusunan json yang mengandungi data rawak apabila mengakses direktori akar. Tatasusunan json ini boleh digunakan secara langsung oleh halaman HTML.

Halaman HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
        var data = [{"id":0,"value":36},{"id":1,"value":52},{"id":2,"value":64},{"id":3,"value":89},{"id":4,"value":48},{"id":5,"value":52},{"id":6,"value":10},{"id":7,"value":75},{"id":8,"value":86},{"id":9,"value":58}];
        var xAxisData = [];
        var seriesData = [];
        for (var i = 0; i < data.length; i++) {
            xAxisData.push(data[i].id);
            seriesData.push(data[i].value);
        }
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            xAxis: {
                data: xAxisData
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: seriesData
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

Salin selepas log masuk

Dalam halaman HTML ini, kami menggunakan kaedah JSON.parse() untuk menghuraikan data json yang dijana oleh golang ke dalam tatasusunan javascript, dan kemudian menyerahkannya kepada ECharts. Akhirnya, kami mendapat histogram yang bagus.

Atas ialah kandungan terperinci Cara mudah melukis carta statistik pelbagai menggunakan ECharts dan golang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!