legend of echarts always visible

1

I'm working with echarts.js , I'm working with 3 graphs, one at side of the other, when seeing the legend of one, when it is at the end of the graph, the legend is covered by the other graph, also happens at the end of the 3rd graph, the one on the right, the information of its legend is no longer visible (leaves the screen).

The legend of the center is covered by the graphic, the cursor is at the end of the wireless 1 Bits graphic, the example with which I have worked, you can find it here .

The options that happened to the graphics are the following:

    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'
  }
};

Is there any way for the legend to be accommodated, so that it can always be visible?

    
asked by Kevin Puscan Ortiz 05.05.2018 в 00:41
source

0 answers