Home > Article > Backend Development > ECharts and golang: Tips and experiences in making practical statistical charts

ECharts and golang: Tips and experiences in making practical statistical charts

PHPzOriginal: 2023-12-17 09:04:361112browse

ECharts和golang: 制作实用的统计图表的技巧与经验

ECharts and golang: Skills and experience in making practical statistical charts, specific code examples are needed

With the popularity of data processing, data visualization has become many application fields essential skills. And tools for making charts have also emerged. ECharts is an open source data visualization tool, and golang is a high-efficiency and high-concurrency language. The combination of the two can create efficient and practical charts.

This article will introduce the skills and experience of using ECharts and golang to make practical statistical charts, and provide specific code examples.

First, we need to pass data from the backend to the frontend. In golang, you can use the http package to implement simple web services. For example, the following is a simple web server:

package main

import (
    "encoding/json"
    "net/http"
)

type Data struct {
    Label string `json:"label"`
    Value int    `json:"value"`
}

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := []Data{
            {"January", 10},
            {"February", 20},
            {"March", 30},
            {"April", 25},
            {"May", 15},
            {"June", 5},
        }

        jsonData, err := json.Marshal(data)
        if err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
            return
        }

        w.Header().Set("Content-Type", "application/json")
        w.Write(jsonData)
    })

    http.ListenAndServe(":8080", nil)
}

Next, we will use ECharts on the front end to display data. First, ECharts needs to be introduced in html:

<!DOCTYPE html>
<html>
<head>
  <title>Chart Example</title>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px;height:400px;"></div>
  <script src="chart.js"></script>
</body>
</html>

We introduced ECharts in the head tag and placed a div in the body to host the chart. At the same time, we also introduced a js file named "chart.js" for loading data and drawing charts.

The following is the code we use to draw charts using ECharts:

fetch('/').then(function(response) {
    return response.json();
}).then(function(data) {
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: 'My Chart',
            left: 'center',
        },
        tooltip: {},
        xAxis: {
            data: data.map(function(item) {
                return item.label;
            })
        },
        yAxis: {},
        series: [{
            type: 'bar',
            data: data.map(function(item) {
                return item.value;
            })
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
});

The code uses the fetch function to request data and uses the json() method to parse the response data into json object. We then created an ECharts instance and set up a title, tooltip, X/Y axes, and a bar series for the chart.

Finally, run the server using golang in the application, and then open the html file in the browser. At this point we can see a chart drawn using ECharts and golang, which displays some data we defined on the backend.

The above is a basic example of using ECharts and golang to create practical statistical charts. If you need to make more complex charts, you can find the appropriate configuration options in the official documentation of ECharts and use golang to manage the data. With constant trial and practice, you will be able to create charts that are both highly practical and beautiful.

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

golang json echarts html 并发 JS 对象 http

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：From beginner to proficient: Use ECharts and golang to create professional-level statistical chartsNext article：From beginner to proficient: Use ECharts and golang to create professional-level statistical charts

See more

ECharts and golang: Tips and experiences in making practical statistical charts

Related articles