【前端可视化】ECharts 实现响应式图表
响应式图片的实现步骤:
- 1.图表只设置高度，宽度设置为100% 或 不设置。
- 2.监听窗口的resize事件，即监听窗口尺寸的变化（需节流）。
- 3.当窗口大小改变时，然后调用 echartsInstance.resize 改变图表的大小。
另外需要注意的是：在容器节点被销毁时，可以调用 echartsInstance.dispose 以销毁echarts的实例释放资源，避免内存泄漏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="main" style="height: 400px"></div>
<script src="../libs/echarts-5.3.3.js"></script>
<script>
window.onload = function () {
let myChart = echarts.init(document.getElementById('main'));
let option = {
backgroundColor: 'rgba(255, 0, 0, 0.1)',
grid: {
show: true,
backgroundColor: 'rgba(0, 255, 0, 0.1)',
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {},
series: [
{
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
],
};
myChart.setOption(option);
// 响应式图表
window.addEventListener('resize', function () {
myChart.resize();
});
};
</script>
</body>
</html>
