Estoy trabajando con echarts.js, estoy trabajando con 3 gráficos, uno al lado del otro, al ver la leyenda de uno, cuando está al final del gráfico, la leyenda es tapada por el otro gráfico, también sucede al final del 3er gráfico, el que está a la derecha, la información de su leyenda ya no es visible (se sale de la pantalla).
La leyenda del centro es tapada por el gráfico, el cursor está al final del gráfico wireless 1 Bits, el ejemplo con el que he trabajado, lo pueden encontrar aquí.
La opciones que le paso a los gráficos son las siguientes:
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: title,
textStyle: {
color: '#eee',
fontSize: 12
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: times
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.7)',
shadowOffsetX: 2,
shadowOffsetY: 2,
}
}],
series: [
{
name:title_a,
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: '#ffc600'
}
},
data: data_a,
textStyle: {
color: '#eee',
fontSize: 10
},
lineStyle: {
color: 'rgba(101, 219, 231, 0.9)'
}
},
{
name:title_b,
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 255, 255)'
}
},
data: data_b,
textStyle: {
color: '#eee',
fontSize: 10
},
lineStyle: {
color: 'rgba(166, 46, 255, 153,.9)'
}
},
],
backgroundColor: 'rgba(34,34,34,.9)',
textStyle: {
color: '#eee'
}
};
Existe algún modo de que la leyenda se acomode, para que siempre pueda ser visible?