繪製圖表 go-echarts

繪製圖表 go-echarts

1. echarts 是什麼？

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

2. 為什麼那麼受歡迎？

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

3. 怎麼使用

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

1. 一個簡單的條形圖

步驟如下： - 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，開啟後可以看到下面圖表：

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

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

• 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，開啟後可以看到下面圖表：

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

   • 新增 http 處理函式，line.Render(w) 傳入 ResponseWriter
   • 呼叫 ListenAndServe 監聽 8081 埠，即可

   然後就可以在瀏覽器深入：http://localhost: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)
}

1.直接執行，本地會啟動 http 服務；

2.在瀏覽器深入：http://localhost:8081/, 開啟後可以看到下面圖表：

總結

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

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

參考資料

• github.com/go-echarts/go-echarts/v2/charts
• 圖片上傳及檢視，使用 swarm 閘道器實現