Сделать основную область графика в зависимости от размера блока легенд

Question

Некоторые элементы легенды с довольно большим текстовым содержимым приводят к тому, что блок легенды перекрывает график. Насколько я знаю, в echarts есть варианты сделать блок легенды прокручиваемым, но для моего проекта это не сработает. Так, может быть, есть какие-нибудь способы перерисовать основной граф (в меньший), если блок легенды слишком большой? и сделать это поведение чувствительным к событию изменения размера. Спасибо за любой совет.

вот пример перекрытия: и это мой конфиг echarts

let myChart = echarts.init(document.getElementById('myChart'));

let myChartOption = {
  "tooltip": {
    "show": true
  },
  "grid": {
    "containLabel": true,
    "borderColor": "transparent",
    "backgroundColor": "transparent",
    "show": true,
    "left": "3%",
    "right": "4%",
    "borderWidth": 0
  },
  "legend": {
    "orient": "horizontal",
    "x": "center",
    "y": "bottom",
    "formatter": "{name}",
    "borderColor": "rgba(178,34,34,0.8)",
    "borderWidth": 0,
    "padding": 15,
    "textStyle": {
      "color": "#000000"
    },
    "data": [{
      "name": "ООООчень большое и длинное название графика, что просто неприлично",
      "icon": "circle"
    }, {
      "name": "ООООчень большое и длинное название графика, что просто неприлично 2",
      "icon": "circle"
    }, {
      "name": "Тоже ООООчень большое и длинное название графика, что просто неприлично",
      "icon": "circle"
    }, {
      "name": "Тоже ООООчень большое и длинное название графика, что просто неприлично 2",
      "icon": "circle"
    }]
  },
  "xAxis": {
    "type": "category",
    "boundaryGap": ["5%", "5%"],
    "data": ["январь 2015", "февраль 2015", "март 2015", "апрель 2015", "май 2015", "июнь 2015", "июль 2015", "август 2015", "сентябрь 2015", "октябрь 2015", "ноябрь 2015", "декабрь 2015", "январь 2016", "февраль 2016", "март 2016", "апрель 2016", "май 2016", "июнь 2016"],
    "axisLabel": {
      "fontSize": 9
    },
    "axisTick": {
      "alignWithLabel": true,
      "interval": 0
    }
  },
  "yAxis": [{
    "axisLine": {
      "show": true
    },
    "axisTick": {
      "show": true
    },
    "type": "value",
    "splitLine": {
      "show": false
    },
    "position": "left"
  }],
  "series": [{
    "type": "line",
    "name": "ООООчень большое и длинное название графика, что просто неприлично",
    "data": [5500, 11025, 6514, -3206, -975, -399, -3397, 5223, 1673, 13116, 13035, 29750, 26314, 33308, 36938, 38997, 32916, 31780],
    "yAxisIndex": 0,
    "itemStyle": {
      "normal": {
        "color": "#f33"
      }
    },
    "areaStyle": {}
  }, {
    "type": "line",
    "name": "ООООчень большое и длинное название графика, что просто неприлично 2",
    "data": [3000, 10820, 6925, 5785, 12675, 12450, 6700, 12660, 5390, 17125, 17980, 29955, 31015, 31110, 29405, 35235, 32025, 32535],
    "yAxisIndex": 0,
    "itemStyle": {
      "normal": {
        "color": "#fee"
      }
    },
    "areaStyle": {}
  }, {
    "type": "line",
    "name": "Тоже ООООчень большое и длинное название графика, что просто неприлично",
    "data": [1500, 1972, 2840, 856, 840, 68, 568, 3498, 3532, 3686, 5658, 5752, 1758, 5206, 7252, 6152, 9246, 8230],
    "yAxisIndex": 0,
    "itemStyle": {
      "normal": {
        "color": "#94c9fe"
      }
    },
    "areaStyle": {}
  }, {
    "type": "line",
    "name": "Тоже ООООчень большое и длинное название графика, что просто неприлично 2",
    "data": [1000, -320, 190, -1076, 0, 1876, 2385, 2336, 3084, 2450, -419, 1163, 342, 1201, 2404, 3240, 2766, 2036],
    "yAxisIndex": 0,
    "itemStyle": {
      "normal": {
        "color": "#fcabdb"
      }
    },
    "areaStyle": {}
  }]

};

myChart.setOption(myChartOption);

