首页 后端开发 Golang 如何使用ECharts和golang轻松绘制精美的统计图表

如何使用ECharts和golang轻松绘制精美的统计图表

Dec 18, 2023 pm 02:39 PM
golang echarts 统计图表

如何使用ECharts和golang轻松绘制精美的统计图表

如何使用ECharts和golang轻松绘制精美的统计图表

随着数据的不断积累和应用,统计图表已经成为了展示数据的一种重要方式。在该领域中,ECharts作为一款流行的开源JavaScript图表库,其功能强大、易用且支持大量样式和图表类型,因此在开发中得到了广泛应用。同时,golang作为一种高效的编程语言,其在Web后端的开发中也日益流行。

本篇文章主要介绍如何使用ECharts和golang绘制精美的统计图表,并给出具体的代码示例。

  1. 准备工作

在进行统计图表的开发前,我们需要准备以下工具和环境:

  • Golang环境
  • Beego框架
  • ECharts库

其中,Golang环境可以通过官网下载并安装,Beego框架可以通过以下命令进行安装:

go get github.com/astaxie/beego
登录后复制

ECharts库可以通过以下命令进行安装:

npm install echarts --save
登录后复制
  1. 绘制柱状图

首先,我们尝试绘制一张简单的柱状图。代码如下:

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用于定义图表的数据。

  1. 绘制饼图

除了柱状图,我们还可以使用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”等属性进行标签的设置。

  1. 总结

本篇文章介绍了如何使用ECharts和golang轻松绘制精美的统计图表。我们首先实现了一个简单的柱状图和饼图,并给出了具体的代码示例。通过这些实例,我们可以了解到ECharts的使用方法,并且能够将其和golang框架相结合,实现数据可视化的需求。

以上是如何使用ECharts和golang轻松绘制精美的统计图表的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用 Golang 安全地读取和写入文件? 如何使用 Golang 安全地读取和写入文件? Jun 06, 2024 pm 05:14 PM

在Go中安全地读取和写入文件至关重要。指南包括:检查文件权限使用defer关闭文件验证文件路径使用上下文超时遵循这些准则可确保数据的安全性和应用程序的健壮性。

如何为 Golang 数据库连接配置连接池? 如何为 Golang 数据库连接配置连接池? Jun 06, 2024 am 11:21 AM

如何为Go数据库连接配置连接池?使用database/sql包中的DB类型创建数据库连接;设置MaxOpenConns以控制最大并发连接数;设置MaxIdleConns以设定最大空闲连接数;设置ConnMaxLifetime以控制连接的最大生命周期。

Golang框架与Go框架:内部架构与外部特性对比 Golang框架与Go框架:内部架构与外部特性对比 Jun 06, 2024 pm 12:37 PM

GoLang框架与Go框架的区别体现在内部架构和外部特性上。GoLang框架基于Go标准库,扩展其功能,而Go框架由独立库组成,实现特定目的。GoLang框架更灵活,Go框架更容易上手。GoLang框架在性能上稍有优势,Go框架的可扩展性更高。案例:gin-gonic(Go框架)用于构建RESTAPI,而Echo(GoLang框架)用于构建Web应用程序。

如何在 Golang 中将 JSON 数据保存到数据库中? 如何在 Golang 中将 JSON 数据保存到数据库中? Jun 06, 2024 am 11:24 AM

可以通过使用gjson库或json.Unmarshal函数将JSON数据保存到MySQL数据库中。gjson库提供了方便的方法来解析JSON字段,而json.Unmarshal函数需要一个目标类型指针来解组JSON数据。这两种方法都需要准备SQL语句和执行插入操作来将数据持久化到数据库中。

如何找出 Golang 正则表达式匹配的第一个子字符串? 如何找出 Golang 正则表达式匹配的第一个子字符串? Jun 06, 2024 am 10:51 AM

FindStringSubmatch函数可找出正则表达式匹配的第一个子字符串:该函数返回包含匹配子字符串的切片,第一个元素为整个匹配字符串,后续元素为各个子字符串。代码示例:regexp.FindStringSubmatch(text,pattern)返回匹配子字符串的切片。实战案例:可用于匹配电子邮件地址中的域名,例如:email:="user@example.com",pattern:=@([^\s]+)$获取域名match[1]。

从前端转型后端开发,学习Java还是Golang更有前景? 从前端转型后端开发,学习Java还是Golang更有前景? Apr 02, 2025 am 09:12 AM

后端学习路径:从前端转型到后端的探索之旅作为一名从前端开发转型的后端初学者,你已经有了nodejs的基础,...

如何用 Golang 使用预定义时区? 如何用 Golang 使用预定义时区? Jun 06, 2024 pm 01:02 PM

Go语言中使用预定义时区包括以下步骤:导入"time"包。通过LoadLocation函数加载特定时区。在创建Time对象、解析时间字符串等操作中使用已加载的时区,进行日期和时间转换。使用不同时区的日期进行比较,以说明预定义时区功能的应用。

golang框架开发实战教程:常见疑问解答 golang框架开发实战教程:常见疑问解答 Jun 06, 2024 am 11:02 AM

Go框架开发常见问题解答:框架选择:取决于应用需求和开发者偏好,如Gin(API)、Echo(可扩展)、Beego(ORM)、Iris(性能)。安装和使用:使用gomod命令安装,导入框架并使用。数据库交互:使用ORM库,如gorm,建立数据库连接和操作。身份验证和授权:使用会话管理和身份验证中间件,如gin-contrib/sessions。实战案例:使用Gin框架构建一个简单的博客API,提供POST、GET等功能。

See all articles