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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

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;

Perbandingan kebaikan dan keburukan rangka kerja golang Perbandingan kebaikan dan keburukan rangka kerja golang Jun 05, 2024 pm 09:32 PM

Rangka kerja Go menyerlah kerana kelebihan prestasi tinggi dan konkurensinya, tetapi ia juga mempunyai beberapa kelemahan, seperti agak baharu, mempunyai ekosistem pembangun yang kecil dan kekurangan beberapa ciri. Selain itu, perubahan pantas dan keluk pembelajaran boleh berbeza dari rangka kerja ke rangka kerja. Rangka kerja Gin ialah pilihan popular untuk membina API RESTful kerana penghalaan yang cekap, sokongan JSON terbina dalam dan pengendalian ralat yang berkuasa.

Apakah amalan terbaik untuk pengendalian ralat dalam rangka kerja Golang? Apakah amalan terbaik untuk pengendalian ralat dalam rangka kerja Golang? Jun 05, 2024 pm 10:39 PM

Amalan terbaik: Cipta ralat tersuai menggunakan jenis ralat yang ditakrifkan dengan baik (pakej ralat) Sediakan lebih banyak butiran Log ralat dengan sewajarnya Sebarkan ralat dengan betul dan elakkan menyembunyikan atau menyekat ralat Balut seperti yang diperlukan untuk menambah konteks

Penjelasan praktikal terperinci pembangunan rangka kerja golang: Soalan dan Jawapan Penjelasan praktikal terperinci pembangunan rangka kerja golang: Soalan dan Jawapan Jun 06, 2024 am 10:57 AM

Dalam pembangunan rangka kerja Go, cabaran biasa dan penyelesaiannya ialah: Pengendalian ralat: Gunakan pakej ralat untuk pengurusan dan gunakan perisian tengah untuk mengendalikan ralat secara berpusat. Pengesahan dan kebenaran: Sepadukan perpustakaan pihak ketiga dan cipta perisian tengah tersuai untuk menyemak bukti kelayakan. Pemprosesan serentak: Gunakan goroutine, mutex dan saluran untuk mengawal akses sumber. Ujian unit: Gunakan pakej, olok-olok dan stub untuk pengasingan dan alat liputan kod untuk memastikan kecukupan. Penerapan dan pemantauan: Gunakan bekas Docker untuk membungkus penggunaan, menyediakan sandaran data dan menjejak prestasi dan ralat dengan alat pengelogan dan pemantauan.

Apakah isu pengurusan pergantungan biasa dalam rangka kerja Golang? Apakah isu pengurusan pergantungan biasa dalam rangka kerja Golang? Jun 05, 2024 pm 07:27 PM

Masalah dan penyelesaian biasa dalam pengurusan pergantungan rangka kerja Go: Konflik pergantungan: Gunakan alatan pengurusan pergantungan, nyatakan julat versi yang diterima dan semak konflik pergantungan. Kunci masuk vendor: Diselesaikan dengan pertindihan kod, penguncian fail GoModulesV2 atau pembersihan direktori vendor secara tetap. Kerentanan keselamatan: Gunakan alat pengauditan keselamatan, pilih pembekal yang bereputasi, pantau buletin keselamatan dan pastikan kebergantungan dikemas kini.

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.

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.

See all articles