echart && g2 分辨率适配的问题

前言:

1.对window.resize()的理解

虽然通过监听使用resize()可以改变图像的大小，但是只能改变图表的大小，他已经配置好的属性是没有办法改变的（比如fontsize,图标的大小等），它相当于根据当前屏幕分辨率改变当前画布的大小重新绘制一下option当中的数据，因此展现出来的效果是可以看到图表的大小发生了变化，但是label却没有发生变化。

2.思路：我们可以通过监听当前屏幕的分辨率算出当前屏幕相对于常见标准屏幕（1290）的比值（scale）,然后将图内需要适配的属性*scale,然后监听屏幕大小变化时，一旦屏幕大小发生变化，我们就重新绘制我们的图表（setoption），此时我们得到的option中的属性是新的，因此绘制出来的图表也是新的，所呈现出来的效果是图表和文字都发生了变化。

3.！！！注意：在每次setoption之前，都要close掉当前正在呈现的option，否则可能不会渲染出新的图表，从而影响效果。更为重要的是要注意使用的时机，以防关闭与重绘时间不合适影响效果

4 eg:

        

<template>

  <div class="content4">

    <div ref="root4" id="main4"></div>

  </div>

</template>

<script>

import * as echarts from "echarts";

<