echarts 铺满
时间: 2023-08-22 10:08:04 浏览: 92
要使 ECharts 图表铺满整个容器,你可以通过设置容器的宽度和高度为 100% 来实现。这样,图表将自动调整大小以适应容器。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts 铺满示例</title>
<style>
#chartContainer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="chartContainer"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<script type="text/javascript">
var chartContainer = document.getElementById('chartContainer');
var myChart = echarts.init(chartContainer);
// 在这里编写你的图表配置和数据
var option = {
// ...
};
// 设置图表的大小自适应容器
window.addEventListener('resize', function() {
myChart.resize();
});
// 渲染图表
myChart.setOption(option);
</script>
</body>
</html>
```
注意,为了使图表能够自适应容器大小的变化,代码中添加了一个监听窗口大小变化的事件,并在事件发生时调用 `myChart.resize()` 方法来重新绘制图表。
阅读全文