token用量

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,6 +296,8 @@ export default {
           formatter: '{b}: {c} Token ({d}%)'
         },
         legend: {
+          orient: 'horizontal',
+          left: 'center',
           bottom: 0,
           icon: 'circle',
           textStyle: {
@@ -307,11 +309,20 @@ export default {
           {
             name: 'Token占比',
             type: 'pie',
-            radius: ['52%', '72%'],
+            radius: ['55%', '70%'],
-            center: ['50%', '44%'],
+            center: ['50%', '48%'],
             avoidLabelOverlap: true,
             label: {
-              formatter: '{b}\n{d}%'
+              show: true,
+              position: 'outside',
+              formatter: '{b}\n{d}%',
+              lineHeight: 18,
+              fontSize: 12
+            },
+            labelLine: {
+              length: 8,
+              length2: 12,
+              smooth: true
             },
             data: hasData
               ? [
@@ -321,7 +332,7 @@ export default {
               : [{ name: '暂无数据', value: 1 }],
             itemStyle: {
               borderColor: '#fff',
-              borderWidth: 3
+              borderWidth: 2
             }
           }
         ]
@@ -332,10 +343,11 @@ export default {
       const rankList = this.modelUsageRank.slice().reverse()
       this.modelRankChart.setOption({
         grid: {
-          top: 12,
+          top: 24,
-          right: 24,
+          right: 30,
-          bottom: 20,
+          bottom: 28,
-          left: 92
+          left: 100,
+          containLabel: false
         },
         tooltip: {
           trigger: 'axis',
@@ -371,15 +383,16 @@ export default {
           axisTick: { show: false },
           axisLabel: {
             color: '#606266',
-            width: 82,
+            width: 88,
-            overflow: 'truncate'
+            overflow: 'truncate',
+            margin: 8
           }
         },
         series: [
           {
             name: 'Token消耗',
             type: 'bar',
-            barWidth: 12,
+            barWidth: 14,
             data: rankList.map(item => item.total_tokens),
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -392,6 +405,7 @@ export default {
               show: true,
               position: 'right',
               color: '#344054',
+              fontSize: 11,
               formatter: params => this.formatNumber(params.value)
             }
           }
@@ -657,11 +671,11 @@ export default {
 
 .chart-box {
   width: 100%;
-  height: 240px;
+  height: 260px;
 }
 
 .model-rank-chart {
-  height: 300px;
+  height: 320px;
 }
 
 .ratio-list,