后端生成统计图片方法初探--Html 导入json文件生成EChart图

MaraSun

已于 2022-08-13 10:23:49 修改

阅读量1.1k

点赞数

分类专栏：软件开发文章标签：无头浏览器使用服务端生成图片 Echart调用外部文件 go生成json文件

于 2021-12-26 23:42:21 首次发布

本文链接：https://blog.csdn.net/Uman/article/details/122162979

版权

软件开发专栏收录该内容

120 篇文章 2 订阅

订阅专栏

使用工具:
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

MaraSun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
后端生成统计图片方法初探--Html 导入json文件生成EChart图

使用工具:Chrome head lessgolangEChart环境:centos 7首先安装上面的三款工具,不再赘述.1.模板准备首先准备一个html文件,作为生成图片的模板.我这里的模板代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <script src="jquer
复制链接

扫一扫

专栏目录