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

1 Echarts图表大小设置

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

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

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

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

1.2 指定图表大小

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

<div class="echart" id="mychart"></div>
<script type="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]；代码 如下：

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

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