


How to easily draw beautiful statistical charts using ECharts and golang
How to use ECharts and golang to easily draw beautiful statistical charts
With the continuous accumulation and application of data, statistical charts have become an important way to display data. . In this field, ECharts is a popular open source JavaScript chart library. It is powerful, easy to use and supports a large number of styles and chart types, so it has been widely used in development. At the same time, as an efficient programming language, golang is becoming increasingly popular in Web back-end development.
This article mainly introduces how to use ECharts and golang to draw beautiful statistical charts, and gives specific code examples.
- Preparation work
Before developing statistical charts, we need to prepare the following tools and environments:
- Golang environment
- Beego Framework
- ECharts Library
Among them, the Golang environment can be downloaded and installed through the official website, and the Beego framework can be installed through the following command:
go get github.com/astaxie/beego
ECharts The library can be installed with the following command:
npm install echarts --save
- Drawing histogram
First, we try to draw a simple histogram. The code is as follows:
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" }
In the code, we define a controller named MainController and implement the Get method. Among them, we define an array named data, which contains the data of the histogram. We then pass this data to the "chart_data" variable in the template, as well as the chart type "chart_type" variable. Specifically, we used "bar" as the type of histogram.
Next, we need to layout in the template and use the ECharts library to render the chart. The code is as follows:
{{.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>
In the code, we first use {{.chart_data}} and {{.chart_type}} to output the data and chart type so that we can check the correctness of the data when debugging. Then, we use conditional statements to determine whether the data has been passed, and the chart area will be displayed only after the data is passed.
Next, we introduced the ECharts library and used the echarts.init method to initialize a DOM element with a specified ID. In this example, we added some basic configuration items, such as title, tooltip, legend, xAxis, yAxis, series, etc. Among them, xAxis and yAxis define the data of the horizontal axis and the vertical axis respectively, and series is used to define the data of the chart.
- Drawing pie charts
In addition to histograms, we can also use ECharts and golang to draw other types of charts. Next we try to draw a pie chart. The code is as follows:
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" }
In the code, we define a map named data, which contains the data of the pie chart. Similar to the previous section, we pass this data to the "chart_data" variable in the template, as well as the chart type "chart_type" variable. However, this time we are using "pie" as the pie chart type.
Next, we lay out the template and use the ECharts library to render the chart. The code is as follows:
{{.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>
In the code, we first use {{.chart_data}} and {{.chart_type}} to output data and chart types. Then, we also use conditional statements to control whether the chart area is displayed.
In the configuration items of the chart, we use the "data" array with a specific format to define the data of the chart. Among them, value is used to represent the size of the data, and name is used to represent the name of the data. At the same time, we can also use attributes such as "label" and "labelLine" to set labels.
- Summary
This article introduces how to use ECharts and golang to easily draw beautiful statistical charts. We first implemented a simple bar chart and pie chart, and gave specific code examples. Through these examples, we can learn how to use ECharts and combine it with the golang framework to achieve data visualization needs.
The above is the detailed content of How to easily draw beautiful statistical charts using ECharts and golang. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Reading and writing files safely in Go is crucial. Guidelines include: Checking file permissions Closing files using defer Validating file paths Using context timeouts Following these guidelines ensures the security of your data and the robustness of your application.

How to configure connection pooling for Go database connections? Use the DB type in the database/sql package to create a database connection; set MaxOpenConns to control the maximum number of concurrent connections; set MaxIdleConns to set the maximum number of idle connections; set ConnMaxLifetime to control the maximum life cycle of the connection.

Golang and C++ are garbage collected and manual memory management programming languages respectively, with different syntax and type systems. Golang implements concurrent programming through Goroutine, and C++ implements it through threads. Golang memory management is simple, and C++ has stronger performance. In practical cases, Golang code is simpler and C++ has obvious performance advantages.

The learning curve of the Go framework architecture depends on familiarity with the Go language and back-end development and the complexity of the chosen framework: a good understanding of the basics of the Go language. It helps to have backend development experience. Frameworks that differ in complexity lead to differences in learning curves.

How to generate random elements of a list in Golang: use rand.Intn(len(list)) to generate a random integer within the length range of the list; use the integer as an index to get the corresponding element from the list.

The Go framework stands out due to its high performance and concurrency advantages, but it also has some disadvantages, such as being relatively new, having a small developer ecosystem, and lacking some features. Additionally, rapid changes and learning curves can vary from framework to framework. The Gin framework is a popular choice for building RESTful APIs due to its efficient routing, built-in JSON support, and powerful error handling.

Best practices: Create custom errors using well-defined error types (errors package) Provide more details Log errors appropriately Propagate errors correctly and avoid hiding or suppressing Wrap errors as needed to add context

How to use Go framework documentation? Determine the document type: official website, GitHub repository, third-party resource. Understand the documentation structure: getting started, in-depth tutorials, reference manuals. Locate the information as needed: Use the organizational structure or the search function. Understand terms and concepts: Read carefully and understand new terms and concepts. Practical case: Use Beego to create a simple web server. Other Go framework documentation: Gin, Echo, Buffalo, Fiber.
