feat(base): 报告中添加了饼状图,柱状图

kt-base/src/main/resources/templates/overview.ftl

@@ -38,12 +38,18 @@
                 </div>
                 <div class="form-group flex">
                     <label for="probability">通过率:</label>
-                    <input class="form-control" id="probability" readonly="readonly" value="${overView.probability!}"/>
+                    <input class="form-control" id="probability" readonly="readonly" value="${overView.probability + "%"!}"/>
                 </div>
             <#else>
             </#if>
         </form>
     </div>
+
+    <div style="display: flex;">
+        <div id="pieChart" style="width:50%;height: 350px;"></div>
+        <div id="histogram" style="width:50%;height: 350px;"></div>
+    </div>
+
     <div class="table" style="overflow: auto">
         <table class="table table-striped">
             <thead>
@@ -193,6 +199,7 @@
 </div>
 <script src="./res/js/jquery.min.js"></script>
 <script src="./res/js/bootstrap.js"></script>
+<script src="./res/js/echarts.min.js"></script>
 <script>
     function handleData(data) {
         return data
@@ -226,15 +233,15 @@
                             content = '信息:'
                         }
                         let message = null
-                        if (item[j] == 'EXCEPTION_CHECK'){
+                        if (item[j] == 'EXCEPTION_CHECK') {
                             message = '异常检查点'
-                        } else if (item[j] == 'NULL_CHECK'){
+                        } else if (item[j] == 'NULL_CHECK') {
                             message = '空值检查点'
-                        } else if (item[j] == 'CONTAIN_CHECK'){
+                        } else if (item[j] == 'CONTAIN_CHECK') {
                             message = '包含检查点'
-                        } else if (item[j] == 'NO_CONTAIN_CHECK'){
+                        } else if (item[j] == 'NO_CONTAIN_CHECK') {
                             message = '不包含检查点'
-                        } else if (item[j] == 'JSONPATH_CHECK'){
+                        } else if (item[j] == 'JSONPATH_CHECK') {
                             message = 'Jsonpath检查点'
                         } else {
                             message = item[j]
@@ -275,5 +282,102 @@
 
     })
 </script>
+<script>
+    let chartDom = document.getElementById('pieChart');
+    let myChart = echarts.init(chartDom);
+    let pieChart;
+
+    pieChart = {
+        title: {
+            text: '测试结果',
+            subtext: '${"测试通过率:" + overView.probability + "%"!}',
+            left: 'center'
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            top: '5%',
+            left: 'left'
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: '40',
+                        fontWeight: 'bold'
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {value: ${overView.passNum!}, name: 'pass',itemStyle: {
+                            color: 'green'
+                        }},
+                    {value: ${overView.failNum!}, name: 'fail',itemStyle: {
+                            color: '#a90000'
+                        }},
+                ]
+            }
+        ]
+    };
+
+    pieChart && myChart.setOption(pieChart);
+
+</script>
+<script>
+    let chartDom2 = document.getElementById('histogram');
+    let myChart2 = echarts.init(chartDom2);
+    let histogram;
+
+    histogram = {
+        xAxis: {
+            type: 'category',
+            data: ['pass', 'fail']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [{
+                    value: ${overView.passNum!},
+                    itemStyle: {
+                        color: 'green'
+                    }
+                }, {
+                    value: ${overView.failNum!},
+                    itemStyle: {
+                        color: '#a90000'
+                    }
+                }],
+                type: 'bar',
+                showBackground: true,
+                barWidth : 100,
+                backgroundStyle: {
+                    color: 'rgba(180, 180, 180, 0.2)'
+                }
+            }
+        ]
+    };
+
+    histogram && myChart2.setOption(histogram);
+
+</script>
 </body>
 </html>
\ No newline at end of file

kt-web/src/main/resources/reports/index.html

@@ -41,6 +41,12 @@
             </div>
         </form>
     </div>
+
+    <div style="display: flex;">
+        <div id="pieChart" style="width:50%;height: 350px;"></div>
+        <div id="histogram" style="width:50%;height: 350px;"></div>
+    </div>
+
     <div class="table">
         <table class="table table-striped">
             <thead>
@@ -94,6 +100,7 @@
 </div>
 <script src="./js/jquery.min.js"></script>
 <script src="./js/bootstrap.js"></script>
+<script src="./js/echarts.min.js"></script>
 <script>
     function handleData(data) {
         let a = data
@@ -131,6 +138,103 @@
         }
     })
 </script>
+<script>
+    let chartDom = document.getElementById('pieChart');
+    let myChart = echarts.init(chartDom);
+    let pieChart;
+
+    pieChart = {
+        title: {
+            text: '测试结果',
+            subtext: '测试通过率',
+            left: 'center'
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            top: '5%',
+            left: 'left'
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: '40',
+                        fontWeight: 'bold'
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    {value: 1, name: 'pass',itemStyle: {
+                            color: 'green'
+                        }},
+                    {value: 1, name: 'fail',itemStyle: {
+                            color: '#a90000'
+                        }},
+                ]
+            }
+        ]
+    };
+
+    pieChart && myChart.setOption(pieChart);
+
+</script>
+<script>
+    let chartDom2 = document.getElementById('histogram');
+    let myChart2 = echarts.init(chartDom2);
+    let histogram;
+
+    histogram = {
+        xAxis: {
+            type: 'category',
+            data: ['pass', 'fail']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [{
+                    value: 1,
+                    itemStyle: {
+                        color: 'green'
+                    }
+                }, {
+                    value: 1,
+                    itemStyle: {
+                        color: '#a90000'
+                    }
+                }],
+                type: 'bar',
+                barWidth : 100,
+                showBackground: true,
+                backgroundStyle: {
+                    color: 'rgba(180, 180, 180, 0.2)'
+                }
+            }
+        ]
+    };
+
+    histogram && myChart2.setOption(histogram);
+
+</script>
 </body>
 
 </html>
\ No newline at end of file