Cara mudah melukis carta statistik yang cantik menggunakan ECharts dan golang

PHPz
Lepaskan: 2023-12-18 14:39:57
asal
1267 orang telah melayarinya

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!

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan