chore: agent应用分析样式调整

src/views/personal-space/personal-app-setting/components/agent-analysis/components/channel-usage-comparison-chart.vue

@@ -19,8 +19,8 @@ const defaultEchartOption: EChartsOption = {
   title: [
     {
       subtext: t('analysis_module.send_messages'),
-      left: '24.5%',
-      top: '190px',
+      left: '27%',
+      top: '175px',
       subtextStyle: {
         fontSize: 14,
         color: '#333333',
@@ -29,8 +29,8 @@ const defaultEchartOption: EChartsOption = {
     },
     {
       subtext: t('analysis_module.consume_points'),
-      left: '74.5%',
-      top: '190px',
+      left: '72%',
+      top: '175px',
       subtextStyle: {
         fontSize: 14,
         color: '#333333',
@@ -41,9 +41,8 @@ const defaultEchartOption: EChartsOption = {
   legend: {
     top: '20px',
     right: '54px',
-    data: [{ name: t(ChannelText.link_share) }, { name: t(ChannelText.mall) }],
   },
-  color: ['#00C2FF', '#454FFF'],
+  color: ['#454FFF', '#00C2FF'],
   tooltip: {
     trigger: 'item',
     textStyle: {
@@ -53,10 +52,11 @@ const defaultEchartOption: EChartsOption = {
   series: [
     {
       type: 'pie',
-      top: '90px',
+      top: '60px',
       radius: ['50%', '70%'],
       center: ['50%', '50%'],
       encode: { value: 'count1', itemName: 'channel' },
+      clockwise: false,
       label: {
         position: 'outer',
         alignTo: 'labelLine',
@@ -64,21 +64,22 @@ const defaultEchartOption: EChartsOption = {
         bleedMargin: 5,
       },
       left: 0,
-      right: '50%',
+      right: '45%',
     },
     {
       type: 'pie',
-      top: '90px',
+      top: '60px',
       radius: ['50%', '70%'],
       center: ['50%', '50%'],
       encode: { value: 'count2', itemName: 'channel' },
+      clockwise: false,
       label: {
         position: 'outer',
         alignTo: 'labelLine',
         formatter: '{d}%',
         bleedMargin: 5,
       },
-      left: '50%',
+      left: '45%',
       right: 0,
     },
   ],
@@ -103,13 +104,17 @@ async function handleGetMonthChannelProportion() {
   const dataSource = consumePointChannelCountList.value.map((consumePointChannelCountItem) => {
     const sendMessageChannelCountItem = channelMap.get(consumePointChannelCountItem.channel)
 
-    return sendMessageChannelCountItem
-      ? {
-          channel: t(ChannelText[consumePointChannelCountItem.channel]),
-          count1: sendMessageChannelCountItem.count,
-          count2: consumePointChannelCountItem.count,
-        }
-      : consumePointChannelCountItem
+    return {
+      channel: consumePointChannelCountItem.channel,
+      count1: sendMessageChannelCountItem?.count || 0,
+      count2: consumePointChannelCountItem?.count || 0,
+    }
+  })
+
+  const newDataSource = handleDataSourceSort(dataSource)
+
+  newDataSource.forEach((item) => {
+    ;(item.channel as string) = t(ChannelText[item.channel])
   })
 
   channelUsageChartOption.dataset = {
@@ -119,6 +124,19 @@ async function handleGetMonthChannelProportion() {
   channelUsageChartRef.value?.echartHideLoading()
 }
 
+function handleDataSourceSort(dataSource: { channel: ChannelType; count1: number; count2: number }[]) {
+  const channelSortMap = {
+    [ChannelType.link_share]: 1,
+    [ChannelType.mall]: 2,
+    [ChannelType.index]: 3,
+    [ChannelType.api]: 4,
+    [ChannelType.preview]: 5,
+    [ChannelType.multi_preview]: 6,
+  }
+
+  return dataSource.sort((a, b) => channelSortMap[a.channel] - channelSortMap[b.channel])
+}
+
 async function handleGetMonthSendMessageCount() {
   const res = await fetchGetMonthSendMessageCount<ChannelCountItem[]>(params.agentId as string, [
     ChannelType.link_share,

src/views/personal-space/personal-app-setting/components/agent-analysis/components/channel-user-comparison-chart.vue

@@ -61,7 +61,7 @@ const defaultEchartOption: EChartsOption = {
   grid: {
     left: '58px',
     right: '54px',
-    bottom: '46px',
+    bottom: '48px',
     top: '100px',
   },
 }

src/views/personal-space/personal-app-setting/components/agent-analysis/components/usage-trend-chart.vue

@@ -118,7 +118,7 @@ function defaultEchartOption(
     grid: {
       left: '58px',
       right: '40px',
-      bottom: '20px',
+      bottom: '18px',
     },
     color: ['#000DFF'],
   }
@@ -180,7 +180,7 @@ async function handleUpdateDateRange(_value: [number, number], formattedValue: [
 </script>
 
 <template>
-  <div class="h-[356px] w-full rounded-[20px] bg-white">
+  <div class="flex h-[356px] w-full flex-col rounded-[20px] bg-white">
     <div class="mx-[34px] flex justify-between py-5">
       <AnalysisContentTitle :title="t('analysis_module.usage_trend_chart')" />
 
@@ -203,7 +203,7 @@ async function handleUpdateDateRange(_value: [number, number], formattedValue: [
       </div>
     </div>
 
-    <div class="flex h-[240px]">
+    <div class="mb-10 flex flex-1">
       <div class="text-font-color relative h-full flex-1 border-r border-r-[#E2E2E2]">
         <div class="absolute left-1/2 flex translate-x-[-50%] items-center gap-[5px]">
           <i class="iconfont icon-user text-[14px]" />