#myChart {
  width: 100%;
  min-height: 800px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<div id="myChart"></div>

Answer 1

Есть две настройки, которые вы должны добавить

grid.bottom:'15%', вы устанавливаете нижнюю доску сетки до 15% высоты вашего контейнера

legend.height:'15%', вы устанавливаете легенду, занимает 15 % от высоты вашего контейнера

---------------
|   85% chart  |
|------------- |
|   15% legend |
----------------

Результат:

let myChart = echarts.init(document.getElementById('myChart'));

let myChartOption = {
  "tooltip": {
    "show": true
  },
  "grid": {
    bottom: '15%',
    "containLabel": true,
    "borderColor": "transparent",
    "backgroundColor": "transparent",
    "show": true,
    "left": "3%",
    "right": "4%",
    "borderWidth": 0
  },
  "legend": {
    height:'15%',
    "orient": "horizontal",
    "x": "center",
    "y": "bottom",
    "formatter": "{name}",
    "borderColor": "rgba(178,34,34,0.8)",
    "borderWidth": 0,
    "padding": 15,
    "textStyle": {
      "color": "#000000"
    },
    "data": [{
      "name": "ООООчень большое и длинное название графика, что просто неприлично",
      "icon": "circle"
    }, {
      "name": "ООООчень большое и длинное название графика, что просто неприлично 2",
      "icon": "circle"
    }, {
      "name": "Тоже ООООчень большое и длинное название графика, что просто неприлично",
      "icon": "circle"
    }, {
      "name": "Тоже ООООчень большое и длинное название графика, что просто неприлично 2",
      "icon": "circle"
    }]
  },
  "xAxis": {
    "type": "category",
    "boundaryGap": ["5%", "5%"],
    "data": ["январь 2015", "февраль 2015", "март 2015", "апрель 2015", "май 2015", "июнь 2015", "июль 2015", "август 2015", "сентябрь 2015", "октябрь 2015", "ноябрь 2015", "декабрь 2015", "январь 2016", "февраль 2016", "март 2016", "апрель 2016", "май 2016", "июнь 2016"],
    "axisLabel": {
      "fontSize": 9
    },
    "axisTick": {
      "alignWithLabel": true,
      "interval": 0
    }
  },
  "yAxis": [{
    "axisLine": {
      "show": true
    },
    "axisTick": {
      "show": true
    },
    "type": "value",
    "splitLine": {
      "show": false
    },
    "position": "left"
  }],
  "series": [{
    "type": "line",
    "name": "ООООчень большое и длинное название графика, что просто неприлично",
    "data": [5500, 11025, 6514, -3206, -975, -399, -3397, 5223, 1673, 13116, 13035, 29750, 26314, 33308, 36938, 38997, 32916, 31780],
    "yAxisIndex": 0,
    "itemStyle": {
      "normal": {
        "color": "#f33"
      }
    },
    "areaStyle": {}
  }, {
    "type": "line",
    "name": "ООООчень большое и длинное название графика, что просто неприлично 2",
    "data": [3000, 10820, 6925, 5785, 12675, 12450, 6700, 12660, 5390, 17125, 17980, 29955, 31015, 31110, 29405, 35235, 32025, 32535],
    "yAxisIndex": 0,
    "itemStyle": {
      "normal": {
        "color": "#fee"
      }
    },
    "areaStyle": {}
  }, {
    "type": "line",
    "name": "Тоже ООООчень большое и длинное название графика, что просто неприлично",
    "data": [1500, 1972, 2840, 856, 840, 68, 568, 3498, 3532, 3686, 5658, 5752, 1758, 5206, 7252, 6152, 9246, 8230],
    "yAxisIndex": 0,
    "itemStyle": {
      "normal": {
        "color": "#94c9fe"
      }
    },
    "areaStyle": {}
  }, {
    "type": "line",
    "name": "Тоже ООООчень большое и длинное название графика, что просто неприлично 2",
    "data": [1000, -320, 190, -1076, 0, 1876, 2385, 2336, 3084, 2450, -419, 1163, 342, 1201, 2404, 3240, 2766, 2036],
    "yAxisIndex": 0,
    "itemStyle": {
      "normal": {
        "color": "#fcabdb"
      }
    },
    "areaStyle": {}
  }]

};

myChart.setOption(myChartOption);

#myChart {
  width: 100%;
  min-height: 800px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<div id="myChart"></div>