Golang 數據可視化利器 go-echarts 開源啦

目標：在瀏覽器中顯示 柱狀圖

原文中漂亮的代碼在圖片中，無法復制，自己動手寫吧，代碼：

package main

import (
    "net/http"
    "os"

    "github.com/go-echarts/go-echarts/charts"
)

func main() {
    http.HandleFunc("/", handler)
    //exec.Command(`cmd`, `/c`, `start`, `http://localhost:8081`).Start() //windows
    http.ListenAndServe(":8081", nil)

}

func handler(w http.ResponseWriter, _ *http.Request) {
    nameItems := []string{"衣", "食", "住"}
    bar := charts.NewBar()
    bar.SetGlobalOptions(charts.TitleOpts{Title: "my示例圖"})
    bar.AddXAxis(nameItems).
        AddYAxis("商家A", []int{10, 20, 30}).
        AddYAxis("商家B", []int{15, 25, 35})
    f, _ := os.Create("mybar.html")
    bar.Render(w, f)

}

然而，什么也沒顯示。最后查看網頁源代碼，發現有如下兩句

  <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
    <link href="https://go-echarts.github.io/go-echarts-assets/assets/bulma.min.css" rel="stylesheet">

這兩個地址在咱們閉關區域當然訪問不了，到github上查了一下，可以修改bar.AssetsHost解決。

首先在go代碼目錄下建assets子目錄，再從網上找到echarts.min.js和bulma.min.css下載到該目錄中

修改代碼如下：

package main

import (
    "net/http"
    "os"

    "github.com/go-echarts/go-echarts/charts"
)

func main() {
    //靜態文件服務
    http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("./assets"))))
    http.HandleFunc("/", handler)
    //exec.Command(`cmd`, `/c`, `start`, `http://localhost:8081`).Start() //windows
    http.ListenAndServe(":8081", nil)

}

func handler(w http.ResponseWriter, _ *http.Request) {
    nameItems := []string{"衣", "食", "住"}
    bar := charts.NewBar()
    bar.SetGlobalOptions(charts.TitleOpts{Title: "my示例圖"})
    bar.SetGlobalOptions(charts.InitOpts{AssetsHost: "http://localhost:8081/assets/"})
    bar.AddXAxis(nameItems).
        AddYAxis("商家A", []int{10, 20, 30}).
        AddYAxis("商家B", []int{15, 25, 35})
    f, _ := os.Create("mybar.html")
    bar.Render(w, f)

}

成功顯示柱狀圖。

更多樣式請參考下面的原文吧。

 

參考：https://www.jianshu.com/p/2da74fb808e6