chore: echart渲染类型更换&调整agent应用分析样式

src/components/custom-echart/custom-echart.vue

@@ -34,10 +34,8 @@ watch(
 )
 
 const chartResizeHandler = debounce(() => {
-  if (customChart.value) {
-    customChart.value.resize()
-  }
-}, 100)
+  customChart.value?.resize()
+}, 200)
 
 onMounted(() => {
   drawEChart()
@@ -54,7 +52,7 @@ function drawEChart() {
     customChart.value.dispose()
   }
 
-  customChart.value = echarts.init(customChartRef.value as HTMLDivElement)
+  customChart.value = echarts.init(customChartRef.value as HTMLDivElement, null, { renderer: 'svg' })
 
   customChart.value?.setOption(props.option, true)
 }

src/utils/echarts.ts

@@ -9,7 +9,7 @@ import {
   ToolboxComponent,
 } from 'echarts/components'
 import { LabelLayout, UniversalTransition } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
+import { SVGRenderer } from 'echarts/renderers'
 import type { BarSeriesOption, PieSeriesOption, LineSeriesOption } from 'echarts/charts'
 import type {
   TitleComponentOption,
@@ -31,7 +31,7 @@ Echarts.use([
   ToolboxComponent,
   LabelLayout,
   UniversalTransition,
-  CanvasRenderer,
+  SVGRenderer,
   BarChart,
   PieChart,
   LineChart,

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

@@ -19,7 +19,7 @@ const defaultEchartOption: EChartsOption = {
   title: [
     {
       subtext: t('analysis_module.send_messages'),
-      left: '27%',
+      left: '26.8%',
       top: '175px',
       subtextStyle: {
         fontSize: 14,

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: '18px',
+      bottom: '20px',
     },
     color: ['#000DFF'],
   }
@@ -203,29 +203,35 @@ async function handleUpdateDateRange(_value: [number, number], formattedValue: [
       </div>
     </div>
 
-    <div class="mb-10 flex flex-1">
-      <div class="text-font-color relative h-full flex-1 border-r border-r-[#E2E2E2]">
+    <div class="mb-10 grid h-full grid-cols-3">
+      <div class="text-font-color relative h-full w-full 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]" />
           <span>{{ t('analysis_module.agent_users') }}</span>
         </div>
-        <CustomEchart ref="usageEchartRef" :option="usageEchartOption" />
+        <div class="h-full w-full">
+          <CustomEchart ref="usageEchartRef" :option="usageEchartOption" />
+        </div>
       </div>
 
-      <div class="text-font-color relative h-full flex-1 border-r border-r-[#E2E2E2]">
+      <div class="text-font-color relative h-full border-r border-r-[#E2E2E2]">
         <div class="absolute left-1/2 flex translate-x-[-50%] items-center gap-[5px]">
           <i class="iconfont icon-send-times text-[14px]" />
           <span>{{ t('analysis_module.send_messages') }}</span>
         </div>
-        <CustomEchart ref="sendMessagesEchartRef" :option="sendTimesEchartOption" />
+        <div class="h-full w-full">
+          <CustomEchart ref="sendMessagesEchartRef" :option="sendTimesEchartOption" />
+        </div>
       </div>
 
-      <div class="relative h-full flex-1">
+      <div class="relative h-full">
         <div class="absolute left-1/2 flex translate-x-[-50%] items-center gap-[5px]">
           <i class="iconfont icon-consume text-[14px]" />
           <span>{{ t('analysis_module.consume_points') }}</span>
         </div>
-        <CustomEchart ref="consumePointsEchartRef" :option="consumePointsEchartOption" />
+        <div class="h-full w-full">
+          <CustomEchart ref="consumePointsEchartRef" :option="consumePointsEchartOption" />
+        </div>
       </div>
     </div>
   </div>