繪製圖表 go-echarts

1. echarts 是什麼？

echarts 是百度開發圖表庫，對於經常需要圖表展示的開發者來說，是一個非常大的福利。

2. 爲什麼那麼受歡迎？

豐富的圖表類型，條形、折線、餅型、等等應有盡有
強勁的渲染引擎
專業的數據分析
優雅的可視化設計
健康的開源社區
友好的無障礙訪問

3. 怎麼使用

下載擴展庫 github.com/go-echarts/go-echarts/v2/charts 即可使用。

一個簡單的條形圖

步驟如下：

New 一個條形圖對象
設置標題和子標題
設置數據組
繪圖生成 html

package main

import (
 "github.com/go-echarts/go-echarts/v2/charts"
 "github.com/go-echarts/go-echarts/v2/opts"
 "math/rand"
 "os"
)

// 數據生成數據
func generateBarItems() []opts.BarData {
 items := make([]opts.BarData, 0)
 for i := 0; i < 7; i++ {
  items = append(items, opts.BarData{Value: rand.Intn(300)})
 }
 return items
}

func main() {
 // 1.New 一個條形圖對象
 bar := charts.NewBar()
 // 2.設置 標題 和 子標題
 bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
  Title:    "My first bar chart generated by go-echarts",
  Subtitle: "It's extremely easy to use, right?",
 }))

 // 3.設置 數據組
 bar.SetXAxis([]string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}).
  AddSeries("Category A", generateBarItems()).
  AddSeries("Category B", generateBarItems())
 // 4.繪圖 生成html
 f, _ := os.Create("bar.html")
 bar.Render(f)
}

直接運行，會生成 bar.html，打開後可以看到下面圖表：

alt 條形圖

假設我們要把剛纔的條形圖，改成折線圖，怎麼做呢？

類似的方式，我們可以得到折線圖。僅僅修改了兩處：

同理，還有各種各樣的圖形，我們都可以生成，只需要創建對應的對象，填充數據即可，非常方便。

New 一個折線圖對象
設置折線圖數據

package main

import (
 "github.com/go-echarts/go-echarts/v2/charts"
 "github.com/go-echarts/go-echarts/v2/opts"
 "math/rand"
 "os"
)

// generate random data for line chart
func generateLineItems2() []opts.LineData {
 items := make([]opts.LineData, 0)
 for i := 0; i < 7; i++ {
  items = append(items, opts.LineData{Value: rand.Intn(300)})
 }
 return items
}

func main() {
 // 1.New 一個折線圖對象
 line := charts.NewLine()
 // 2.設置 標題 和 子標題
 line.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
  Title:    "My first lines chart generated by go-echarts",
  Subtitle: "It's extremely easy to use, right?",
 }))

 // 3.設置 數據組
 line.SetXAxis([]string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}).
  AddSeries("Category A", generateLineItems2()).
  AddSeries("Category B", generateLineItems2()).
  SetSeriesOptions(charts.WithLineChartOpts(opts.LineChart{Smooth: true}))

 // 4.繪圖 生成html
 f, _ := os.Create("lines.html")
 line.Render(f)
}

直接運行，會生成 lines.html，打開後可以看到下面圖表：

可以直接生成圖表的 http server，並 http 請求查看改成 http server 的方式也非常簡單，只需要做下面兩處修改：

然後就可以在瀏覽器深入：http://localhost:8081/ 直接訪問了。

添加 http 處理函數，line.Render(w) 傳入 ResponseWriter
調用 ListenAndServe 監聽 8081 端口，即可

package main

import (
 "github.com/go-echarts/go-echarts/v2/charts"
 "github.com/go-echarts/go-echarts/v2/opts"
 "math/rand"
 "net/http"
)

// generate random data for line chart
func generateLineItems3() []opts.LineData {
 items := make([]opts.LineData, 0)
 for i := 0; i < 7; i++ {
  items = append(items, opts.LineData{Value: rand.Intn(300)})
 }
 return items
}

func httpserver(w http.ResponseWriter, _ *http.Request) {
 // 1.New 一個折線圖對象
 line := charts.NewLine()
 // 2.設置 標題 和 子標題
 line.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
  Title:    "My first lines chart generated by go-echarts",
  Subtitle: "It's extremely easy to use, right?",
 }))

 // 3.設置 數據組
 line.SetXAxis([]string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}).
  AddSeries("Category A", generateLineItems3()).
  AddSeries("Category B", generateLineItems3()).
  SetSeriesOptions(charts.WithLineChartOpts(opts.LineChart{Smooth: true}))

 // 4.繪圖 生成html
 line.Render(w)
}

func main() {
 http.HandleFunc("/", httpserver)
 http.ListenAndServe(":8081", nil)
}

直接運行，本地會啓動 http 服務；
在瀏覽器深入：http://localhost:8081/, 打開後可以看到下面圖表：

alt 條形圖

總結

go-echarts 這個庫用來繪製各種各樣的圖表，非常方便，大家可以多動手試試，希望你能喜歡哦！

以上所有內容均採用最新官方案例做示例

參考資料

github.com/go-echarts/go-echarts/v2/charts
圖片上傳及查看，使用 swarm 網關實現

還想了解更多嗎？

更多請查看：https://github.com/go-echarts/go-echarts/v2/charts

歡迎加入我們 GOLANG 中國社區：https://gocn.vip/

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/2uzMqz8eh_Qsy_WPomibHw

猜你喜歡