search
HomeBackend DevelopmentGolangHow to easily draw beautiful statistical charts using ECharts and golang

How to easily draw beautiful statistical charts using ECharts and golang

Dec 18, 2023 pm 02:39 PM
golangechartsstatistic chart

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.

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

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

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Choosing Between Golang and Python: The Right Fit for Your ProjectChoosing Between Golang and Python: The Right Fit for Your ProjectApr 19, 2025 am 12:21 AM

Golangisidealforperformance-criticalapplicationsandconcurrentprogramming,whilePythonexcelsindatascience,rapidprototyping,andversatility.1)Forhigh-performanceneeds,chooseGolangduetoitsefficiencyandconcurrencyfeatures.2)Fordata-drivenprojects,Pythonisp

Golang: Concurrency and Performance in ActionGolang: Concurrency and Performance in ActionApr 19, 2025 am 12:20 AM

Golang achieves efficient concurrency through goroutine and channel: 1.goroutine is a lightweight thread, started with the go keyword; 2.channel is used for secure communication between goroutines to avoid race conditions; 3. The usage example shows basic and advanced usage; 4. Common errors include deadlocks and data competition, which can be detected by gorun-race; 5. Performance optimization suggests reducing the use of channel, reasonably setting the number of goroutines, and using sync.Pool to manage memory.

Golang vs. Python: Which Language Should You Learn?Golang vs. Python: Which Language Should You Learn?Apr 19, 2025 am 12:20 AM

Golang is more suitable for system programming and high concurrency applications, while Python is more suitable for data science and rapid development. 1) Golang is developed by Google, statically typing, emphasizing simplicity and efficiency, and is suitable for high concurrency scenarios. 2) Python is created by Guidovan Rossum, dynamically typed, concise syntax, wide application, suitable for beginners and data processing.

Golang vs. Python: Performance and ScalabilityGolang vs. Python: Performance and ScalabilityApr 19, 2025 am 12:18 AM

Golang is better than Python in terms of performance and scalability. 1) Golang's compilation-type characteristics and efficient concurrency model make it perform well in high concurrency scenarios. 2) Python, as an interpreted language, executes slowly, but can optimize performance through tools such as Cython.

Golang vs. Other Languages: A ComparisonGolang vs. Other Languages: A ComparisonApr 19, 2025 am 12:11 AM

Go language has unique advantages in concurrent programming, performance, learning curve, etc.: 1. Concurrent programming is realized through goroutine and channel, which is lightweight and efficient. 2. The compilation speed is fast and the operation performance is close to that of C language. 3. The grammar is concise, the learning curve is smooth, and the ecosystem is rich.

Golang and Python: Understanding the DifferencesGolang and Python: Understanding the DifferencesApr 18, 2025 am 12:21 AM

The main differences between Golang and Python are concurrency models, type systems, performance and execution speed. 1. Golang uses the CSP model, which is suitable for high concurrent tasks; Python relies on multi-threading and GIL, which is suitable for I/O-intensive tasks. 2. Golang is a static type, and Python is a dynamic type. 3. Golang compiled language execution speed is fast, and Python interpreted language development is fast.

Golang vs. C  : Assessing the Speed DifferenceGolang vs. C : Assessing the Speed DifferenceApr 18, 2025 am 12:20 AM

Golang is usually slower than C, but Golang has more advantages in concurrent programming and development efficiency: 1) Golang's garbage collection and concurrency model makes it perform well in high concurrency scenarios; 2) C obtains higher performance through manual memory management and hardware optimization, but has higher development complexity.

Golang: A Key Language for Cloud Computing and DevOpsGolang: A Key Language for Cloud Computing and DevOpsApr 18, 2025 am 12:18 AM

Golang is widely used in cloud computing and DevOps, and its advantages lie in simplicity, efficiency and concurrent programming capabilities. 1) In cloud computing, Golang efficiently handles concurrent requests through goroutine and channel mechanisms. 2) In DevOps, Golang's fast compilation and cross-platform features make it the first choice for automation tools.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools