f/web-kboss/src/views/tokenUsage/index.vue

@@ -7,7 +7,7 @@
             <span class="title-icon">
               <i class="el-icon-data-line"></i>
             </span>
-            <h2>Token用量</h2>
+            <h2>Token用量</h2> 
           </div>
           <p>查看模型调用 Token 消耗、调用次数和费用趋势。</p>
         </div>
@@ -17,7 +17,7 @@
         </div>
       </div> -->
 
-
+      
       <div class="stat-row">
         <div v-for="item in statCards" :key="item.label" class="stat-card" :class="item.type">
           <div class="stat-card-head">
@@ -71,7 +71,7 @@
             ></el-input>
             <el-date-picker
               v-model="dateRange"
-              type="daterange"
+              type="daterange" 
               size="small"
               value-format="yyyy-MM-dd"
               range-separator="至"
@@ -296,8 +296,6 @@ export default {
           formatter: '{b}: {c} Token ({d}%)'
         },
         legend: {
-          orient: 'horizontal',
-          left: 'center',
           bottom: 0,
           icon: 'circle',
           textStyle: {
@@ -309,20 +307,11 @@ export default {
           {
             name: 'Token占比',
             type: 'pie',
-            radius: ['55%', '70%'],
+            radius: ['52%', '72%'],
-            center: ['50%', '48%'],
+            center: ['50%', '44%'],
             avoidLabelOverlap: true,
             label: {
-              show: true,
+              formatter: '{b}\n{d}%'
-              position: 'outside',
-              formatter: '{b}\n{d}%',
-              lineHeight: 18,
-              fontSize: 12
-            },
-            labelLine: {
-              length: 8,
-              length2: 12,
-              smooth: true
             },
             data: hasData
               ? [
@@ -332,7 +321,7 @@ export default {
               : [{ name: '暂无数据', value: 1 }],
             itemStyle: {
               borderColor: '#fff',
-              borderWidth: 2
+              borderWidth: 3
             }
           }
         ]
@@ -343,11 +332,10 @@ export default {
       const rankList = this.modelUsageRank.slice().reverse()
       this.modelRankChart.setOption({
         grid: {
-          top: 24,
+          top: 12,
-          right: 30,
+          right: 24,
-          bottom: 28,
+          bottom: 20,
-          left: 100,
+          left: 92
-          containLabel: false
         },
         tooltip: {
           trigger: 'axis',
@@ -383,16 +371,15 @@ export default {
           axisTick: { show: false },
           axisLabel: {
             color: '#606266',
-            width: 88,
+            width: 82,
-            overflow: 'truncate',
+            overflow: 'truncate'
-            margin: 8
           }
         },
         series: [
           {
             name: 'Token消耗',
             type: 'bar',
-            barWidth: 14,
+            barWidth: 12,
             data: rankList.map(item => item.total_tokens),
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -405,7 +392,6 @@ export default {
               show: true,
               position: 'right',
               color: '#344054',
-              fontSize: 11,
               formatter: params => this.formatNumber(params.value)
             }
           }
@@ -671,11 +657,11 @@ export default {
 
 .chart-box {
   width: 100%;
-  height: 260px;
+  height: 240px;
 }
 
 .model-rank-chart {
-  height: 320px;
+  height: 300px;
 }
 
 .ratio-list,