Rumah pembangunan bahagian belakang Golang Cara mudah melukis carta statistik yang cantik menggunakan ECharts dan golang

Cara mudah melukis carta statistik yang cantik menggunakan ECharts dan golang

Dec 18, 2023 pm 02:39 PM
golang echarts Carta statistik

Cara mudah melukis carta statistik yang cantik menggunakan ECharts dan golang

Cara menggunakan ECharts dan golang untuk melukis carta statistik yang cantik dengan mudah

Dengan pengumpulan dan penggunaan data yang berterusan, carta statistik telah menjadi cara penting untuk memaparkan data. Dalam bidang ini, ECharts ialah perpustakaan carta JavaScript sumber terbuka yang popular Ia berkuasa, mudah digunakan dan menyokong sejumlah besar gaya dan jenis carta, jadi ia telah digunakan secara meluas dalam pembangunan. Pada masa yang sama, sebagai bahasa pengaturcaraan yang cekap, golang menjadi semakin popular dalam pembangunan back-end Web.

Artikel ini terutamanya memperkenalkan cara menggunakan ECharts dan golang untuk melukis carta statistik yang cantik, dan memberikan contoh kod khusus.

  1. Persediaan

Sebelum membangunkan carta statistik, kita perlu menyediakan alatan dan persekitaran berikut:

  • Persekitaran Golang
  • Rangka kerja Beego
  • ECharts library
Charts yang dipasang 🜎 boleh dimuat turun melaluinya, boleh dimuat turun melalui persekitaran Golang

laman web rasmi , rangka kerja Beego boleh dipasang melalui arahan berikut:

go get github.com/astaxie/beego
Salin selepas log masuk

Pustaka ECharts boleh dipasang melalui arahan berikut:

npm install echarts --save
Salin selepas log masuk
  1. Melukis histogram

Mula-mula, kita cuba melukis histogram mudah. Kodnya adalah seperti berikut:

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (this *MainController) Get() {
    this.Data["Website"] = "beego.me"
    this.Data["Email"] = "astaxie@gmail.com"
    this.TplName = "index.tpl"

    data := []int{10, 52, 200, 334, 390, 330, 220}
    this.Data["chart_data"] = data
    this.Data["chart_type"] = "bar"
}
Salin selepas log masuk

Dalam kod, kami mentakrifkan pengawal bernama MainController dan melaksanakan kaedah Dapatkan. Antaranya, kami mentakrifkan tatasusunan bernama data, yang mengandungi data histogram. Kami kemudian menghantar data ini kepada pembolehubah "chart_data" dalam templat, serta pembolehubah "chart_type" jenis carta. Khususnya, kami menggunakan "bar" sebagai jenis histogram.

Seterusnya, kita perlu menyusun templat dan menggunakan perpustakaan ECharts untuk memaparkan carta. Kodnya adalah seperti berikut:

{{.chart_data}}
{{.chart_type}}

{{if .chart_data}}
    <div id="myChart" style="width: 600px;height:400px;"></div>
{{end}}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.5.4/echarts.min.js"></script>
<script>
$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '柱状图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: '{{.chart_type}}',
            data: {{.chart_data}},
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };
    myChart.setOption(option);
});
</script>
Salin selepas log masuk

Dalam kod, kami mula-mula menggunakan {{.chart_data}} dan {{.chart_type}} untuk mengeluarkan data dan jenis carta supaya kami boleh menyemak ketepatan data semasa menyahpepijat. Kemudian, kami menggunakan pernyataan bersyarat untuk menentukan sama ada data telah diluluskan dan kawasan carta akan dipaparkan hanya selepas data diluluskan.

Seterusnya, kami memperkenalkan perpustakaan ECharts dan menggunakan kaedah echarts.init untuk memulakan elemen DOM dengan ID yang ditentukan. Dalam contoh ini, kami menambahkan beberapa item konfigurasi asas, seperti tajuk, petua alat, legenda, xAxis, yAxis, siri, dsb. Antaranya, xAxis dan yAxis masing-masing mentakrifkan data bagi paksi mendatar dan paksi menegak, dan siri digunakan untuk menentukan data carta.

  1. Melukis carta pai

Selain carta bar, kita juga boleh menggunakan ECharts dan golang untuk melukis jenis carta yang lain. Seterusnya kita cuba melukis carta pai. Kodnya adalah seperti berikut:

