如何使用ECharts和golang轻松绘制精美的统计图表-编程学习网

如何使用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”等属性进行标签的设置。