项目场景： 如何在 vue 中使用 window.onresize如何避免 覆盖其它的 window.onresize手动触发 window.onresizeecharts 监听图表容器的大小并改变图表大小使用vue-resize 监听图表容器的大小并改变图表大小
div resize 解决方案： 绝大多数据场景下我们只是希望echarts感知外层包裹的resize事件而改变大小 但div并没有resize事件,我们需要借助插件完成该功能
插件 vue-resize
//安装 npm install --save vue-resize
// 引入 vue-resize import ‘vue-resize/dist/vue-resize.css’ import VueResize from ‘vue-resize’ Vue.use(VueResize)
/** * echarts + vue-resize */ <template> <!-- 父容器的position为static以外的值,如relative--> <div class="w" style="position: relative;"> <!-- vue-resize 放在容器根下与echarts 绘制区同级--> <resize-observer @notify="handleResize" /> <!-- echarts 绘制区 --> <div ref="canvas" class="canvas" /> </div> </template> <script> export default { data() { return { loading: false, myChart: {}, srcData: [ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['Milk Tea', 83.1, 73.4, 55.1], ['Cheese Cocoa', 86.4, 65.2, 82.5], ['Walnut Brownie', 72.4, 53.9, 39.1] ] } }, mounted() { this.myChart = this.$echarts.init(this.$refs.canvas) this.init() this.draw(this.srcData) }, methods: { // echarts 初始化样式 init() { var option = { dataset: { source: [] }, xAxis: { type: 'category' }, yAxis: {}, series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] } this.myChart.setOption(option) }, // 绘制图表数据 draw(val) { this.myChart.setOption({ dataset: { source: val } }) }, handleResize() { this.myChart && this.myChart.resize() } } } </script> <style lang="less" scoped> </style> window.onresize解决方案： <script> /* echarts 监听图表容器的大小并改变图表大小 */ export default { mounted() { this.myChart = this.$echarts.init(this.$refs.canvas) // 监听 window.onresize window.addEventListener('resize', this.resize, false) }, // 注销 window.onresize beforeDestroy() { window.removeEventListener('resize', this.resize) }, methods: { resize() { this.myChart.resize() }, // 手动触发window.onresize dispatchResize(){ try { var ev = document.createEvent('Event'); ev.initEvent('resize', true, true); window.dispatchEvent(ev) } catch (e) {} } } } </script>错误分析
常见的错误代码 1
<script> export default { mounted() { // 窗口自适应，关键代码 window.onresize = () => { this.$refs.chart1.resize() } }, // 注销window.onresize事件 destroyed() { window.onresize = null } } </script> 会覆盖其它的 window.onresize,导致页面中只有一个window.onresize生效.不要在destroyed中注销,容易引起不必要的麻烦.请使用beforeDestroy<script> export default { beforeDestroy() { // 输出结果: {canvas: div.canvas} console.log('beforeDestroy', this.$refs) }, destroyed() { // 输出结果: {canvas: div.undefined} console.log('destroyed', this.$refs) } } </script>常见的错误代码 2
<script> window.addEventListener('resize', this.resize(), false) </script>抄作业都没抄明白的代码 window.addEventListener 第二个参数接收了this.resize()执行结果，而不是一个function
常见的错误代码 3
<script> window.addEventListener('resize', () => { this.resize() }) </script>匿名函数你怎么销毁?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