package controllers

import (
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (this *MainController) Get() {
    this.Data["Website"] = "beego.me"
    this.Data["Email"] = "astaxie@gmail.com"
    this.TplName = "index.tpl"

    data := map[string]int{"直接访问":335, "邮件营销":310, "联盟广告":234, "视频广告":135, "搜索引擎":1548}
    this.Data["chart_data"] = data
    this.Data["chart_type"] = "pie"
}
Salin selepas log masuk

Dalam kod, kami mentakrifkan peta bernama data, yang mengandungi data carta pai. Sama seperti bahagian sebelumnya, kami menghantar data ini kepada pembolehubah "chart_data" dalam templat, serta pembolehubah "chart_type" jenis carta. Walau bagaimanapun, kali ini kita menggunakan "pai" sebagai jenis carta pai.

Seterusnya, kami menyusun templat dan menggunakan perpustakaan ECharts untuk memaparkan carta. Kodnya adalah seperti berikut:

{{.chart_data}}
{{.chart_type}}

{{if .chart_data}}
    <div id="myChart" style="width: 600px;height:400px;"></div>
{{end}}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/3.5.4/echarts.min.js"></script>
<script>
$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
        title: {
            text: '饼图'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name: '访问来源',
                type: '{{.chart_type}}',
                radius: '45%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ],
                label: {
                    normal: {
                        show: false,
                        position: 'inside'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
});
</script>
Salin selepas log masuk

Dalam kod, kami mula-mula menggunakan {{.chart_data}} dan {{.chart_type}} untuk mengeluarkan data dan jenis carta. Kemudian, kami juga menggunakan pernyataan bersyarat untuk mengawal sama ada kawasan carta dipaparkan.

Dalam item konfigurasi carta, kami menggunakan tatasusunan "data" dengan format khusus untuk menentukan data carta. Antaranya, nilai digunakan untuk mewakili saiz data, dan nama digunakan untuk mewakili nama data. Pada masa yang sama, kami juga boleh menggunakan atribut seperti "label" dan "labelLine" untuk menetapkan label.

  1. Ringkasan

Artikel ini memperkenalkan cara menggunakan ECharts dan golang untuk melukis carta statistik yang cantik dengan mudah. Kami mula-mula melaksanakan carta bar ringkas dan carta pai, dan memberikan contoh kod khusus. Melalui contoh ini, kita boleh belajar cara menggunakan ECharts dan menggabungkannya dengan rangka kerja golang untuk mencapai keperluan visualisasi data.

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk membaca dan menulis fail dengan selamat menggunakan Golang? Bagaimana untuk membaca dan menulis fail dengan selamat menggunakan Golang? Jun 06, 2024 pm 05:14 PM

Membaca dan menulis fail dengan selamat dalam Go adalah penting. Garis panduan termasuk: Menyemak kebenaran fail Menutup fail menggunakan tangguh Mengesahkan laluan fail Menggunakan tamat masa konteks Mengikuti garis panduan ini memastikan keselamatan data anda dan keteguhan aplikasi anda.

Bagaimana untuk mengkonfigurasi kolam sambungan untuk sambungan pangkalan data Golang? Bagaimana untuk mengkonfigurasi kolam sambungan untuk sambungan pangkalan data Golang? Jun 06, 2024 am 11:21 AM

Bagaimana untuk mengkonfigurasi pengumpulan sambungan untuk sambungan pangkalan data Go? Gunakan jenis DB dalam pakej pangkalan data/sql untuk membuat sambungan pangkalan data untuk mengawal bilangan maksimum sambungan serentak;

Rangka Kerja Golang lwn Rangka Kerja Go: Perbandingan Seni Bina Dalaman dan Ciri Luaran Rangka Kerja Golang lwn Rangka Kerja Go: Perbandingan Seni Bina Dalaman dan Ciri Luaran Jun 06, 2024 pm 12:37 PM

Perbezaan antara rangka kerja GoLang dan rangka kerja Go ditunjukkan dalam seni bina dalaman dan ciri luaran. Rangka kerja GoLang adalah berdasarkan perpustakaan standard Go dan meluaskan fungsinya, manakala rangka kerja Go terdiri daripada perpustakaan bebas untuk mencapai tujuan tertentu. Rangka kerja GoLang lebih fleksibel dan rangka kerja Go lebih mudah digunakan. Rangka kerja GoLang mempunyai sedikit kelebihan dalam prestasi dan rangka kerja Go lebih berskala. Kes: gin-gonic (rangka Go) digunakan untuk membina REST API, manakala Echo (rangka kerja GoLang) digunakan untuk membina aplikasi web.

Bagaimana untuk menyimpan data JSON ke pangkalan data di Golang? Bagaimana untuk menyimpan data JSON ke pangkalan data di Golang? Jun 06, 2024 am 11:24 AM

Data JSON boleh disimpan ke dalam pangkalan data MySQL dengan menggunakan perpustakaan gjson atau fungsi json.Unmarshal. Pustaka gjson menyediakan kaedah kemudahan untuk menghuraikan medan JSON dan fungsi json.Unmarshal memerlukan penuding jenis sasaran kepada data JSON unmarshal. Kedua-dua kaedah memerlukan penyediaan pernyataan SQL dan melaksanakan operasi sisipan untuk mengekalkan data ke dalam pangkalan data.

Bagaimana untuk mencari subrentetan pertama dipadankan dengan ungkapan biasa Golang? Bagaimana untuk mencari subrentetan pertama dipadankan dengan ungkapan biasa Golang? Jun 06, 2024 am 10:51 AM

Fungsi FindStringSubmatch mencari subrentetan pertama dipadankan dengan ungkapan biasa: fungsi mengembalikan hirisan yang mengandungi subrentetan yang sepadan, dengan elemen pertama ialah keseluruhan rentetan dipadankan dan elemen berikutnya ialah subrentetan individu. Contoh kod: regexp.FindStringSubmatch(teks,corak) mengembalikan sekeping subrentetan yang sepadan. Kes praktikal: Ia boleh digunakan untuk memadankan nama domain dalam alamat e-mel, contohnya: e-mel:="user@example.com", pattern:=@([^\s]+)$ untuk mendapatkan padanan nama domain [1].

Berubah dari front-end ke pembangunan back-end, adakah lebih menjanjikan untuk belajar Java atau Golang? Berubah dari front-end ke pembangunan back-end, adakah lebih menjanjikan untuk belajar Java atau Golang? Apr 02, 2025 am 09:12 AM

Laluan Pembelajaran Backend: Perjalanan Eksplorasi dari Front-End ke Back-End sebagai pemula back-end yang berubah dari pembangunan front-end, anda sudah mempunyai asas Nodejs, ...

Bagaimana untuk menggunakan zon waktu yang telah ditetapkan dengan Golang? Bagaimana untuk menggunakan zon waktu yang telah ditetapkan dengan Golang? Jun 06, 2024 pm 01:02 PM

Menggunakan zon waktu yang dipratentukan dalam Go termasuk langkah berikut: Import pakej "masa". Muatkan zon waktu tertentu melalui fungsi LoadLocation. Gunakan zon waktu yang dimuatkan dalam operasi seperti mencipta objek Masa, menghuraikan rentetan masa dan melaksanakan penukaran tarikh dan masa. Bandingkan tarikh menggunakan zon waktu yang berbeza untuk menggambarkan aplikasi ciri zon waktu yang telah ditetapkan.

Tutorial praktikal pembangunan rangka kerja Golang: Soalan Lazim Tutorial praktikal pembangunan rangka kerja Golang: Soalan Lazim Jun 06, 2024 am 11:02 AM

Soalan Lazim pembangunan rangka kerja Go: Pemilihan rangka kerja: Bergantung pada keperluan aplikasi dan pilihan pembangun, seperti Gin (API), Echo (boleh berskala), Beego (ORM), Iris (prestasi). Pemasangan dan penggunaan: Gunakan arahan gomod untuk memasang, mengimport rangka kerja dan menggunakannya. Interaksi pangkalan data: Gunakan perpustakaan ORM, seperti gorm, untuk mewujudkan sambungan dan operasi pangkalan data. Pengesahan dan kebenaran: Gunakan pengurusan sesi dan perisian tengah pengesahan seperti gin-contrib/sesi. Kes praktikal: Gunakan rangka kerja Gin untuk membina API blog ringkas yang menyediakan POST, GET dan fungsi lain.

See all articles