使用工具:
Chrome head less
golang
EChart
环境:centos 7
首先安装上面的三款工具,不再赘述.
Chrome Headless 的最简单安装方法
curl https://intoli.com/install-google-chrome.sh | bash
请参考:https://www.jakehu.me/2019/centos-chrome-headles/
1.模板准备
首先准备一个html文件,作为生成图片的模板.我这里的模板代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<script src="jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 640px;height:480px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
$.get('dat/chart_line.json', function (jfDat) {
var chartDom = document.getElementById('main');
//alert("Here!"); // do not use it in headless mode
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {},
xAxis: [{
type: 'time',
axisTick: {
alignWithLabel: true
},
data: jfDat.x.dat,
axisLine: {
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
symbolOffset: [0, 8], //箭头段移动8个像素
color: '#01fef9' // 这儿设置安全基线颜色
}
}
],
yAxis: [],
series: []
};
// the number of yAxis based on the json file .
for (i = 0; i < jfDat.y.length; i++) {
option.yAxis.push({
type: 'value',
// name: jfDat.y[i].name,
// min: jfDat.y[i].min,
// max: jfDat.y[i].max,
position: 'left',
axisLine: {
show:true,
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
symbolOffset: [0, 8], //箭头段移动8个像素
color: '#01fef9' //
},
axisLabel: {
formatter: jfDat.y[i].fmt //'{value} ml'
}
});
option.series.push({
name: jfDat.y[i].name, //'降水量',
type: jfDat.y[i].type,
data: jfDat.y[i].dat, // [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
markLine: {
silent: true,
symbol: 'none',
lineStyle: {
normal: {
color: '#01fef9' // 这儿设置安全基线颜色
},
type: 'dashed'
},
data: [{
yAxis: jfDat.y[i].upValue,
label: {
formatter: jfDat.y[i].upLabel
}, // 这儿设置安全基线
lineStyle: {
color: jfDat.y[i].upColor
}
},
{
yAxis: jfDat.y[i].loValue,
label: {
formatter: jfDat.y[i].loLabel
}, // 这儿设置安全基线
lineStyle: {
color: jfDat.y[i].loColor
}
}
],
label: {
normal: {
formatter: '安全\n基线' // 这儿设置安全基线
}
}
},
});
}
option.animation = false;
myChart.setOption(option);
});
</script>
</body>
熟悉JS的朋友应该可以看懂,因为结构并不复杂.
json文件格式
{
"x": {
"dat": ["2021-12-19 00:41:53", "2021-12-19 00:42:59"]
},
"y": [{
"name": "加速度",
"fmt": "{value} g",
"type": "line",
"min": 0.7,
"max": 1.7,
"dat": [0.7, 1.7],
"upValue": 1,
"loValue": 0.8,
"upLabel": "加速度\r\n1.00",
"loLabel": "加速度\r\n0.80",
"upColor": "#FF0000",
"loColor": "#FFFF00"
}]
}
说明:上述模板支持多个y轴.
go 生成json文件关键代码
因为中间有很多具体的数据库查询操作,因此只列出关键代码
第一部分: json文件需要的结构定义
type xAix struct {
Dat []string `json:"dat" `
}
type yAix struct {
Name string `json:"name"`
Fmt string `json:"fmt"`
Type string `json:"type"`
Min float64 `json:"min"`
Max float64 `json:"max"`
Dat []float64 `json:"dat"`
UpValue float64 `json:"upValue"`
LoValue float64 `json:"loValue"`
UpLabel string `json:"upLabel"`
LoLabel string `json:"loLabel"`
UpColor string `json:"upColor"`
LoColor string `json:"loColor"`
}
type ChartDat struct {
X xAix `json:"x"`
Y []yAix `json:"y"`
}
数据的准备部分就是中数据库中取得数据,将上面的结构实例化并赋值.
赋值后,生成文件的代码如下:
...
jsonDatFile := "chart_line.json"
fileName := fmt.Sprintf("%s/%s/dat/%s", global.CONFIG.ECharts.Webroot, global.CONFIG.ECharts.ChartPath, jsonDatFile)
err = ioutil.WriteFile(fileName, jsDat, 0644)
if err != nil {
panic(err)
}
...
文件生成后,调用Chrome headless 代码如下:
//call chrome headless.
shellCmd := "google-chrome-stable"
shotFile := "screenshot.png"
//cmdParm := "--headless --disable-gpu --disable-software-rasterizer --screenshot " + global.CONFIG.ECharts.CharHtml
chartHtml := fmt.Sprintf("%s/%s/%s", global.CONFIG.ECharts.BaseUrl, global.CONFIG.ECharts.ChartPath, global.CONFIG.ECharts.CharHtml)
err = Toolkit.RunCommand(shellCmd, "--angle", "--no-sandbox", "--headless", "--disable-gpu", "--disable-software-rasterizer", "--screenshot", chartHtml)
if err != nil {
println(err.Error())
return
}
至此主要功能已经完成,下面笔者又对图片进行了裁剪, 因为Chrome生成的图片,空白很多.
裁剪代码如下:
// get the sub image
var imgCtr Toolkit.ImageControl
srcImg, _ := imgCtr.LoadImage(shotFile)
subImg, _ := imgCtr.ImageCopy(srcImg, 0, 0, 640, 480)
imgCtr.SaveImage(shotFile, subImg)
其中的imgCtr Toolkit.ImageControl 是图片操作函数,本人参考了网友代码完成.,原文地址是:
https://www.jianshu.com/p/d2c930c7843d
生成的样图如下:
是记备忘
maraSun 2021-12-26 BJFWDQ