echart单个实例中包含三个grid时,legend图例无法显示
配置项如下
var dataAll = [
[10.0, 8.04, 3, 5, 8],
[8.0, 6.95, 2, 9, 2],
[10.0, 9.14, 6, 4, 2],
[8.0, 8.14, 2, 8, 9],
[10.0, 7.46, 0, 2, 4],
[8.0, 6.77, 0, 1, 2],
[6.0, 2, 1, 2]
];
option = {
tooltip: {
trigger: 'axis'
},
legend: {
show: true,
data: ['1111111', '222222', '3333333333', '444444'],
right: 0,
top: 0,
textStyle: {
color: '#345123',
fontSize: 30
}
},
grid: [{
show: true,
left: 30,
top: '10%',
width: '80%',
height: '20%',
backgroundColor: 'rgba(0,66,108,.2)',
borderWidth: 0
}, {
show: true,
left: 30,
top: '36%',
width: '80%',
height: '20%',
backgroundColor: 'rgba(0,66,108,.2)',
borderWidth: 0
}, {
show: true,
left: 30,
top: '61%',
width: '80%',
height: '20%',
backgroundColor: 'rgba(0,66,108,.2)',
borderWidth: 0
}],
xAxis: [{
show: false,
gridIndex: 0,
type: 'category',
splitLine: {
show: false
},
data: [2011, 2012, 2013, 2014, 2015]
}, {
show: false,
gridIndex: 1,
type: 'category',
splitLine: {
show: false
},
data: [2011, 2012, 2013, 2014, 2015]
}, {
gridIndex: 2,
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: true
},
axisTick: {
show: false
},
axisLabel: {
show: true
},
data: [2011, 2012, 2013, 2014, 2015]
}],
yAxis: [{
show: false,
gridIndex: 0,
type: 'value'
}, {
show: false,
gridIndex: 1,
type: 'value'
}, {
show: false,
gridIndex: 2,
type: 'value'
}],
series: [{
name: '1111111',
type: 'line',
symbol: 'circle',
symbolSize: 20,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
color: '#4b9d91',
lineStyle: { // 系列级个性化折线样式
width: 5,
type: 'solid'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(75,157,145,.7)'
}, {
offset: 1,
color: 'rgba(11, 39, 79,.1)'
}])
}
}
},
data: dataAll[0]
}, {
name: '222222',
type: 'line',
symbol: 'circle',
symbolSize: 20,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
color: '#7840a5',
lineStyle: { // 系列级个性化折线样式
width: 5,
type: 'solid'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(120,64,165,.7)'
}, {
offset: 1,
color: 'rgba(11, 39, 79,.1)'
}])
}
}
},
data: dataAll[1]
}, {
name: '3333333333',
type: 'line',
symbol: 'circle',
symbolSize: 20,
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
color: '#3175c0',
lineStyle: { // 系列级个性化折线样式
width: 5,
type: 'solid'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(49,117,192,.7)'
}, {
offset: 1,
color: 'rgba(11, 39, 79,.1)'
}])
}
}
},
data: dataAll[2]
}, {
name: '444444',
type: 'line',
symbol: 'circle',
symbolSize: 20,
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#4b94491',
lineStyle: { // 系列级个性化折线样式
width: 5,
type: 'solid'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(75,157,145,.7)'
}, {
offset: 1,
color: 'rgba(11, 39, 79,.1)'
}])
}
}
},
data: dataAll[3]
}, {
name: '444444',
type: 'line',
symbol: 'circle',
symbolSize: 20,
xAxisIndex: 2,
yAxisIndex: 2,
itemStyle: {
normal: {
color: '#4b94491',
lineStyle: { // 系列级个性化折线样式
width: 5,
type: 'solid'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(75,157,145,.7)'
}, {
offset: 1,
color: 'rgba(11, 39, 79,.1)'
}])
}
}
},
data: dataAll[4]
}]
};