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

Pustaka ECharts boleh dipasang melalui arahan berikut:

npm install echarts --save

2. 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"
}

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>

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.

3. 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"
}

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>

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.

4. 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!