基于 Echarts + Golang gin 实现的动态实时可视化数据大屏展示范例一

最新推荐文章于 2024-06-16 09:33:01 发布

置顶昵称6550523

最新推荐文章于 2024-06-16 09:33:01 发布

阅读量4.5k

点赞数

分类专栏： Golang 文章标签：可视化 golang

本文链接：https://blog.csdn.net/QQ6550523/article/details/106930211

版权

Golang 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

参考这个案例https://blog.csdn.net/lildkdkdkjf/article/details/106571356，手痒，改成Golang版：）

先看效果图：

实现原理：

前端Echarts实现：https://echarts.apache.org/zh/index.html，前端就不贴了，在最后的网盘地址里下载。

后台Golang实现，用https://github.com/gin-gonic/gin启动一个http服务，加载页面。再用https://github.com/zserge/lorca调用本机的Chrome浏览器访问该页面。用https://github.com/astaxie/beego/orm访问数据库，模拟获取数据。

关键代码：

main.go

package main

import (
	"fmt"
	"time"

	"github.com/go-vgo/robotgo"
	"github.com/zserge/lorca"
)

var ui lorca.UI
var loadFinished bool

//模拟刷新数据
func ChangeData() {
	for 1 == 1 {
		time.Sleep(1000)
		change_all_json()
		//db_change_common()
		//db_read_common()
		if loadFinished == true {
			ui.Eval(`
               async_data();
			`)
		}
	}
}

func main() {
	go init_http_server()
	ui, _ = lorca.New(fmt.Sprintf("http://%s:%d", ip, port), "", 1024, 768)

	//记得在html里加<body onload=loadFinished()>
	ui.Bind("loadFinished", func() { loadFinished = true })

	//需要先安装mingw64，http://www.mingw-w64.org/doku.php/download
	robotgo.KeyTap(`f11`) //全屏

	defer ui.Close()

	go ChangeData()
	<-ui.Done()
}

httpserver.go

package main

import (
	"fmt"
	"github.com/gin-gonic/gin"
)

var ip string = "localhost"   //监听IP，配置项
var port int = 8815      //监听端口，配置项

func init_http_server() {
	router := gin.Default()
	router.Static("/css", "./css")
	router.Static("/font", "./font")
	router.Static("/images", "./images")
	router.Static("/js", "./js")
	router.Static("/json", "./json")
	router.Static("/picture", "./picture")
	router.LoadHTMLFiles("./index.html")
	router.GET("/", func(c *gin.Context) {
		c.HTML(200, "index.html", nil)
	})
	router.Run(fmt.Sprintf(":%d", port))
}

database.go

package main

import (
	"fmt"
	"github.com/astaxie/beego/orm"
	_ "github.com/go-sql-driver/mysql" // import your used driver
	"strconv"

	"encoding/json"
)

func init() {
	orm.RegisterDataBase("default", "mysql", "user:password@tcp(ip:3306)/database?charset=utf8", 30)
}

func db_change_common(){
	total_pv := int64(100000)
	total_income := int64(200000)
	start := int64(100000)
	end := int64(400000)

	total_pv = total_pv + RandInt64(start, end)
	total_income = total_income + RandInt64(start, end)
	fmt.Printf("%d\n", total_pv)
	fmt.Printf("%d\n", total_income)

	//更新数据库
	db := orm.NewOrm()
	sql := fmt.Sprintf("update bigscreeen_common set total_pv=%d, total_income = %d ", total_pv, total_income)
	fmt.Println(sql)
	_, err := db.Raw(sql).Exec()
	if err != nil {
		fmt.Printf("err: %s\n", err.Error())
	}else{
		fmt.Println("ok")
	}
}

func db_read_common() {
	db := orm.NewOrm()
	var maps []orm.Params
	var num int64
	num, err := db.Raw("SELECT * FROM bigscreeen_common").Values(&maps)
	if err != nil {
		fmt.Printf("err: %s\n", err.Error())
		return
	}else{
		if num > 0 {
			fmt.Println("ok")
		} else {
			fmt.Println("no data")
			return
		}
	}
    var common Common
    common.Total_pv, _ = strconv.ParseInt((maps[0]["total_pv"]).(string), 10, 64)
	common.Total_income, _ = strconv.ParseInt((maps[0]["total_income"]).(string), 10, 64)
    b_common, _ := json.Marshal(common)
	write_config(common_FILENAME, string(b_common))
}

//func main() {
//	db_change_common()
//	db_read_common()
//}

示例程序在这的“大数据可视化展示”里，包含完整的前端源码。运行GoDataV.exe前记得安装最新的Chrome浏览器，按F11放大缩小。

链接：https://pan.baidu.com/s/1WoBGL42yemaJLu_Plw5blQ
提取码：gkrm

需要linux或Mac版的请找作者编译一个。

昵称6550523

关注

0
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
5
评论
基于 Echarts + Golang gin 实现的动态实时可视化数据大屏展示范例一

参考这个案例https://blog.csdn.net/lildkdkdkjf/article/details/106571356，手痒，改成Golang版：）先看效果图：看起来和Python版的一模一样:)实现原理：前端Echarts实现：https://echarts.apache.org/zh/index.html后台Golang实现，用https://github.com/gin-gonic/gin启动一个http服务，加载页面。再用https://github.com/zs
复制链接

扫一扫