響應式圖片的實現步驟:
- 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>