Change settings

src/components/CompareChartE.vue

@@ -27,11 +27,11 @@ const ASSET_CUTOFF = {
 };
 
 const AGENT_COLOR_MAP = {
-  HedgeFundAgent: '#6D4CFE',
-  DeepFundAgent: '#FF6B6B',
-  TradeAgent: '#10B981',
-  InvestorAgent: '#F59E0B'
-}
+  HedgeFundAgent: '#3A0CA3',   // violet-blue
+  DeepFundAgent: '#F72585',    // magenta
+  TradeAgent: '#00BFA6',       // teal
+  InvestorAgent: '#FFB703',    // golden
+};
 
 // pick color by agent name + index (from agentColorIndex map)
 function getAgentColor(agent, idx = 0) {
@@ -353,12 +353,17 @@ export default defineComponent({
       }
 
       this.option = {
+        backgroundColor: 'transparent',
+        grid: { left: 60, right: 160, top: 20, bottom: 60 },
         animation: true,
         locale: 'en',
-        grid: { left: 64, right: 200, top: 8, bottom: 52 },
         tooltip: {
           trigger: 'axis',
           axisPointer: { type: 'line' },
+          backgroundColor: 'rgba(255,255,255,0.9)',
+          borderColor: 'rgba(0,0,0,0.1)',
+          textStyle: { color: '#111', fontWeight: 600, fontSize: 13 },
+          extraCssText: 'box-shadow: 0 4px 10px rgba(0,0,0,0.08); backdrop-filter: blur(6px);'
           // NEW: format per mode
           valueFormatter: v => {
             if (typeof v !== 'number') return v
@@ -371,21 +376,27 @@ export default defineComponent({
         xAxis: { 
           type: 'time',
           axisLabel: {
+            fontWeight: 600,
+            color: '#333',
             formatter: (value) => {
               const date = new Date(value);
               return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
             }
-          }
+          },
+          axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
+          splitLine: { show: false }
         },
-        yAxis: this.mode === 'pct'
-          ? {
-              type: 'value', scale: true,
-              axisLabel: { formatter: v => `${Number(v).toLocaleString(undefined, { maximumFractionDigits: 0 })}%` }
-            }
-          : {
-              type: 'value', scale: true,
-              axisLabel: { formatter: v => Number(v).toLocaleString(undefined, {style:'currency', currency:'USD', maximumFractionDigits:0 }) }
+        yAxis: {
+          type: 'value',
+          scale: true,
+          axisLabel: {
+            color: '#444',
+            formatter: (v) => this.mode === 'pct'
+                ? `${v.toFixed(0)}%`
+                : v.toLocaleString(undefined, { style:'currency', currency:'USD', maximumFractionDigits:0 })
             },
+          splitLine: { lineStyle: { color: 'rgba(0,0,0,0.05)' } }
+        },
         dataZoom: [{ type: 'inside', throttle: 50 }, { type: 'slider', height: 14, bottom: 36 }],
         series
       }
@@ -395,6 +406,21 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.chart-wrap { width: 100%; }
+.chart-wrap {
+  width: 100%;
+  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
+  border: 1px solid rgba(0,0,0,0.05);
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
+  overflow: hidden;
+  padding: 10px;
+}
 .h-96 { height: 24rem; }
+
+:deep(.echarts-tooltip) {
+  font-family: 'Inter', sans-serif;
+  backdrop-filter: blur(8px);
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+}
 </style>