gardel/Mofox-Core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(report): migrate charting library from Chart.js to ECharts

Browse Source 
This commit replaces the Chart.js library with Apache ECharts for all charts in the statistics report page. The migration aims to significantly enhance chart interactivity, visual appeal, and performance, especially with larger datasets.

Key improvements include:
- **Enhanced Interactivity**: Implemented data zooming and panning (`dataZoom`) for all time-series and bar charts, allowing for detailed data exploration.
- **Improved Visuals**: Leveraged ECharts' capabilities to introduce smoother lines, gradient area fills, better animations, and a more modern aesthetic.
- **Smart Legends**: Legends now automatically become scrollable when there are too many items, resolving UI clutter and improving readability.
- **Performance Optimization**: Optimized charts like the model cost bar chart and response time scatter plot to handle large numbers of data points smoothly.
- **Responsive Resizing**: Reworked the chart resizing logic to ensure all charts correctly and smoothly redraw when the window size changes.
This commit is contained in:
minecraft1024a
2025-11-30 13:53:53 +08:00
parent 46f88ebc70
commit 474f86af54
5 changed files with 916 additions and 914 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/chat/utils/templates/charts_tab.html
View File

@@ -17,17 +17,17 @@
</div>
<div class="chart-grid" style="grid-template-columns: 1fr;">
<div class="chart-wrapper">
<canvas id="totalCostChart"></canvas>
<div class="chart-wrapper" style="max-height: 450px;">
<div id="totalCostChart" style="width: 100%; height: 380px;"></div>
</div>
<div class="chart-wrapper">
<canvas id="costByModuleChart"></canvas>
<div class="chart-wrapper" style="max-height: 500px;">
<div id="costByModuleChart" style="width: 100%; height: 420px;"></div>
</div>
<div class="chart-wrapper">
<canvas id="costByModelChart"></canvas>
<div class="chart-wrapper" style="max-height: 500px;">
<div id="costByModelChart" style="width: 100%; height: 420px;"></div>
</div>
<div class="chart-wrapper">
<canvas id="messageByChatChart"></canvas>
<div class="chart-wrapper" style="max-height: 500px;">
<div id="messageByChatChart" style="width: 100%; height: 420px;"></div>
</div>
</div>
</div>

7
src/chat/utils/templates/report.css
View File

@@ -216,6 +216,13 @@ h1 {
position: relative;
height: auto;
min-height: 350px;
max-height: 600px;
overflow: hidden;
}
.chart-container > div, .chart-wrapper > div {
max-width: 100%;
max-height: 100%;
}
.chart-container h3, .chart-wrapper h3 {

2
src/chat/utils/templates/report.html
View File

@@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js" defer></script>
<style>{{ report_css }}</style>
</head>
<body>

1643
src/chat/utils/templates/report.js
View File

File diff suppressed because it is too large Load Diff

32
src/chat/utils/templates/static_charts.html
View File

@@ -12,58 +12,42 @@
<!-- 原有图表 -->
<div class="chart-container">
<h3>💰 供应商成本分布</h3>
<div style="position: relative; height: 250px;">
<canvas id="providerCostPieChart_{{ period_id }}"></canvas>
</div>
<div id="providerCostPieChart_{{ period_id }}" style="width: 100%; height: 280px;"></div>
</div>
<div class="chart-container">
<h3>📦 模块成本分布</h3>
<div style="position: relative; height: 250px;">
<canvas id="moduleCostPieChart_{{ period_id }}"></canvas>
</div>
<div id="moduleCostPieChart_{{ period_id }}" style="width: 100%; height: 280px;"></div>
</div>
<div class="chart-container">
<h3>🤖 模型成本对比</h3>
<div style="position: relative; min-height: 300px;">
<canvas id="modelCostBarChart_{{ period_id }}"></canvas>
</div>
<div id="modelCostBarChart_{{ period_id }}" style="width: 100%; height: 350px;"></div>
</div>
<!-- 新增图表 -->
<div class="chart-container">
<h3>🔄 Token使用对比</h3>
<div style="position: relative; min-height: 300px;">
<canvas id="tokenComparisonChart_{{ period_id }}"></canvas>
</div>
<div id="tokenComparisonChart_{{ period_id }}" style="width: 100%; height: 350px;"></div>
</div>
<div class="chart-container">
<h3>📞 供应商请求占比</h3>
<div style="position: relative; height: 250px;">
<canvas id="providerRequestsDoughnutChart_{{ period_id }}"></canvas>
</div>
<div id="providerRequestsDoughnutChart_{{ period_id }}" style="width: 100%; height: 280px;"></div>
</div>
<div class="chart-container">
<h3>⚡ 平均响应时间</h3>
<div style="position: relative; min-height: 300px;">
<canvas id="avgResponseTimeChart_{{ period_id }}"></canvas>
</div>
<div id="avgResponseTimeChart_{{ period_id }}" style="width: 100%; height: 350px;"></div>
</div>
<div class="chart-container">
<h3>🎯 模型效率雷达</h3>
<div style="position: relative; height: 350px;">
<canvas id="modelEfficiencyRadarChart_{{ period_id }}"></canvas>
</div>
<div id="modelEfficiencyRadarChart_{{ period_id }}" style="width: 100%; height: 380px;"></div>
</div>
<div class="chart-container">
<h3>⏱️ 响应时间分布</h3>
<div style="position: relative; min-height: 300px;">
<canvas id="responseTimeScatterChart_{{ period_id }}"></canvas>
</div>
<div id="responseTimeScatterChart_{{ period_id }}" style="width: 100%; height: 350px;"></div>
</div>
</div>