最近在做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
解决方法：
- vue项目中引入
echarts-liquidfill依赖。
npm install echarts-liquidfill --save - 在需要使用水晶球的组件里引入
import echartsLiquidfill from 'echarts-liquidfill';//在这里引入
网友评论