Vue中使用echarts常见问题
作者:互联网
echarts控制台报错和100px宽度问题
起因echarts的父元素没有宽高或者设置了v-show;
解决思路
- 父元素没有宽高或者
需要在mounted钩子中开始绘制(这个时候Dom已渲染);
或者使用this.nextTick(()=>{console.log('需要做的操作')}); - v-show问题
// v-show改用v-if, 在watch监听数据变化加入nextTick(); watch: { pieData: { deep: true, handler(val) { if (val) { this.$nextTick(function() { this.getData(); }); } }, }, },
数据为空时图表不清空和屏幕大小发生变化不重绘
解决思路
- 数据为空之后需要清空数据使用echartDom.clear();
if (dataY.length) { this.chartsDom.setOption(option); } else { this.chartsDom.clear(); }
- mounted中添加浏览器宽高变化resize事件监听
mounted() { // 不建议使用普通事件 因为普通事件有且只能生效一个 所以会被改写覆盖 请使用事件监听 // window.onresize = () => this.chartsDom ? this.chartsDom.resize() : ''; // 使用事件监听 window.addEventListener('resize', () => this.chartsDom ? this.chartsDom.resize() : '' ); }
标签:常见问题,chartsDom,show,宽高,监听,Vue,echarts,resize 来源: https://www.cnblogs.com/lutwelve/p/16130544.html