Merge branch 'main' of https://git.opencomputing.cn/yumoqing/kboss

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

@@ -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,