diff --git a/attribution-mockup.html b/attribution-mockup.html index b0736f4..138f8b6 100644 --- a/attribution-mockup.html +++ b/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]}},