vue项目中设置Echarts图表的大小

1 Echarts图表大小设置

1.1 在 html中直接定义容器大小

通常来讲，我们在定义图标所处的容器的时候，通常会给容器设置一个默认的大小，如下：

<divclass="echart"id="mychart"style="width: 100%;height: 400px"></div><scripttype="text/javascript">const myChart= echarts.init(document.getElementById("mychart"));</script>

这种情况下，图表的大小将和容器的大小保持一致。

1.2 指定图表大小

如果需要在图表初始化的时候动态改变图表大小，则可以使用以下方式：

<divclass="echart"id="mychart"></div><scripttype="text/javascript">const setEchartWH={//设置控制图表大小变量         width:600,         height:400};const myChart= echarts.init(         document.getElementById("mychart"),null,         setEchartWH);</script>

echarts.init方法支持初始化时定义图表大小，默认第三个参数，我们通过该参数可传入变量控制图表大小。当我们不设置这个参数的的时候，图表大小默认和容器大小保持一致。第二个参数为主题，使用第三个参数时需设置为null。

1.3 监听容器大小并改变图表大小

在某些情况下，我们的图表需要随着容器的变化进行变化，这个时候我们需要监听容器大小的变化重置图表的大小；改变图表的大小使用API：[echartsInstance.resize]；代码 如下：

<divclass="echart"id="mychart"style="width: 100%;height: 400px"></div><scripttype="text/javascript">const myChart= echarts.init(document.getElementById("mychart"));     window.addEventListener("resize",()=>{         myChart.resize();});</script>

这个时候若屏幕大小变化导致容器大小变化，我们的图表会自适应屏幕大小。