// 基于准备好的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改成白色背景的就可以了
[ Full content available at:
https://github.com/apache/incubator-echarts/issues/8943 ]
This message was relayed via gitbox.apache.org for [email protected]
