最近在做echart可視化圖表項(xiàng)目，發(fā)現(xiàn)在使用echart時遇到一些問題， 這篇文章主要用于記錄項(xiàng)目過程中遇到的問題，也希望能幫助到遇到同樣疑難的你們。

1.echart圖標(biāo)渲染高度只有100px問題？

不給圖表設(shè)定寬度時，默認(rèn)渲染的高度為100px，若想使圖表與父元素同寬度，可設(shè)定echart圖表寬高100%，外層添加父元素設(shè)定flex:1;祖先元素添加屬性display:flex;即可。

2. echart圖表resize失效問題，圖標(biāo)被壓縮？

當(dāng)窗口縮放時，調(diào)用echart的resize可使得圖表一起縮放，但在項(xiàng)目使用過程中，將echart封裝為組件引用，縮放圖表發(fā)現(xiàn)，隨著寬度改變，會自適應(yīng)，但是自適應(yīng)的寬度不正確?？赡茉蚴牵?strong>窗口改變時EChart立即獲取的寬度不正確，方法是添加一個延時。
大家若也遇到這個問題，可通過以下方式解決：

//添加延遲，為了獲取頁面改變后的正確寬高
let myChcarts = echarts.init(this.$refs.myChart);
window.addEventListener("resize", () => {
  setTimeout(function(){
      myChcarts .resize();
   },100)  
});

3. IE模式下modal框彈出內(nèi)容無高度且位置不居中問題？

因?yàn)轫?xiàng)目需求兼容IE11，但發(fā)現(xiàn)IE模式下，ivu-modal-body內(nèi)容無法展示，并且彈框不居中。
內(nèi)容無法展示解決方式：
1、添加父級div并固定高度；
2、設(shè)置子元素display:block !important; height: 100% !important;

<Modal v-model="showTab" width="500" :closable="false" :draggable="dragable">
    <p slot="header">
      <span>自定義頭部內(nèi)容</span>
    </p>
   <div style="height: 250px; width:100%" class="ivu-rate">
       <Table :loading="loading" class="rate-table" :columns="columnsData" :data="tabData"></Table> 
   </div>
  <div slot="footer">
      <Button type="primary" >自定義底部按鈕</Button>
  </div>
</Modal>

<style>
   .ivu-rate {
        .ivu-table-wrapper {
            height: 100% !important;
        }
    }
  .rate-table {
        display: block !important;   // 主要是這兩條樣式
        height: 100% !important;

        .ivu-table td, .ivu-table th {
            height: 32px !important;
        }
    }
</style>

彈框不居中解決方式
絕對定位居中modal框

//  IE瀏覽器
if (navigator.userAgent.indexOf('Trident') > -1) {
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = "text/css";
    style.innerHTML = `
        .ivu-modal-wrap > .ivu-modal {
                 position: fixed !important;
                  left: 50%;
                  top: 50% !important;
                   transform: translate(-50%, -50%);
              }`
    head.appendChild(style);
}

4. 水波球底部渲染不填充問題？

當(dāng)使用插件的形式引入liquidFill.js文件時，縮放窗口會遇到水波球底部渲染未填充問題?，F(xiàn)象如下所示：

image.png

解決方法：

1. vue項(xiàng)目中引入echarts-liquidfill依賴。
   npm install echarts-liquidfill --save
2. 在需要使用水晶球的組件里引入
   import echartsLiquidfill from 'echarts-liquidfill';//在這里引入