From 2ab6b34c2c2270bdc99cafb00c5064e7c3c85155 Mon Sep 17 00:00:00 2001
From: Xubx <1827135378@qq.com>
Date: Sun, 27 Apr 2025 15:34:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cet/analyze.vue | 948 +++++++++++++++++---------------------
 1 file changed, 422 insertions(+), 526 deletions(-)

diff --git a/src/views/cet/analyze.vue b/src/views/cet/analyze.vue
index c5fea6a..510047f 100644
--- a/src/views/cet/analyze.vue
+++ b/src/views/cet/analyze.vue
@@ -4,8 +4,8 @@
       <template #extra>
         <a-cascader v-model:value="collegeMajor" :options="collegeMajorOptions" change-on-select />
         <a-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
-        <a-button style="margin-left: 10px" :loading="aiLoading" v-show="resultData != null" type="primary" @click="getAI">分析</a-button>
-        <!-- <a-button @click=test()>test</a-button> -->
+        <a-button style="margin-left: 10px" :loading="aiLoading" v-show="resultData != null" type="primary"
+          @click="getAI">分析</a-button>
       </template>
       <a-row :gutter="12">
         <a-col :xl="12">
@@ -13,12 +13,6 @@
         </a-col>
         <a-col :xl="12">
           <div style="width: 100%; height: 215px" class="piechart" id="pieChart"> </div>
-          <!--
-          <a-card style="margin-top: 33px; margin-bottom: 12px">
-          </a-card>-->
-          <!--<a-card>
-            <div style="width: 100%; height: 180px" id="map2"> </div>
-          </a-card>-->
         </a-col>
       </a-row>
       <a-card style="margin-bottom: 10px" class="tip">
@@ -26,286 +20,287 @@
           <div v-html="aiMessage"></div>
         </div>
       </a-card>
-      <!-- <div style="height: 300px;">
-        <a-empty style="margin-top: 100px" />
-      </div> -->
     </a-card>
   </div>
 </template>
 
 <script>
-  import { defHttp } from '/@/utils/http/axios';
-  import * as echarts from 'echarts';
-  import axios from 'axios';
-  import { marked } from 'marked';
+import { defHttp } from '/@/utils/http/axios';
+import * as echarts from 'echarts';
+import axios from 'axios';
+import { marked } from 'marked';
 
