// 基于准备好的dom,初始化echarts示例
var myChart=echarts.init(document.getElementById("main"));
var option={
//全局背景色
backgroundColor:'#fff',
//标题
title:{
text:'盈利能力分析',
left:42,
},
//图例
legend:{
orient: 'horizontal',
x:'left',
y:'bottom',
left:50,
borderWidth:0,
itemGap:0,
padding: [
0, // 上
0, // 右
0, // 下
0, // 左
],
data:['EBIT(万元)','营业收入(万元)','销售期间费用率(%)','管理费用率(%)','销售费用率(%)','财务费用率(%)']
},
//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:'销售费用率(%)',
type:'line',
color:'#FA7D7E',
smooth: true,
data:[31,24,23,24,28,32,25,22]
},{
name:'财务费用率(%)',
type:'line',
color:'#F9804C',
smooth: true,
data:[6,15,10,16,14,12,15,8]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
8条答案
按热度按时间yvt65v4c1#
增强 是要等待更新版本嘛
ev7lccsx2#
目前没有计划支持,暂时先打个 tag 标记下
c9qzyr3d3#
希望能在下个版本支持这个
nhaq1z214#
// 基于准备好的dom,初始化echarts示例
var myChart=echarts.init(document.getElementById("main"));
},
data:["2010","2011","2012","2013","2014","2015","2016","2017"]
},
给你想了个hack的办法,你自己把data里面的icon改成白色背景的就可以了
5fjcxozz5#
@ChristianYU 欢迎研究源代码给提 PR 呀~
x3naxklr6#
近期也遇到这问题
原因存在双Y轴,需求希望将两个Y轴对应的图例分开显示,以便区分数据
官方是否可以考虑让图表支持多个legend?
w3nuxt5m7#
其实可以这样:
http://gallery.echartsjs.com/editor.html?c=xSy3SVOIPQ&v=2
b1payxdu8#
之前看到过一种写法是
legend: [ data: ['20', '50', '80', '\n', '100', '150'] ]