search

Home >Backend Development >Golang >ECharts and golang in action: Tutorial on making beautiful statistical charts

ECharts and golang in action: Tutorial on making beautiful statistical charts

WBOY
WBOYOriginal
2023-12-18 12:52:171307browse

ECharts和golang实战: 制作精美的统计图表教程

ECharts and golang practical combat: tutorial on making beautiful statistical charts

Introduction
Data visualization is an indispensable part of modern web applications. ECharts is a powerful and flexible open source charting library, while golang is a powerful and fast programming language. Combining the two can achieve beautiful statistical chart effects in web applications. This article will introduce you to how to use ECharts and golang to create beautiful statistical charts, and provide specific code examples.

1. Preparation
Before starting, we need to install the corresponding software and load the necessary libraries.

  1. Install golang
    First, you need to download and install golang. You can visit the Golang official website (https://golang.org/) to download the latest version of golang and install it according to the official guide.
  2. Installing ECharts
    ECharts can be installed through npm. Run the following command in the terminal to install ECharts. 
npm install echarts --save
  1. Create golang project
    Create a new golang project and initialize a new golang module using the following commands. 
go mod init your_project_name

Then, use the following commands to install the necessary libraries. 

go get github.com/gin-gonic/gin

2. Create a Web server
You can easily create a Web server using the gin framework in golang.

Create a file named main.go in your golang project and add the following code to the file. 

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    router := gin.Default()

    router.LoadHTMLGlob("templates/*")

    router.GET("/", func(c *gin.Context) {
        c.HTML(http.StatusOK, "index.html", gin.H{})
    })

    router.Run(":8080")
}

Create a file named index.html in the templates folder and add the following code. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts and golang</title>
    <script src="/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        // 在这里编写ECharts的代码
    </script>
</body>
</html>

3. Write ECharts code
In the index.html file, you can write ECharts code to create various statistical charts.

First, add a div element inside the body tag and set the width and height.

Then, add the ECharts code within the script tag.

Suppose we want to draw a histogram, we can use the following code. 

<script>
    var chart = echarts.init(document.getElementById('chart'));

    var option = {
        title: {
            text: '柱状图'
        },
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10]
        }]
    };

    chart.setOption(option);
</script>

This code creates a histogram, the x-axis shows the classification of the data, and the y-axis shows the sales volume. By setting the data attribute of the series, you can set the specific data of the histogram.

Depending on your needs, you can write various types of chart codes and add them to the index.html file.

4. Run Web Application
In the terminal, use the following command to run your golang application. 

go run main.go

Next, open a browser and visit http://localhost:8080.

You will see a web page showing a histogram.

By writing the corresponding ECharts code, you can create various types of statistical charts and display them in web applications.

Conclusion
By combining ECharts and golang, we can easily create beautiful statistical charts. This article introduces you to how to create a web server and use ECharts to write statistical chart code in a web application. I hope this article can help you deepen your understanding of ECharts and golang, and add more vivid and interesting data visualization effects to your web applications.

The above is the detailed content of ECharts and golang in action: Tutorial on making beautiful statistical charts. For more information, please follow other related articles on the PHP Chinese website!

golang gin echarts html npm http https
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
Previous article：How to use ECharts and golang to create professional-level statistical chartsNext article：How to use ECharts and golang to create professional-level statistical charts

Related articles

See more