echart图表项目开发过程中遇到的问题笔记

最近在做echart可视化图表项目，发现在使用echart时遇到一些问题， 这篇文章主要用于记录项目过程中遇到的问题，也希望能帮助到遇到同样疑难的你们。

1.echart图标渲染高度只有100px问题？

不给图表设定宽度时，默认渲染的高度为100px，若想使图表与父元素同宽度，可设定echart图表宽高100%，外层添加父元素设定flex:1;祖先元素添加属性display:flex;即可。

2. echart图表resize失效问题，图标被压缩？

当窗口缩放时，调用echart的resize可使得图表一起缩放，但在项目使用过程中，将echart封装为组件引用，缩放图表发现，随着宽度改变，会自适应，但是自适应的宽度不正确。可能原因是：窗口改变时EChart立即获取的宽度不正确，方法是添加一个延时。
大家若也遇到这个问题，可通过以下方式解决：

//添加延迟，为了获取页面改变后的正确宽高
let myChcarts = echarts.init(this.$refs.myChart);
window.addEventListener("resize", () => {
  setTimeout(function(){
      myChcarts .resize();
   },100)  
});

3. IE模式下modal框弹出内容无高度且位置不居中问题？

因为项目需求兼容IE11，但发现IE模式下，ivu-modal-body内容无法展示，并且弹框不居中。
内容无法展示解决方式：
1、添加父级div并固定高度；
2、设置子元素display:block !important; height: 100% !important;

<Modal v-model="showTab" width="500" :closable="false" :draggable="dragable">
    <p slot="header">
      <span>自定义头部内容</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. 水波球底部渲染不填充问题？

当使用插件的形式引入liquidFill.js文件时，缩放窗口会遇到水波球底部渲染未填充问题。现象如下所示：

image.png

解决方法：

1. vue项目中引入echarts-liquidfill依赖。
   npm install echarts-liquidfill --save
2. 在需要使用水晶球的组件里引入
   import echartsLiquidfill from 'echarts-liquidfill';//在这里引入