loopnz commented on issue #8943: 如何让图例两行显示 URL: https://github.com/apache/incubator-echarts/issues/8943#issuecomment-417169871 // 基于准备好的dom，初始化echarts实例 var myChart=echarts.init(document.getElementById("main")); var option={ //全局背景色 backgroundColor:'#fff', //标题 title:{ text:'盈利能力分析', left:42, }, grid:{ bottom:100 }, //图例 legend:{ orient: 'vertical', align: 'left', textStyle: { color: '#666666', fontSize: 12 }, bottom:0, left:50, borderWidth:0, itemGap:20, width:800, height:50, padding: [ 0, // 上 0, // 右 0, // 下 0, // 左 ], formatter:function(name){ return name; }, data:['EBIT(万元)','营业收入(万元)','销售期间费用率(%)','管理费用率(%)',{ name:'a', icon:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', textStyle:{ color:'#fff' } },'销售费用率(%)',{ name:'b', icon:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', textStyle:{ color:'#fff' } },'财务费用率(%)'] }, //x轴 xAxis:{ //控制X轴线是否显示 axisLine:{ show:false }, //是否显示y轴刻度 axisTick:{ show:false }, axisLabel: { textStyle: { color:'#868798', fontSize:15, } }, data:["2010","2011","2012","2013","2014","2015","2016","2017"] }, //y轴 yAxis: [ { min: 0, max: 60, interval:10, axisLabel: { formatter:'{value} 万', color:'#AFB5C0' }, //控制y轴线是否显示 axisLine:{ show:false }, //是否显示y轴刻度 axisTick:{ show:false }, },{ min: -10, max:30, interval: 5, axisLabel: { textStyle:{ color:'#AFB5C0' } }, //控制y轴线是否显示 axisLine:{ show:false }, //控制是否显示Y轴分割线 splitLine:{ show:false }, //是否显示y轴刻度 axisTick:{ show:false }, }, ], series:[{ name:'EBIT(万元)', type:'bar', color:'#4D7EFA', barWidth:20,//柱图宽度 data:[7,10,11,16,11,18,10,11] },{ name:'营业收入(万元)', type:'bar', color:'#5D6BE5', barWidth:20,//柱图宽度 data:[15,20,28,33,40,46,52,60] },{ name:'销售期间费用率(%)', type:'line', color:'#C76BF0', smooth: true, data:[42,38,36,35,44,42,38,35] },{ name:'管理费用率(%)', type:'line', color:'#4D7DFB', smooth: true, data:[23,33,25,37,32,25,32,28] }, { name:'a', type:'pie', data:[] }, { name:'销售费用率(%)', type:'line', color:'#FA7D7E', smooth: true, data:[31,24,23,24,28,32,25,22] },{ name:'b', type:'pie', data:[] }, { name:'财务费用率(%)', type:'line', color:'#F9804C', smooth: true, data:[6,15,10,16,14,12,15,8] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); 给你想了个hack的办法，你自己把data里面的icon改成白色背景的就可以了
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
