Jenkins中显示echart图表
工作中需要统计多个产品线的代码覆盖率,由于涉及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任务
结果如下