echart图表自适应宽度失效问题探究
作者:cywcd 发布:2018-10-09 11:58 字符数:3065 分类:javascript 阅读: 4,656 次 抢沙发
前情介绍:
最近做的一个vue项目中,使用echart图表组件展示数据,展示方式是点击按钮弹出弹层,在弹层中展示图表,使用vue组件方式:通过监听数据变化,在调用图表组件的页面中使用如下方法刷新数据:
this.$nextTick(function() { // 在这里赋值图表数据,渲染视图 })
问题描述:
弹出层的图表展示有时无法100%自适应宽度,图表数据展示如果是在页面中正常初始化就展示没有问题,但是如果是在初始化的弹层里默认为display:none,弹层显示的时候,图表自适应宽度计算会有一定几率出现宽度不准,查看dom节点样式设置宽度为100px,canvas宽度设置100px。
分析原因:
echart自适应中使用resize()方法,监听窗口的变化来修改echart图表来实现自适应,然而在初始化时样式为隐藏,弹出展示不能很好的计算弹层宽度,而使用了100%的宽度值为100px,出现自适应宽度样式显示不正常问题。
解决思路:
是点击弹层是动态设置组件宽度为固定值,监听弹层宽度变化自适应修改图表canvas宽度值。
示例:
1) 页面调用组件:
2) 组件源码:
3) 页面自适应实现:
export default { data() { return { echartWidth: '100%' } }, mounted() { this.resetChart() }, methods: { resetChart() { const that = this window.onresize = () => { return (() => { // 获取弹层里图标外层宽度 var cardBoxUser = document.querySelector('.box-card-user.item') var canvasUserWidth = document.querySelector('.box-card-user.item .chart div') // 显示弹层时 if (that.dialogUserDetail === true) { that.echartWidth = cardBoxUser.offsetWidth + 'px' canvasUserWidth.style.width = that.echartWidth } })() } } }, watch: { echartWidth(val) { if (!this.timer) { this.echartWidth = val this.timer = true const that = this setTimeout(function() { // console.log(that.echartWidth) that.timer = false }, 400) } } } }
OK,这样就解决了echart图表在弹层中自适应宽度失效问题啦。