开篇

原理其实很简单,监听 window 的 resize 事件,调用 echarts 的 resize 事件即可,文档在这里open in new window,自己看.

上代码:

let chart = echart.init(document.getElementById('chart'));

window.addEventListener('resize' ,()=>{
    chart.resize();
})

当然了,还有更奇葩的做法:监听 resize 事件,每次浏览器窗口改变了, 调用location.reload();方法刷新页面.不知谁写的,祖传代码里看见的.千万别这么干.

在 vue 中的使用心得

既然提到了,就再多啰嗦两句吧,项目中经常使用的是 vue,因此难免在vue中使用 echarts,当然了,用的是模块化开发,官方脚手架生成的项目,通过 npm 安装,然后在 main.js 中 通过 import echarts from 'echarts' 引入, 最后,通过 Vue.prototype.$echarts = echarts 拓展到 Vue 的原型上,然后,就可以在任何地方愉快的使用 this.$charts 调用了.以上操作没毛病,以下的有毛病.

let charts = this.$echarts.init(document.getElementById('charts'));

charts.setOption({...});

这是在vue中啊,通过静动态绑定的 id 初始化,有没有感觉哪里很奇怪? 奇怪就对了,不奇怪才奇怪, vue中敢用 jquery, 还有什么不能干的呢.这么做除非你保证整个项目中的每个图不用封装,不会复用, 那你就这么奇怪的用,不然,你如果要复用,肯定只能加在出来第一个.后面的肯定加载不出来,因为你是通过 document.getElementById查找的DOM对象.也可以动态传入 id ,但是你不觉得奇怪吗??? 为什么不用 vue 的 ref呢? 关于 ref 的,不在浪费时间了,直接去看文档open in new window吧.