vue定义echart组件加载显示问题

Question

定义了一个Echart组件

<template>
  <div class="ECharts" ref="ECharts" style="width: 100%; height: 100%"></div>
</template>
<script>
  // 引入 ECharts 主模块
  let echarts = require('echarts/lib/echarts');
  import theme from '../../assets/eChartsTheme/macarons.json'
  echarts.registerTheme('macarons', theme);
  // 引入柱状图
  // require('echarts/lib/chart/bar');
  require('echarts/lib/chart/line');
  require('echarts/lib/chart/pie');
  require('echarts/lib/chart/graph');
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/toolbox');
  require('echarts/lib/component/legend');
  require('echarts/lib/component/title');
  require('echarts/lib/component/markLine');
  require('echarts/lib/component/dataZoom');
  export default {
    name: "ECharts",
    data(){
      return {
        ECharts: null,
      }
    },
    props:['eChartsData'],
    mounted(){
      let el = this.$refs['ECharts'];
      this.ECharts = echarts.init(el, 'macarons');
      let v;
      if(typeof this.eChartsData === 'string'){
        v =JSON.parse(this.eChartsData)
      }else {
        v = this.eChartsData
      }
      if(Object.keys(v).length === 0)return;
      this.ECharts.setOption(v, true);
    },
    methods:{
      handleEChartsSetOption(){
        let v;
        if(typeof this.eChartsData === 'string'){
          v =JSON.parse(this.eChartsData)
        }else {
          v = this.eChartsData
        }
        if(Object.keys(v).length === 0)return;
        this.ECharts.setOption(v, true);
      }
    },
    watch: {
      eChartsData(val){
        let v;
        if(typeof val === 'string'){
          v =JSON.parse(val)
        }else {
          v = val
        }
        if(Object.keys(v).length === 0)return;
        this.ECharts.setOption(v, true);
      }
    }
  }
</script>

然后再外面使用

import ECharts from '../../widgets/ECharts'
<div class="headerLeft">
</div>
<div class="headerRight" ref="headerRight">
   <ECharts ref="eCharts" :eChartsData="eChartsData" style="height: 300px; width: 100%"></ECharts>
 </div>
 
 .headerWrap{
      display: flex;
      .headerLeft{
        flex-grow: 1;
      }
      .headerRight{
        margin-left: 20px;
        flex-grow: 3;
      }
    }

但是初次渲染的时候宽度总是不对！按理应该平铺整个空白地方。请问是什么问题？？？

Answer 1

因为echarts绘制的时候，div.ECharts这个元素处于隐藏状态，echarts获取到他的宽度是100%，然后解析为了100px，所以就成了这样。

解决方法：
1、先显示div.ECharts元素，再绘制图表
2、赋值div.ECharts元素的宽度为一个具体的px值
3、div.ECharts元素从隐藏状态变为显示状态后，resize一下echarts