zoukankan      html  css  js  c++  java
  • (HTMLTestRunner增加图表样式显示)一:增加用例执行情况饼状图

      在实际使用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*/ -->
  • 相关阅读:
    获取时间对象
    定时器
    undefined与return
    获取设置非行间样式
    NaN
    return,break与continue的区别
    数据类型
    程序的机器级表示
    计算机内数字的表示
    计算机系统漫游
  • 原文地址:https://www.cnblogs.com/lirongyang/p/12876624.html
Copyright © 2011-2022 走看看