-  export default {
-    data() {
-      return {
-        loading: false,
-        dataSourceCet4: [],
-        columns: [
-          {
-            title: '学年',
-            dataIndex: 'grade',
-            key: 'grade',
-            align: 'center',
-            customCell: (_, index) => ({
-              rowSpan: index % 2 === 0 ? 2 : 0, //每两行合并一次grade列的单元格，rowSpan为跨度
-            }),
-          },
-          {
-            title: '考试批次',
-            dataIndex: 'batch',
-            key: 'batch',
-            align: 'center',
-          },
-          {
-            title: '参加人数',
-            dataIndex: 'attendNumber',
-            key: 'attendNumber',
-            align: 'center',
-          },
-          {
-            title: '通过人数',
-            dataIndex: 'passNumber',
-            key: 'passNumber',
-            align: 'center',
-          },
-          {
-            title: '本批次通过率',
-            dataIndex: 'batchpassrate',
-            key: 'batchpassrate',
-            align: 'center',
-          },
-          {
-            slots: { title: 'passRateSlot' },
-            dataIndex: 'gradepassrate',
-            key: 'gradepassrate',
-            align: 'center',
-            customCell: (_, index) => ({
-              rowSpan: index % 2 === 0 ? 2 : 0,
-            }),
-          },
-        ],
-        Url: {
-          getEntrydate: '/cet/getEntrydate',
-          getCollege: '/cet/getCollege',
-          getData: '/cet/getData',
-          getCollegeMajor: '/cet/getCollegeMajor',
-          getAnalyze: '/cet_4/analyze',
+export default {
+  data() {
+    return {
+      loading: false,
+      dataSourceCet4: [],
+      columns: [
+        {
+          title: '学年',
+          dataIndex: 'grade',
+          key: 'grade',
+          align: 'center',
+          customCell: (_, index) => ({
+            rowSpan: index % 2 === 0 ? 2 : 0, //每两行合并一次grade列的单元格，rowSpan为跨度
+          }),
         },
-        total: 0,
-        totalName: '',
-        passNumberBottom: 0,
-        passRateBottom: 0,
-        passRatePie: [],
-        lineXData: [],
-        resultData: [],
-        aiMessage: '',
-        lineYData: [],
-        collegeOptions: [],
-        collegeMajorOptions: [],
-        entrydateOptions: [],
-        college: null,
-        aiLoading: false,
-        entrydate: 2017, //年级选择器
-        //设置默认值为全校
-        collegeMajor: ['全校'], //学院专业选择器
-        topCollege: null, //顶部选择器
-        topMajor: null, //顶部选择器
-        topEntrydate: null, //顶部选择器
-      };
-    },
-    mounted() {
-      this.getEntrydateAndCollegeData();
-      this.getCollegeMajorData();
-      this.query();
-      //this.map2Chart();
-    },
-    methods: {
-      // 获取年级和学院数据
-      async getEntrydateAndCollegeData() {
-        const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
-        const getCollege = await defHttp.get({ url: this.Url.getCollege });
-        this.collegeOptions = getCollege.colleges;
-        // 手动添加一个全校字段
-        this.collegeOptions.unshift({ value: '全校', label: '全校' });
-        this.college = this.collegeOptions[0].value;
-        this.entrydateOptions = getEntrydate.entrydates;
-        // this.entrydate = this.entrydateOptions[0].value;
-      },
-      //获取学院专业级联数据
-      async getCollegeMajorData() {
-        const res = await defHttp.get({ url: this.Url.getCollegeMajor });
-        //通过map方法将数据转换为级联选择器需要的数据格式
-        this.collegeMajorOptions = res.collegeMajor.map((item) => {
-          return {
-            value: item.college,
-            label: item.college,
-            children: item.major.map((major) => {
-              return {
-                value: major,
-                label: major,
-              };
-            }),
-          };
-        });
-        //手动添加一个专升本字段
-        this.collegeMajorOptions.unshift({ value: '专升本', label: '专升本' });
-        // 手动添加一个全校字段
-        this.collegeMajorOptions.unshift({ value: '全校', label: '全校' });
-        // this.collegeMajor = ['全校'];
-        console.log(this.collegeMajorOptions);
+        {
+          title: '考试批次',
+          dataIndex: 'batch',
+          key: 'batch',
+          align: 'center',
+        },
+        {
+          title: '参加人数',
+          dataIndex: 'attendNumber',
+          key: 'attendNumber',
+          align: 'center',
+        },
+        {
+          title: '通过人数',
+          dataIndex: 'passNumber',
+          key: 'passNumber',
+          align: 'center',
+        },
+        {
+          title: '本批次通过率',
+          dataIndex: 'batchpassrate',
+          key: 'batchpassrate',
+          align: 'center',
+        },
+        {
+          slots: { title: 'passRateSlot' },
+          dataIndex: 'gradepassrate',
+          key: 'gradepassrate',
+          align: 'center',
+          customCell: (_, index) => ({
+            rowSpan: index % 2 === 0 ? 2 : 0,
+          }),
+        },
+      ],
+      Url: {
+        getEntrydate: '/cet/getEntrydate',
+        getCollege: '/cet/getCollege',
+        getData: '/cet/getData',
+        getCollegeMajor: '/cet/getCollegeMajor',
+        getAnalyze: '/cet_4/analyze',
       },
+      total: 0,
+      totalName: '',
+      passNumberBottom: 0,
+      passRateBottom: 0,
+      passRatePie: [],
+      lineXData: [],
+      resultData: [],
+      aiMessage: '',
+      lineYData: [],
+      collegeOptions: [],
+      collegeMajorOptions: [],
+      entrydateOptions: [],
+      college: null,
+      aiLoading: false,
+      entrydate: 2017, //年级选择器
+      //设置默认值为全校
+      collegeMajor: ['全校'], //学院专业选择器
+      topCollege: null, //顶部选择器
+      topMajor: null, //顶部选择器
+      topEntrydate: null, //顶部选择器
+    };
+  },
+  mounted() {
+    this.getEntrydateAndCollegeData();
+    this.getCollegeMajorData();
+    this.query();
+    //this.map2Chart();
+  },
+  methods: {
+    // 获取年级和学院数据
+    async getEntrydateAndCollegeData() {
+      const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
+      const getCollege = await defHttp.get({ url: this.Url.getCollege });
+      this.collegeOptions = getCollege.colleges;
+      // 手动添加一个全校字段
+      this.collegeOptions.unshift({ value: '全校', label: '全校' });
+      this.college = this.collegeOptions[0].value;
+      this.entrydateOptions = getEntrydate.entrydates;
+      // this.entrydate = this.entrydateOptions[0].value;
+    },
+    //获取学院专业级联数据
+    async getCollegeMajorData() {
+      const res = await defHttp.get({ url: this.Url.getCollegeMajor });
+      //通过map方法将数据转换为级联选择器需要的数据格式
+      this.collegeMajorOptions = res.collegeMajor.map((item) => {
+        return {
+          value: item.college,
+          label: item.college,
+          children: item.major.map((major) => {
+            return {
+              value: major,
+              label: major,
+            };
+          }),
+        };
+      });
+      //手动添加一个专升本字段
+      this.collegeMajorOptions.unshift({ value: '专升本', label: '专升本' });
+      // 手动添加一个全校字段
+      this.collegeMajorOptions.unshift({ value: '全校', label: '全校' });
+      // this.collegeMajor = ['全校'];
+      console.log(this.collegeMajorOptions);
+    },
 
-      // 查询数据
-      async query() {
-        try {
-          //如果this.collegeMajor[1]不存在则设为null
-          let major = this.collegeMajor.length > 1 ? this.collegeMajor[1] : '';
-          this.topCollege = this.collegeMajor[0];
-          this.topMajor = major;
-          this.topEntrydate = this.entrydate;
-          if (this.college) this.loading = true;
-          let params = {
-            college: this.collegeMajor[0],
-            major: major,
-          };
-          console.log('params', params);
-          const result = await defHttp.post({ url: this.Url.getAnalyze, params });
-          this.resultData = result;
-          //生成饼图
-          console.log(result, 'res');
-          const resdata = [];
-          // 遍历后端返回的数据
-          for (const [range, rate] of Object.entries(result.rateByBatch)) {
-            // 将数据转换为图表需要的格式
-            resdata.push({
-              value: parseFloat(rate), // 将比率转换为数字类型
-              name: `${range}分人数占比`,
-            });
-          }
-          // 对数组按区间进行排序（先提取区间的起始值进行排序）
-          resdata.sort((a, b) => {
-            const aMin = parseInt(a.name.split('-')[0]); // 获取起始分数
-            const bMin = parseInt(b.name.split('-')[0]); // 获取起始分数
-            return aMin - bMin; // 按起始分数升序排序
+    // 查询数据
+    async query() {
+      try {
+        //如果this.collegeMajor[1]不存在则设为null
+        let major = this.collegeMajor.length > 1 ? this.collegeMajor[1] : '';
+        this.topCollege = this.collegeMajor[0];
+        this.topMajor = major;
+        this.topEntrydate = this.entrydate;
+        if (this.college) this.loading = true;
+        let params = {
+          college: this.collegeMajor[0],
+          major: major,
+        };
+        console.log('params', params);
+        const result = await defHttp.post({ url: this.Url.getAnalyze, params });
+        this.resultData = result.data;
+        //生成饼图
+        console.log(result, 'res');
+        const resdata = [];
+        // 遍历后端返回的数据
+        for (const [range, rate] of Object.entries(result.data[0].rateByBatch)) {
+          // 将数据转换为图表需要的格式
+          resdata.push({
+            value: parseFloat(rate), // 将比率转换为数字类型
+            name: `${range}分人数占比`,
           });
-          console.log(resdata, 'resdata');
-          //独立修改第一个数据
-          resdata[0].name = '400分以下人数占比';
-          //独立修改最后一个数据
-          resdata[4].name = '475分以上人数占比';
-          const piedata = [];
-          piedata.push({ value: result.scoreByBatch.read, name: '阅读' });
-          piedata.push({ value: result.scoreByBatch.listen, name: '听力' });
-          piedata.push({ value: result.scoreByBatch.write, name: '写作' });
-          setTimeout(() => {
-            this.drawResChart(resdata);
-            this.drawPieChart(piedata);
-            this.map2Chart();
-          }, 100);
-          // this.drawPieChart();
-        } finally {
-          this.loading = false;
         }
-      },
-      test() {
-        defHttp.get({ url: '/cet/getTest' });
-      },
-      map2Chart() {
-        var myChart = echarts.init(document.getElementById('map2'));
-        var option = {
-          title: {
-            text: '各批次通过率分析',
-            left: 'left',
-            top: '0%',
-            textStyle: {
-              fontSize: 16,
-            },
+        // 对数组按区间进行排序（先提取区间的起始值进行排序）
+        resdata.sort((a, b) => {
+          const aMin = parseInt(a.name.split('-')[0]); // 获取起始分数
+          const bMin = parseInt(b.name.split('-')[0]); // 获取起始分数
+          return aMin - bMin; // 按起始分数升序排序
+        });
+        console.log(resdata, 'resdata');
+        //独立修改第一个数据
+        resdata[0].name = '400分以下人数占比';
+        //独立修改最后一个数据
+        resdata[4].name = '475分以上人数占比';
+        const piedata = [];
+        piedata.push({ value: result.data[0].scoreByBatch.read, name: '阅读' });
+        piedata.push({ value: result.data[0].scoreByBatch.listen, name: '听力' });
+        piedata.push({ value: result.data[0].scoreByBatch.write, name: '写作' });
+        setTimeout(() => {
+          this.drawResChart(resdata);
+          this.drawPieChart(piedata);
+          this.map2Chart();
+        }, 100);
+        // this.drawPieChart();
+      } finally {
+        this.loading = false;
+      }
+    },
+    test() {
+      defHttp.get({ url: '/cet/getTest' });
+    },
+    map2Chart() {
+      var myChart = echarts.init(document.getElementById('map2'));
+      var option = {
+        title: {
+          text: '各批次通过率分析',
+          left: 'left',
+          top: '0%',
+          textStyle: {
+            fontSize: 16,
           },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow',
-            },
-            formatter: function (params) {
-              return (
-                params[0].name +
-                '<br/>' +
-                '<table>' +
-                '<tr><td>' +
-                params[0].marker +
-                '</td><td style="font-weight: bold;">' +
-                '&nbsp;&nbsp;&nbsp;&nbsp;' +
-                params[0].value +
-                '%' +
-                '</td></tr>' +
-                '<tr>' +
-                '</table>'
-              );
-            },
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
           },
-          grid: {
-            top: '50px',
-            left: '50px',
-            right: '50px',
-            bottom: '30px',
+          formatter: function (params) {
+            return (
+              params[0].name +
+              '<br/>' +
+              '<table>' +
+              '<tr><td>' +
+              params[0].marker +
+              '</td><td style="font-weight: bold;">' +
+              '&nbsp;&nbsp;&nbsp;&nbsp;' +
+              params[0].value +
+              '%' +
+              '</td></tr>' +
+              '<tr>' +
+              '</table>'
+            );
           },
-          xAxis: {
-            type: 'category',
-            data: this.lineXData,
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [
-            {
-              data: this.lineYData,
-              type: 'line',
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: true, //开启显示
-                    position: 'top', //在上方显示
-                    textStyle: {
-                      //数值样式
-                      color: 'black',
-                      fontSize: 12,
-                    },
-                    formatter: '{c}%',
+        },
+        grid: {
+          top: '50px',
+          left: '50px',
+          right: '50px',
+          bottom: '30px',
+        },
+        xAxis: {
+          type: 'category',
+          data: this.lineXData,
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: this.lineYData,
+            type: 'line',
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //开启显示
+                  position: 'top', //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: 'black',
+                    fontSize: 12,
                   },
+                  formatter: '{c}%',
                 },
               },
             },
-          ],
-        };
-
-        option && myChart.setOption(option);
-      },
-
-      async getAI() {
-        this.aiLoading = true;
-        let validMessages = [
-          {
-            role: 'user',
-            content:
-              JSON.stringify(this.resultData) +
-              '这是我们学校的四级成绩，第一个是分数在400-425区间的人数占比，下面的是听力阅读等模块的平均成绩，我是我们学校英语教研组的，请你给出提升意见',
           },
-        ];
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+
+    async getAI() {
+      this.aiLoading = true;
+      this.aiMessage = ''; // 清空之前的内容
+
+      let validMessages = [
+        {
+          role: 'user',
+          content:
+            JSON.stringify(this.resultData) +
+            '这是我们学校的四级成绩，在回答时无需再次具体说明数据，batch为批次，总共是最近三个批次的数据，rateByBatch为每个分数段的人数占比，scoreByBatch为四级每个模块的平均分，分别为阅读、写作、听力。我是我们学校英语教研组的，请你进行分析并给出提升意见',
+        },
+      ];
+
+      try {
         const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
-            Accept: 'application/json',
-            Authorization: 'Bearer sk-1d3dd761c40045228547efb38ce59754',
+            'Accept': 'application/json',
+            'Authorization': 'Bearer sk-1d3dd761c40045228547efb38ce59754',
           },
           body: JSON.stringify({
             model: 'deepseek-chat',
             messages: validMessages,
-            stream: false, // 关键修改！关闭流式响应
+            stream: true, // 启用流式响应
           }),
         });
 
@@ -313,275 +308,176 @@
           throw new Error(`API请求失败: ${response.status}`);
         }
 
-        // 3. 获取完整响应
-        const data = await response.json();
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let fullMessage = '(数据分析由deepseek生成，仅供参考)\n\n';
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value);
+          const lines = chunk.split('\n');
+
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const data = line.slice(6);
+              if (data === '[DONE]') continue;
+
+              try {
+                const parsed = JSON.parse(data);
+                if (parsed.choices[0].delta?.content) {
+                  fullMessage += parsed.choices[0].delta.content;
+                  // 更新显示内容
+                  this.aiMessage = marked(fullMessage);
+                }
+              } catch (e) {
+                console.error('解析响应数据时出错:', e);
+              }
+            }
+          }
+        }
+      } catch (error) {
+        console.error('获取AI分析失败:', error);
+        this.aiMessage = marked('抱歉，分析过程中发生了错误，请稍后重试。');
+      } finally {
         this.aiLoading = false;
-        const assistantResponse = data.choices[0].message;
-        console.log(data, 'data');
-        // 4. 创建助手消息对象
-        const assistantMessage = {
-          role: 'assistant',
-          content: assistantResponse.content,
-          reasoning: assistantResponse.reasoning_content || '', // 如果有思考过程
-        };
-        this.aiMessage = '(数据分析由deepseek生成，仅供参考)\n\n' + assistantMessage.content;
-        this.aiMessage = marked(this.aiMessage);
-        console.log(assistantMessage);
-      },
-      drawResChart(piedata) {
-        console.log(this.passRatePie);
-        console.log('piedata', piedata);
-        let xData = piedata.map((item) => item.name);
-        let Data = piedata.map((item) => item.value);
-        console.log('xData', xData);
-        console.log('Data', Data);
-        let myChart = echarts.init(document.getElementById('resChart'));
-        //let option = {
-        //  tooltip: {
-        //    trigger: 'item',
-        //    confine: false,
-        //    avoidLabelOverlap: true,
-        //    //字体大小
-        //    itemStyle: {
-        //      fontSize: 100,
-        //    },
-        //  },
-
-        //  title: {
-        //    text: '四级分数占比',
-        //    left: 'left',
-        //    top: '0%',
-        //    textStyle: {
-        //      fontSize: 16,
-        //    },
-        //  },
-        //  legend: {
-        //    top: 'center',
-        //    right: '0%',
-        //    orient: 'vertical',
-        //  },
-        //  color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
-
-        //  series: [
-        //    //外圈饼图
-        //    {
-        //      name: '四级通过率',
-        //      type: 'pie',
-        //      center: ['30%', '50%'],
-        //      radius: ['35%', '70%'],
-        //      itemStyle: {
-        //        borderRadius: 10,
-        //        borderColor: '#fff',
-        //        borderWidth: 2,
-        //      },
-        //      label: {
-        //        show: true,
-        //        fontSize: 14,
-        //        overflow: 'truncate',
-        //        minMargin: -1,
-        //      },
-        //      emphasis: {
-        //        itemStyle: {
-        //          shadowBlur: 10,
-        //          shadowOffsetX: 0,
-        //          shadowColor: 'rgba(0, 0, 0, 0.5)',
-        //        },
-        //        label: {
-        //          show: true,
-        //          fontSize: 15,
-        //          fontWeight: 'bold',
-        //        },
-        //      },
-        //      data: piedata,
-        //    },
-        //  ],
-        //};
-        let option = {
-          grid: {
-            left: '10%', // 增加左侧边距
-            right: '10%', // 增加右侧边距
-            bottom: '30%', // 增加底部边距，为 X 轴标签留出更多空间
-          },
-          tooltip: {
-            trigger: 'axis',
-          },
-          title: {
-            text: '四级分数占比',
-            left: 'left',
-            top: '0%',
-            textStyle: {
-              fontSize: 16,
-            },
-          },
-          xAxis: {
-            type: 'category',
-            data: xData,
-            axisLabel: {
-              interval: 0, // 显示所有标签
-              //rotate: 10, // 标签旋转45度，减少水平占用
-              margin: 15, // 增加标签与轴线的间距
-              formatter: function (value) {
-                // 在 '分' 字符后插入换行符
-                return value.replace(/分/g, '分\n');
-              },
-            },
-            axisLine: {
-              show: true,
-            },
-            boundaryGap: true, // 保持此选项，控制类目轴起始位置
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [
-            {
-              data: Data,
-              type: 'bar',
-              label: {
-                show: true, // 显示标签
-                position: 'top', // 标签位置在柱子的顶部
-                formatter: '{c}%', // 使用 {c} 来显示柱子的数值，百分号可以根据需求显示
-                fontSize: 12, // 字体大小
-                color: '#000', // 字体颜色
-              },
-            },
-          ],
-        };
-
-        myChart.setOption(option);
-      },
-      drawPieChart(piedata) {
-        console.log(this.passRatePie);
-        console.log('piedata', piedata);
-        let xData = piedata.map((item) => item.name);
-        let data = piedata.map((item) => item.value);
-        let myChart = echarts.init(document.getElementById('pieChart'));
-        //let option = {
-        //  tooltip: {
-        //    trigger: 'item',
-        //    confine: false,
-        //    avoidLabelOverlap: true,
-        //    //字体大小
-        //    itemStyle: {
-        //      fontSize: 100,
-        //    },
-        //  },
-
-        //  title: {
-        //    text: '四级分数分析',
-        //    left: 'left',
-        //    top: '0%',
-        //    textStyle: {
-        //      fontSize: 16,
-        //    },
-        //  },
-        //  legend: {
-        //    top: 'center',
-        //    right: '0%',
-        //    orient: 'vertical',
-        //  },
-        //  color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
-
-        //  series: [
-        //    //外圈饼图
-        //    {
-        //      name: '四级通过率',
-        //      type: 'pie',
-        //      center: ['30%', '50%'],
-        //      radius: ['35%', '70%'],
-        //      itemStyle: {
-        //        borderRadius: 10,
-        //        borderColor: '#fff',
-        //        borderWidth: 2,
-        //      },
-        //      label: {
-        //        show: true,
-        //        fontSize: 14,
-        //        overflow: 'truncate',
-        //        minMargin: -1,
-        //      },
-        //      emphasis: {
-        //        itemStyle: {
-        //          shadowBlur: 10,
-        //          shadowOffsetX: 0,
-        //          shadowColor: 'rgba(0, 0, 0, 0.5)',
-        //        },
-        //        label: {
-        //          show: true,
-        //          fontSize: 15,
-        //          fontWeight: 'bold',
-        //        },
-        //      },
-        //      data: piedata,
-        //    },
-        //  ],
-        //};
-        let option = {
-          grid: {
-            left: '10%', // 增加左侧边距
-            right: '10%', // 增加右侧边距
-            bottom: '30%', // 增加底部边距，为 X 轴标签留出更多空间
-          },
-          tooltip: {
-            trigger: 'axis',
-          },
-          title: {
-            text: '四级分数分析',
-            left: 'left',
-            top: '0%',
-            textStyle: {
-              fontSize: 16,
-            },
-          },
-          xAxis: {
-            type: 'category',
-            data: xData,
-            axisLabel: {
-              interval: 0, // 显示所有标签
-              //rotate: 10, // 标签旋转45度，减少水平占用
-              margin: 15, // 增加标签与轴线的间距
-            },
-            axisLine: {
-              show: true,
-            },
-            boundaryGap: true, // 保持此选项，控制类目轴起始位置
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [
-            {
-              data: data,
-              type: 'bar',
-              label: {
-                show: true, // 显示标签
-                position: 'top', // 标签位置在柱子的顶部
-                fontSize: 12, // 字体大小
-                color: '#000', // 字体颜色
-              },
-              barWidth: '25%',
-            },
-          ],
-        };
-
-        myChart.setOption(option);
-      },
+      }
     },
-  };
+    drawResChart(piedata) {
+      console.log(this.passRatePie);
+      console.log('piedata', piedata);
+      let xData = piedata.map((item) => item.name);
+      let Data = piedata.map((item) => item.value);
+      console.log('xData', xData);
+      console.log('Data', Data);
+      let myChart = echarts.init(document.getElementById('resChart'));
+      let option = {
+        grid: {
+          left: '10%', // 增加左侧边距
+          right: '10%', // 增加右侧边距
+          bottom: '30%', // 增加底部边距，为 X 轴标签留出更多空间
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        title: {
+          text: '四级分数占比',
+          left: 'left',
+          top: '0%',
+          textStyle: {
+            fontSize: 16,
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLabel: {
+            interval: 0, // 显示所有标签
+            //rotate: 10, // 标签旋转45度，减少水平占用
+            margin: 15, // 增加标签与轴线的间距
+            formatter: function (value) {
+              // 在 '分' 字符后插入换行符
+              return value.replace(/分/g, '分\n');
+            },
+          },
+          axisLine: {
+            show: true,
+          },
+          boundaryGap: true, // 保持此选项，控制类目轴起始位置
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: Data,
+            type: 'bar',
+            label: {
+              show: true, // 显示标签
+              position: 'top', // 标签位置在柱子的顶部
+              formatter: '{c}%', // 使用 {c} 来显示柱子的数值，百分号可以根据需求显示
+              fontSize: 12, // 字体大小
+              color: '#000', // 字体颜色
+            },
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+    },
+    drawPieChart(piedata) {
+      console.log(this.passRatePie);
+      console.log('piedata', piedata);
+      let xData = piedata.map((item) => item.name);
+      let data = piedata.map((item) => item.value);
+      let myChart = echarts.init(document.getElementById('pieChart'));
+      let option = {
+        grid: {
+          left: '10%', // 增加左侧边距
+          right: '10%', // 增加右侧边距
+          bottom: '30%', // 增加底部边距，为 X 轴标签留出更多空间
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        title: {
+          text: '四级分数分析',
+          left: 'left',
+          top: '0%',
+          textStyle: {
+            fontSize: 16,
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisLabel: {
+            interval: 0, // 显示所有标签
+            //rotate: 10, // 标签旋转45度，减少水平占用
+            margin: 15, // 增加标签与轴线的间距
+          },
+          axisLine: {
+            show: true,
+          },
+          boundaryGap: true, // 保持此选项，控制类目轴起始位置
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: data,
+            type: 'bar',
+            label: {
+              show: true, // 显示标签
+              position: 'top', // 标签位置在柱子的顶部
+              fontSize: 12, // 字体大小
+              color: '#000', // 字体颜色
+            },
+            barWidth: '25%',
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-  .container {
-    display: flex;
-    background-color: #fff;
-    padding: 15px;
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  }
+.container {
+  display: flex;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+}
 
-  .title {
-    font-size: 34px;
-    color: rgb(8, 8, 8);
-    font-weight: bold;
-  }
+.title {
+  font-size: 34px;
+  color: rgb(8, 8, 8);
+  font-weight: bold;
+}
 </style>