[echarts] 图表自适应宽高大小

 <div class="echart-wrap" :ref="wrapId" :id="wrapId" >
    <div :ref="chartsId"  :id="chartsId" ></div>
  </div>复制

props: {
    wrapId: {
      // 需传递外层echarts外层id字符串，已便于动态获取外层宽高
      type: String,
      default: 'wrapId',
    },
    chartsId: {
      // echarts本身id 以便于dom操作，避免冲突
      type: String,
      default: 'chartsId',
    },复制

 .echart-wrap{
    width: 100%;
    height: 100%;
    position: relative;
  }复制

this.myChart.setOption(this.options, true);
window.addEventListener('resize', () => {
        this.echartsResize(this.myChart, this.chartsId, this.wrapId);
      });复制

 /**
     *  echarts resize
     *
     * @export
     * @param {*} myChart echarts 初始化后得到的值
     * @param {String} domId echarts的dom id
     * @param {String} domWrapId echarts 外层div的 dom id，用来获取宽高
     */
    echartsResize(myChart, domId, domWrapId) {
      // 重置容器高宽
      this.echartsSetWH(domId, domWrapId);
      if (myChart) {
        myChart.resize();
      }
    },
 复制

    /**
     * echarts 设置宽高
     *
     * @export
     * @param {String} domId echarts的dom id
     * @param {String} domWrapId echarts 外层div的 dom id，用来获取宽高
     */
    echartsSetWH(domId, domWrapId) {
      const worldMapContainer = document.getElementById(domId);
      // // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      if (worldMapContainer) {
        worldMapContainer.style.width = `${document.getElementById(domWrapId).offsetWidth - 5}px`;
        worldMapContainer.style.height = `${document.getElementById(domWrapId).offsetHeight - 5}px`;
      }
    },复制

Echarts图表自适应宽高大小