在實際使用HTMLTestRunner時，會覺得默認報告樣式不夠好，不能直觀展示用例執行情況，所以需要給HTMLTestRunner報告增加一些直觀樣式。
樓主選用的是餅狀圖，各位小伙伴也可以根據自己喜好選擇。修改HTMLTestRunner樣式需要HTML、CSS等基礎，Python就不用說了吧。。。哈哈
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
修改效果展示：鼠標懸停在餅狀圖，增大顯示，並給出數量和占比
在不破壞原有報告樣式情況下，增加了餅狀圖顯示
修改思路：
1、首先，你先要找到自己喜歡的樣式，比如餅狀圖、柱狀圖等等，我們這個例子使用餅狀圖
2、在網上搜索HTML餅狀圖代碼，獲得以下源碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 215px"></div> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; app.title = '環形圖'; var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, color:['#93D8A9','#FFB99D','#AF7DCC','#FFD83D','#bbe2e8'], legend: { orient: 'horizontal', x: 'left', data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎'] }, series: [{ name: '訪問來源', type: 'pie', radius: ['30%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [{ value: 335, name: '直接訪問' }, { value: 310, name: '郵件營銷' }, { value: 234, name: '聯盟廣告' }, { value: 135, name: '視頻廣告' }, { value: 1548, name: '搜索引擎' } ] }] }; if(option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
效果展示：
3、確定HTMLTestRunner.py文件中生成HTML樣式部分代碼，筆者經過一凡坎坷后已經確定了
4、修改HTMLTestRunner源碼
第一步
第二步
第三步，把餅狀圖代碼添加在REPORT_TMPL最后面
第四步，這樣我們還沒完成最終修改，還需要修改第三步中餅狀圖代碼，具體修改位置就不詳細表述了，大家一看就明白
<!-- /*自己修改部分Start*/ --> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container_tu"); var myChart = echarts.init(dom); var app = {}; app.title = '環形圖'; var option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%%)" }, color:['red','#c60','#6c6','#bbe2e8'], legend: { orient: 'horizontal', x: 'left', data: ['失敗', '未通過', '通過', '總用例'] }, series: [{ name: '訪問來源', type: 'pie', radius: ['30%%', '70%%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [ { value: %(error)s, name: '失敗' }, { value: %(fail)s, name: '未通過' }, { value: %(Pass)s, name: '通過' }, { value: %(count)s, name: '總用例' } ] }] }; if(option && typeof option === "object") { myChart.setOption(option, true); } </script> <!-- #/*自己修改部分End*/ -->