echarts容器的宽度根据父元素宽度变化进行自适应
根据浏览器窗口大小变化进行自适应,使用
window.onresize = ()=>myChart.resize()
浏览器窗口不变,容器大小变化(例如:侧边菜单栏收缩),vue3为例
let myChart = null;
onMounted(() => {
setTimeout(() => {
//渲染画布方法
getEchart();
//画布自适应代码
const resizeOb = new ResizeObserver(() => myChart.resize());
resizeOb.observe(document.getElementById("myChart"));
});
});
const getEchart = () => {
myChart = echarts.init(document.getElementById("myChart"));
...myChart.setOption()...
}