Go Echarts
最后修改时间 2024 年 4 月 11 日
在本文中，我们将展示如何使用 go-echarts 库在 Golang 中创建图表。
go-echarts 是一个 Golang 的图表库。它不生成图片，而是利用 Apache ECharts JS 库在 HTML 文档中生成图表。
使用 go-echarts 可以创建交互式图表。
折线图
折线图是一种基本的图表类型，它将信息显示为一系列由线段连接的数据点。这些线可以是直线或曲线。
line_chart.go
package main
import (
"os"
"github.com/go-echarts/go-echarts/v2/charts"
"github.com/go-echarts/go-echarts/v2/opts"
"github.com/go-echarts/go-echarts/v2/types"
)
func main() {
sals := []opts.LineData{{Value: 567}, {Value: 612}, {Value: 800},
{Value: 980}, {Value: 1410}, {Value: 2350}}
ages := []string{"18", "20", "25", "30", "40", "50"}
line := charts.NewLine()
line.SetGlobalOptions(
charts.WithInitializationOpts(opts.Initialization{Theme: types.ThemeWesteros}),
charts.WithTitleOpts(opts.Title{Title: "Average salary per age",
Subtitle: "Slovakia"}),
)
line.SetXAxis(ages).AddSeries("salaries", sals)
line.SetSeriesOptions(charts.WithLineChartOpts(
opts.LineChart{
Smooth: true,
}))
f, _ := os.Create("scatter.html")
line.Render(f)
}
该示例创建一个折线图，显示每个年龄段的平均工资。
sals := []opts.LineData{{Value: 567}, {Value: 612}, {Value: 800},
{Value: 980}, {Value: 1410}, {Value: 2350}}
salaries 是一个 `opt.LineData` 结构体切片。这些是 y 轴的值。
ages := []string{"18", "20", "25", "30", "40", "50"}
这些字符串是 x 轴的值。
line := charts.NewLine()
折线图使用 `charts.NewLine` 初始化。
line.SetGlobalOptions(
charts.WithInitializationOpts(opts.Initialization{Theme: types.ThemeWesteros}),
charts.WithTitleOpts(opts.Title{Title: "Average salary per age",
Subtitle: "Slovakia"}),
)
我们初始化图表选项；我们设置图表的主题、标题和副标题。
line.SetXAxis(ages).AddSeries("salaries", sals)
我们设置 x 轴和 y 轴的数据。
line.SetSeriesOptions(charts.WithLineChartOpts(
opts.LineChart{
Smooth: true,
}))
我们的线是平滑的，也就是说，我们有曲线而不是直线。
f, _ := os.Create("scatter.html")
我们创建一个 HTML 文件，图表将被写入其中。
line.Render(f)
图表使用 `Render` 函数进行渲染。
散点图
散点图使用点来表示两个不同数值变量的值，每个变量一个轴，以寻找它们之间的关系。
scatter_chart.go
package main
import (
"os"
"github.com/go-echarts/go-echarts/v2/charts"
"github.com/go-echarts/go-echarts/v2/opts"
"github.com/go-echarts/go-echarts/v2/types"
)
func main() {
temps := []opts.ScatterData{{Value: -7.3}, {Value: -3.4}, {Value: -5.0},
{Value: -0.9}, {Value: -2.2}, {Value: 4.8}, {Value: 5.1}, {Value: -1.9},
{Value: 0}, {Value: 2.6}}
dates := []string{"Jan 1", "Jan 10", "Jan 12", "Jan 20", "Jan 30", "Feb 1",
"Feb 2", "Feb 5", "Feb 8", "Feb 12"}
scatter := charts.NewScatter()
scatter.SetGlobalOptions(
charts.WithInitializationOpts(opts.Initialization{Theme: types.ThemeWesteros}),
charts.WithTitleOpts(opts.Title{Title: "Temperatures"}),
)
scatter.SetXAxis(dates).AddSeries("temps", temps)
f, _ := os.Create("scatter.html")
scatter.Render(f)
}
该图表显示了一系列日期的温度。我们使用 `opts.ScatterData` 结构体来定义 y 值，并使用 `charts.NewScatter` 来创建新的散点图。
条形图
条形图使用矩形条展示分组数据，条的长度与它们代表的值成正比。我们可以有 2D 和 3D 条形图，条形可以垂直或水平绘制。
bar_chart.go
package main
import (
"os"
"github.com/go-echarts/go-echarts/v2/charts"
"github.com/go-echarts/go-echarts/v2/opts"
"github.com/go-echarts/go-echarts/v2/types"
)
func main() {
medals := []opts.BarData{{Value: 46},
{Value: 38}, {Value: 29},
{Value: 22}, {Value: 13}, {Value: 11}}
countries := []string{"USA", "China", "UK", "Russia",
"South Korea", "Germany"}
bar := charts.NewBar()
bar.SetGlobalOptions(
charts.WithInitializationOpts(opts.Initialization{Theme: types.ThemeWesteros}),
charts.WithTitleOpts(opts.Title{Title: "Olympic Gold medals in London"}))
bar.SetXAxis(countries)
bar.AddSeries("medals", medals)
f, _ := os.Create("bar.html")
bar.Render(f)
}
代码示例使用条形图显示 2012 年伦敦奥运会每个国家的金牌数量。我们使用 `opts.BarData` 结构体来定义 y 值，并使用 `charts.NewBar` 来创建新的条形图。
饼图
饼图是一种圆形图表，它被分成几个扇区来展示数值比例。
pie_chart.go
package main
import (
"os"
"github.com/go-echarts/go-echarts/v2/charts"
"github.com/go-echarts/go-echarts/v2/opts"
"github.com/go-echarts/go-echarts/v2/types"
)
func main() {
destinations := []opts.PieData{{Name: "Croatia", Value: 22},
{Name: "Bohemia", Value: 34}, {Name: "Bulgaria", Value: 18},
{Name: "Spain", Value: 5}, {Name: "Others", Value: 21}}
pie := charts.NewPie()
pie.SetGlobalOptions(
charts.WithInitializationOpts(opts.Initialization{Theme: types.ThemeChalk}),
charts.WithTitleOpts(opts.Title{Title: "Popular destinations"}),
)
pie.AddSeries("destinations", destinations)
f, _ := os.Create("pie.html")
pie.Render(f)
}
该示例展示了热门旅游目的地。我们使用 `opts.PieData` 结构体来定义 y 值，并使用 `charts.NewPie` 来创建新的饼图。
HTTP 服务器生成的图表
在下一个示例中，我们创建一个简单的 HTTP 服务器来生成图表。
net_chart.go
package main
import (
"fmt"
"log"
"math/rand"
"net/http"
"github.com/go-echarts/go-echarts/v2/charts"
"github.com/go-echarts/go-echarts/v2/opts"
"github.com/go-echarts/go-echarts/v2/types"
)
func randomData() []opts.LineData {
data := make([]opts.LineData, 0)
for i := 0; i < 7; i++ {
data = append(data, opts.LineData{Value: rand.Intn(300)})
}
return data
}
func httpserver(w http.ResponseWriter, _ *http.Request) {
line := charts.NewLine()
line.SetGlobalOptions(
charts.WithInitializationOpts(opts.Initialization{Theme: types.ThemeWesteros}),
charts.WithTitleOpts(opts.Title{
Title: "Line charts",
Subtitle: "Rendered by the http server",
}))
line.SetXAxis([]string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}).
AddSeries("Category A", randomData()).
AddSeries("Category B", randomData())
line.SetSeriesOptions(charts.WithLineChartOpts(opts.LineChart{Smooth: true}))
line.Render(w)
}
func main() {
http.HandleFunc("/", httpserver)
fmt.Println("Server started at port 8081")
log.Fatal(http.ListenAndServe(":8081", nil))
}
服务器在 `localhost:8081` 上监听。它生成一个包含两条曲线的图表。数据是随机生成的。
来源
在本文中，我们使用 go-echarts 在 Go 中创建了图表。