Fix chart labels — rotate 45deg, enlarge grid bottom margin, remove broken formatter

attribution-mockup.html

@@ -640,11 +640,19 @@ function renderCPA(d) {
     roi: ((ch.revenue - ch.spend) / ch.spend * 100).toFixed(0) + '%',
   }));
   const chNames = revData.map(r => r.name);
+  const chShort = {
+    'Яндекс Директ': 'Я.Директ',
+    'VK Реклама': 'VK',
+    'SEO': 'SEO',
+    'Ретаргетинг': 'Ретаргет',
+    'Выставки': 'Выставки',
+  };
+  const shortNames = chNames.map(n => chShort[n] || n);
   charts.revChannel.setOption({
     tooltip:{trigger:'axis',backgroundColor:'#111',borderColor:'#222',textStyle:{color:'#fafafa',fontSize:11}},
     legend:{data:['Доход','Расход'],textStyle:{color:'#52525b',fontSize:10},top:0},
-    grid:{left:100,right:16,top:30,bottom:10},
-    xAxis:{type:'category',data:chNames,axisLine:{lineStyle:{color:'#1e1e22'}},axisLabel:{color:'#a1a1aa',fontSize:9}},
+    grid:{left:80,right:16,top:30,bottom:60},
+    xAxis:{type:'category',data:shortNames,axisLine:{lineStyle:{color:'#1e1e22'}},axisLabel:{color:'#a1a1aa',fontSize:10,interval:0,rotate:45,margin:8}},
     yAxis:{type:'value',splitLine:{lineStyle:{color:'#1a1a1e'}},axisLabel:{color:'#52525b',fontSize:10,formatter:v=>v>=1e6?(v/1e6).toFixed(0)+'М':(v/1e3).toFixed(0)+'К'}},
     series:[
       {name:'Доход',type:'bar',data:revData.map(r=>r.revenue),barWidth:'35%',itemStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#22c55e'},{offset:1,color:'rgba(34,197,94,.3)'}]),borderRadius:[4,4,0,0]}},