From 9a1eef0939f383b4ee6cca9c7933341477830928 Mon Sep 17 00:00:00 2001
From: IHIRINA <2582067027@qq.com>
Date: Fri, 21 Feb 2025 15:58:53 +0800
Subject: [PATCH] =?UTF-8?q?chart=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Chart/components/Chart.vue | 212 +++++++++++++++++----------
 1 file changed, 138 insertions(+), 74 deletions(-)

diff --git a/src/views/Chart/components/Chart.vue b/src/views/Chart/components/Chart.vue
index 71ea5de..52dbe89 100644
--- a/src/views/Chart/components/Chart.vue
+++ b/src/views/Chart/components/Chart.vue
@@ -1,98 +1,162 @@
+<template>
+  <div>
+    <h2>API 使用统计</h2>
+    <p>为您识别信息的总次数: {{ totalCount }}</p>
+    <!-- 饼图容器 -->
+    <div id="pie-chart" style="width: 600px; height: 400px;"></div>
+    <table border="1">
+      <thead>
+        <tr>
+          <th>API 种类</th>
+          <th>使用次数</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(count, apiType) in formattedApiUsageCounts" :key="apiType">
+          <td>{{ apiType }}</td>
+          <td>{{ count }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="errorMessage">{{ errorMessage }}</p>
+  </div>
+</template>
+
 <script setup lang="ts">
-import * as echarts from 'echarts/core';
-import {
-  DatasetComponent,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent
-} from 'echarts/components';
-import { LineChart, PieChart } from 'echarts/charts';
-import { UniversalTransition, LabelLayout } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-import { onMounted } from 'vue'
-
-echarts.use([
-  DatasetComponent,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent,
-  LineChart,
-  PieChart,
-  CanvasRenderer,
-  UniversalTransition,
-  LabelLayout
-]);
-
-let myChart: echarts.ECharts | null = null;
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+import useUserStore from '@/stores/modules/user'; // 确保路径正确
+import * as echarts from 'echarts';
 
-onMounted(() => {
-  const chartDom = document.getElementById('main');
-  if (!chartDom) {
-    console.error("Element #main not found");
+// 定义基础 URL
+const baseUrl = 'http://47.104.150.153:7000';
+
+// 定义响应数据的类型
+interface ApiUsageResponse {
+  code: number;
+  message: string;
+  all: number;
+  data: { [key: string]: number };
+}
+
+// 存储总使用次数
+const totalCount = ref(0);
+// 存储各个 API 种类的使用次数
+const apiUsageCounts = ref<{ [key: string]: number }>({});
+// 存储格式化后的 API 种类使用次数
+const formattedApiUsageCounts = ref<{ [key: string]: number }>({});
+// 存储错误信息
+const errorMessage = ref('');
+
+// 定义种类映射
+const typeMapping: { [key: string]: string } = {
+  '0': '中性',
+  '1': '网络交易及兼职诈骗',
+  '2': '虚假金融及投资诈骗',
+  '3': '身份冒充及威胁诈骗'
+};
+
+// 获取 userStore 实例
+const userStore = useUserStore();
+
+// 获取 API 使用统计数据的函数
+const fetchApiUsageData = async () => {
+  // 检查 userStore 中的 telephone 和 password 是否有效
+  if (!userStore.telephone || !userStore.password) {
+    errorMessage.value = '用户认证信息缺失，请先登录。';
     return;
   }
 
-  myChart = echarts.init(chartDom);
+  try {
+    const response = await axios.get<ApiUsageResponse>(
+      `${baseUrl}/data/count`,
+      {
+        headers: {
+          'telephone': userStore.telephone,
+          'password': userStore.password
+        }
+      }
+    );
+
+    if (response.data.code === 0) {
+      totalCount.value = response.data.all;
+      apiUsageCounts.value = response.data.data;
+
+      // 格式化 API 种类
+      const formattedData: { [key: string]: number } = {};
+      for (const [key, value] of Object.entries(apiUsageCounts.value)) {
+        const formattedKey = typeMapping[key] || key;
+        formattedData[formattedKey] = value;
+      }
+      formattedApiUsageCounts.value = formattedData;
+
+      // 绘制饼图
+      drawPieChart();
+    } else {
+      errorMessage.value = response.data.message;
+    }
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error('Axios 请求出错:', error.response?.data || error.message);
+      errorMessage.value = `请求出错: ${error.message}`;
+    } else {
+      console.error('发生未知错误:', error);
+      errorMessage.value = '发生未知错误';
+    }
+  }
+};
+
+// 绘制饼图的函数
+const drawPieChart = () => {
+  const chartDom = document.getElementById('pie-chart');
+  if (!chartDom) return;
+  const myChart = echarts.init(chartDom);
 
   const option = {
-    legend: {},
-    tooltip: {
-      trigger: 'axis',
-      showContent: false
+    title: {
+      text: 'API 种类使用次数占比',
+      left: 'center'
     },
-    dataset: {
-      source: [
-        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
-        ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
-        ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
-        ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
-        ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
-      ]
+    tooltip: {
+      trigger: 'item'
     },
-    xAxis: { type: 'category' },
-    yAxis: { gridIndex: 0 },
-    grid: { top: '55%' },
     series: [
-      { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
-      { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
-      { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
-      { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
       {
+        name: '使用次数',
         type: 'pie',
-        id: 'pie',
-        radius: '30%',
-        center: ['50%', '25%'],
-        emphasis: { focus: 'self' },
-        label: { formatter: '{b}: {@2012} ({d}%)' },
-        encode: { itemName: 'product', value: '2012', tooltip: '2012' }
+        radius: '50%',
+        data: Object.entries(formattedApiUsageCounts.value).map(([key, value]) => ({
+          value,
+          name: key
+        }))
       }
     ]
   };
 
   myChart.setOption(option);
+};
 
-  // 监听 updateAxisPointer 事件
-  myChart.on('updateAxisPointer', function (event: any) {
-    const xAxisInfo = event.axesInfo[0];
-    if (xAxisInfo) {
-      const dimension = xAxisInfo.value + 1;
-      (myChart as echarts.ECharts).setOption({
-        series: {
-          id: 'pie',
-          label: { formatter: `{b}: {@[${dimension}]} ({d}%)` },
-          encode: { value: dimension, tooltip: dimension }
-        }
-      });
-    }
-  });
+// 在组件挂载时调用获取数据的函数
+onMounted(() => {
+  fetchApiUsageData();
 });
 </script>
 
+<style scoped>
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
 
-<template>
-  <div id="main" style="width: 600px;height:400px;"></div>
-</template>
-
+th,
+td {
+  border: 1px solid #ccc;
+  padding: 8px;
+  text-align: left;
+}
 
-<style scoped>
+th {
+  background-color: #f2f2f2;
+}
 </style>
\ No newline at end of file