（HTMLTestRunner增加图表样式显示）一：增加用例执行情况饼状图

时间：2020-05-13 19:14:52 阅读：61 评论：0 收藏：0 [点我收藏+]

　　在实际使用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*/ -->

（HTMLTestRunner增加图表样式显示）一：增加用例执行情况饼状图

原文：https://www.cnblogs.com/lirongyang/p/12876624.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)