legend - 根据图例块的大小制作主图区域

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>

标签： legendecharts

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>