Home > Article > Backend Development > How to easily draw diverse statistical charts using ECharts and golang
How to easily draw diverse statistical charts using ECharts and golang
- 王林Original
- 2023-12-18 15:40:191206browse
With the increasing demand for data analysis, drawing diverse statistical charts has become a very common need. ECharts and golang are two very good tools that can help us draw diverse charts easily. Below I will introduce how to use ECharts and golang to achieve this purpose, while providing some specific code examples.
- Installing and using ECharts
Before using ECharts, we need to install it first. You can download the latest stable version on the official website (https://echarts.apache.org) and follow the instructions to install it. After the installation is complete, we can start using ECharts to draw various types of charts.
When using ECharts, we need to prepare an array containing all the data, and then pass it to ECharts to automatically generate the corresponding chart. Below is a simple example code that plots a histogram.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = [5, 20, 36, 10, 10, 20];
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data
}]
};
myChart.setOption(option);
</script>
</body>
</html>As you can see, this sample code contains an HTML page with a JavaScript array containing data inserted into it. ECharts will automatically convert the data into a histogram and render it to the element with ID 'main'.
In addition, ECharts also provides various types of charts, such as line charts, pie charts, scatter charts, etc. We can choose different chart types according to actual needs.
- Use golang to prepare data
Golang is a very popular programming language. It supports a variety of data structures and various operations, and is very suitable for processing data. Before using ECharts, we usually need to prepare all the chart data to be drawn and convert it into a format that can be recognized by ECharts. golang can help us complete this work.
The following is a simple golang program that can generate an array containing 100 random numbers and output it into json format data.
package main
import (
"encoding/json"
"fmt"
"math/rand"
)
type Data struct {
Id int `json:"id"`
Value int `json:"value"`
}
func main() {
data := make([]Data, 0)
for i := 0; i < 100; i++ {
data = append(data, Data{Id: i, Value: rand.Intn(100)})
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("json encode error")
return
}
fmt.Println(string(jsonData))
}In this program, we use the rand package to generate an array containing 100 random numbers, and then convert it into json format data. This json data can be directly recognized by ECharts and used to draw various types of charts.
- Integrating ECharts and golang
With ECharts and golang, we can start to integrate the two and draw various types of charts. Below is a simple golang program that generates a json array containing random data and passes it to an HTML page. In the HTML page, we can use ECharts to draw this data into a histogram.
golang code:
package main
import (
"encoding/json"
"fmt"
"math/rand"
"net/http"
)
type Data struct {
Id int `json:"id"`
Value int `json:"value"`
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
data := make([]Data, 0)
for i := 0; i < 10; i++ {
data = append(data, Data{Id: i, Value: rand.Intn(100)})
}
jsonData, err := json.Marshal(data)
if err != nil {
fmt.Println("json encode error")
return
}
w.Header().Set("Content-Type", "text/html; charset=utf-8")
fmt.Fprintf(w, `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = %s;
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].id);
seriesData.push(data[i].value);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: seriesData
}]
};
myChart.setOption(option);
</script>
</body>
</html>
`, jsonData)
})
http.ListenAndServe(":8080", nil)
}In this code, we use the net/http package to create a simple web server and output json containing random data when accessing the root directory array. This json array can be used directly by HTML pages.
HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
var data = [{"id":0,"value":36},{"id":1,"value":52},{"id":2,"value":64},{"id":3,"value":89},{"id":4,"value":48},{"id":5,"value":52},{"id":6,"value":10},{"id":7,"value":75},{"id":8,"value":86},{"id":9,"value":58}];
var xAxisData = [];
var seriesData = [];
for (var i = 0; i < data.length; i++) {
xAxisData.push(data[i].id);
seriesData.push(data[i].value);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: seriesData
}]
};
myChart.setOption(option);
</script>
</body>
</html>In this HTML page, we use the JSON.parse() method to parse the json data generated by golang into a javascript array, and then pass it to ECharts. Finally, we get a nice histogram.
The above is the detailed content of How to easily draw diverse statistical charts using ECharts and golang. For more information, please follow other related articles on the PHP Chinese website!