Jenkins中显示echart图表

最新推荐文章于 2024-05-14 01:55:11 发布

washli2001

最新推荐文章于 2024-05-14 01:55:11 发布

阅读量1.8k

点赞数 1

分类专栏： Linux 文章标签：测试开发

本文链接：https://blog.csdn.net/washli2001/article/details/102480577

版权

Linux 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

工作中需要统计多个产品线的代码覆盖率，由于涉及jenkins工作任务过多，查看各个结果需要逐一打开，

于是就想通过用html文件做一个展现模板， jenkins任务根据实际数据修改该文件中的值并展现出来。

1、编写html文件

<!DOCTYPE html>
<html>
<head>
<title>JenkinsReport</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
<h1 style="text-align:center">测试覆盖率汇总表</h1>
<hr>
<div id="main" style="width:1500px;height:500px;margin:0 auto"></div>
</div>
<script>
var myChart;
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar',
],
function (ec) {
myChart = ec.init(document.getElementById('main'));
var option = {
                   tooltip:{
trigger: 'item',
formatter:'{c}%'　　　　//这是关键，在需要的地方加上就行了
},
legend: {
data:['coverage']
},
xAxis : [
{
type : 'category',
data : ["product1", "product2", "product3", "product4"]
}
],
yAxis : [
{
type : 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
},
}
],
series : [
{
"name":"success",
"type":"bar",
                               "barWidth": "50",
itemStyle: {
normal: {
color: 'green',
                                       label: {
                                           show: true,
                                           position: 'top',
                                           textStyle: {
                                               color: 'red'
                                           },
                                           formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
                                       }
}
},
"data":[30, 36, 23, 27],//需要根据实际情况替换
}
]
};
myChart.setOption(option);
}
);
</script>
</body>
</html>

2、jenkins插件安装Rich Text Publisher Plugin

3、新建jenkins任务

构建执行shell中读取你要的任务的值替换html中的值

product='code_coverage_product1'
buildNum=`cat /var/lib/jenkins/jobs/$product/nextBuildNumber`
buildNum=$[$buildNum -1]
log="/var/lib/jenkins/jobs/$product/builds/$buildNum/log"
product1=`cat $log |grep -a 'Overall coverage' |awk '{print $NF}'`

product='code_coverage_product2'
buildNum=`cat /var/lib/jenkins/jobs/$product/nextBuildNumber`
buildNum=$[$buildNum -1]
log="/var/lib/jenkins/jobs/$product/builds/$buildNum/log"
product2=`cat $log |grep -a 'Overall coverage' |awk '{print $NF}'`

product='code_coverage_product3'
buildNum=`cat /var/lib/jenkins/jobs/$product/nextBuildNumber`
buildNum=$[$buildNum -1]
log="/var/lib/jenkins/jobs/$product/builds/$buildNum/log"
product3=`cat $log |grep -a 'Overall coverage' |awk '{print $NF}'`

product='code_coverage_product4'
buildNum=`cat /var/lib/jenkins/jobs/$product/nextBuildNumber`
buildNum=$[$buildNum -1]
log="/var/lib/jenkins/jobs/$product/builds/$buildNum/log"
product4=`cat $log |grep -a 'Overall coverage' |awk '{print $NF}'`

sed -i 's#"data":\[.*#"data":\['$product1', '$product2', '$product3', '$product4'\]#g' coverageSummaryReport.html

4、设置jenkins任务构建后操作

注意：第一项必须选HTML

第二项是html文件的绝对地址。

5、执行jenkins任务

结果如下

washli2001

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jenkins中显示echart图表

工作中需要统计多个产品线的代码覆盖率，由于涉及jenkins工作任务过多，查看各个结果需要逐一打开，于是就想通过用html文件做一个展现模板， jenkins任务根据实际数据修改该文件中的值并展现出来。1、编写html文件<!DOCTYPE html><html><head> <title>JenkinsReport&lt...
复制链接

扫一扫