基本思路：

<li>设计统计的数据内容：定义需要统计的数据内容，包括测试用例的执行结果。
1. 使用 Pyecharts 生成统计图表：在后端使用 Pyecharts 根据统计数据生成图表。
2. 将图表数据传输到前端：后端通过 API 将图表数据传输到前端。
3. 在 Vue.js 前端展示图表：在 Vue.js 前端项目中使用 Echarts 渲染图表。

1. 设计统计的数据内容

假设我们统计的数据内容包括：

• 总用例数
• 成功用例数
• 失败用例数
• 执行时间
• 各用例的执行状态（成功、失败）

设计一个模型来存储测试用例执行结果，TestCaseResult 用于存储测试用例执行结果，ChartData 用于存储统计图表数据。

# models.py

from django.db import models

class TestCaseResult(models.Model):

STATUS_CHOICES = (

('success', 'Success'),

('failure', 'Failure'),

)

case_id = models.CharField(max_length=100)

status = models.CharField(max_length=10, choices=STATUS_CHOICES)

execution_time = models.FloatField()

executed_at = models.DateTimeField(auto_now_add=True)

def __str__(self):

return f"TestCase {self.case_id} - {self.status}"

class ChartData(models.Model):

created_at = models.DateTimeField(auto_now_add=True)

pie_chart = models.TextField()

bar_chart = models.TextField()

def __str__(self):

return f"ChartData created at {self.created_at}"

2. 使用 Pyecharts 生成统计图表

通过视图中统计这些数据，在后端使用 Pyecharts 生成图表，将其保存到 ChartData 模型中

# views.py

from django.shortcuts import render

from django.http import JsonResponse

from .models import TestCaseResult, ChartData

from pyecharts.charts import Pie, Bar

from pyecharts import options as opts

def generate_charts():

total_cases = TestCaseResult.objects.count()

success_cases = TestCaseResult.objects.filter(status='success').count()

failure_cases = TestCaseResult.objects.filter(status='failure').count()

execution_times = list(TestCaseResult.objects.values_list('execution_time', flat=True))

# 饼图

pie = Pie()

pie.add("", [("Success", success_cases), ("Failure", failure_cases)])

pie.set_global_opts(title_opts=opts.TitleOpts(title="Test Case Results"))

pie_html = pie.render_embed()

# 柱状图

bar = Bar()

bar.add_xaxis([f"TestCase {i+1}" for i in range(total_cases)])

bar.add_yaxis("Execution Time (s)", execution_times)

bar.set_global_opts(title_opts=opts.TitleOpts(title="Test Case Execution Times"))

bar_html = bar.render_embed()

return pie_html, bar_html

def save_chart_data():

pie_html, bar_html = generate_charts()

chart_data = ChartData(pie_chart=pie_html, bar_chart=bar_html)

chart_data.save()

return chart_data

def test_case_statistics(request):

# 生成并保存图表数据

chart_data = save_chart_data()

return JsonResponse({

"pie_chart": chart_data.pie_chart,

"bar_chart": chart_data.bar_chart,

})

3.前端展示图表

在 Vue.js 前端通过 API 获取图表数据并展示

<template>

<div>

<div v-html="pieChart"></div>

<div v-html="barChart"></div>

</div>

</template>

<script>

import axios from 'axios';

export default {

data() {

return {

pieChart: '',

barChart: '',

};

},

mounted() {

this.fetchChartData();

},

methods: {

async fetchChartData() {

try {

const response = await axios.get('http://localhost:8000/test_case_statistics/');

this.pieChart = response.data.pie_chart;

this.barChart = response.data.bar_chart;

} catch (error) {

console.error('Error fetching chart data:', error);

}

},

},

};

</script>

<style>

/* Add necessary styles here */

</style>