echarts宽度自适应
时间: 2023-08-23 13:16:20 浏览: 63
对于ECharts图表的宽度自适应,你可以使用以下方法:
1. 使用百分比设置容器宽度:将ECharts图表的容器的宽度设置为百分比值,如 `width:100%;`。这样,当容器所在的父元素宽度改变时,图表会自动调整宽度以适应父容器的大小。
2. 监听窗口大小变化事件:通过JavaScript代码监听窗口大小的变化,然后在窗口大小改变时重新设置图表容器的宽度。例如,使用`window.onresize`事件来监听窗口大小变化,并在事件触发时重新设置图表容器的宽度。
下面是一个示例代码:
```html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts宽度自适应示例</title>
<style>
#chartContainer {
width:100%;
height:400px;
}
</style>
</head>
<body>
<div id="chartContainer"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<script>
// 创建图表 var chart = echarts.init(document.getElementById('chartContainer'));
// 设置图表配置项和数据 var option = {
// ...
};
// 初始化图表 chart.setOption(option);
// 监听窗口大小变化事件 window.onresize = function() {
chart.resize(); //重新设置图表大小 };
</script>
</body>
</html>
```
这样,当浏览器窗口大小改变时,图表容器的宽度会自动适应新的窗口大小。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)