如何使用ECharts和golang輕鬆繪製精美的統計圖表-Golang-PHP中文網

如何使用ECharts和golang輕鬆繪製精美的統計圖表

#隨著數據的不斷累積和應用，統計圖表已經成為了展示數據的一種重要方式。在該領域中，ECharts作為一款流行的開源JavaScript圖表庫，其功能強大、易用且支援大量樣式和圖表類型，因此在開發中得到了廣泛應用。同時，golang作為一種高效率的程式語言，其在Web後端的開發中也日益普及。

本篇文章主要介紹如何使用ECharts和golang繪製精美的統計圖表，並給出具體的程式碼範例。

準備工作

在進行統計圖表的開發前，我們需要準備以下工具和環境：

Golang環境
Beego框架
ECharts庫

其中，Golang環境可以透過官網下載並安裝，Beego框架可以透過以下命令進行安裝：

go get github.com/astaxie/beego

登入後複製

ECharts函式庫可以透過以下指令進行安裝：

npm install echarts --save

登入後複製

繪製長條圖

首先，我們嘗試繪製一張簡單的長條圖。程式碼如下：

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

登入後複製

在程式碼中，我們定義了一個名為MainController的控制器，並實作了Get方法。其中，我們定義了一個名為data的數組，該數組包含了長條圖的資料。然後，我們將這些資料傳遞給模板中的“chart_data”變量，以及圖表類型“chart_type”變數。具體地，我們使用了「bar」作為長條圖的類型。

接下來，我們需要在範本中進行佈局，並使用ECharts庫來渲染圖表。程式碼如下：

{{.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>

登入後複製

在程式碼中，我們首先使用{{.chart_data}}和{{.chart_type}}來輸出資料和圖表類型，以便我們在進行偵錯時檢查資料的正確性。然後，我們使用條件語句來判斷是否傳遞了數據，在傳遞了數據後才會顯示圖表區域。

接著，我們引入了ECharts函式庫，並使用echarts.init方法來初始化一個具有指定ID的DOM元素。在這個實例上，我們加入了一些基本的配置項，例如title、tooltip、legend、xAxis、yAxis和series等。其中，xAxis和yAxis分別定義了橫軸和縱軸的數據，series用於定義圖表的數據。

繪製圓餅圖

除了長條圖，我們還可以使用ECharts和golang繪製其他類型的圖表。下面我們嘗試繪製一張圓餅圖。程式碼如下：

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

登入後複製

在程式碼中，我們定義了一個名為data的map，其中包含了餅圖的資料。和上一節類似，我們將這些資料傳遞給模板中的「chart_data」變量，以及圖表類型「chart_type」變數。不過，這次我們使用了「pie」作為餅圖的類型。

接下來，我們在範本中進行佈局，並使用ECharts庫來渲染圖表。程式碼如下：

{{.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>

登入後複製

在程式碼中，我們首先使用{{.chart_data}}和{{.chart_type}}來輸出資料和圖表類型。然後，我們同樣使用條件語句來控制圖表區域是否顯示。

在圖表的配置項目中，我們使用了具有特定格式的「data」陣列來定義圖表的資料。其中，value用來表示資料的大小，name用來表示資料的名稱。同時，我們也可以使用「label」和「labelLine」等屬性進行標籤的設定。