echarts大小自适应，width=100%实际100px的问题

分手后的思念是犯贱 2022-09-07 12:27 386阅读 0赞

1. echarts大小自适应

1. 首先要在data中定义一个为null的空值，用来保存你实例化图表的对象

  1. data() {
  2.     return {
  3.       // echarts图表
  4.       myCharts: null,
  5.       // 获取网页可见区域宽
  6.       screenWidth: document.body.clientWidth,
  7.     };
  8.   },

2. 在mounted生命周期中定义新的onresize函数，获取当前的窗口大小，并将值赋值给data中定义的screenWidth，这样在watch中就可以监听到屏幕宽度的变化

  1. mounted() {
  2.     window.onresize = () => {
  3.       return (() => {
  4.         window.screenWidth = document.body.clientWidth;
  5.         this.screenWidth = window.screenWidth;
  6.       })();
  7.     };
  8.   },

3. 在watch中监听浏览器屏幕宽度的变化，改变时，使echarts图表resize

也可以在进行其他操作时，重新改变图形的大小

  1. watch: {
  2.     '$store.state.app.sidebar.opened'() {
  3.       setTimeout(() => {
  4.         // 避免第一次进入页面中，图标没有初始化，人后resize报错的问题
  5.         this.myCharts && this.myCharts.resize();
  6.       }, 300);
  7.     },
  8.     screenWidth: {
  9.       immediate: true,
  10.       handler: function(val) {
  11.         this.screenWidth = val;
  12.         setTimeout(() => {
  13.           // 避免第一次进入页面中，图标没有初始化，人后resize报错的问题
  14.           this.myCharts && this.myCharts.resize();
  15.         }, 300);
  16.       },
  17.     },
  18.   },

2. width=100%实际100px的问题

这个原因是因为图形尚未被加载出来，不知道父元素的宽高，一般出现这种问题是因为，设置了v-show或者tab页，echarts图表在没有显示的tab页里

这种使用一般使用$nextTick，dom元素加载完成后再进行图表初始化

  1. this.$nextTick(() => {
  2.           // 初始化echarts图表
  3.           this.initCharts();
  4.         });

发表评论

表情：
评论列表 （有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Echarts之跟着自适应大小

    解决问题：当你变化页面窗口大小的时候，echarts图形必须重新刷新页面才会变正常   echarts本身有一个resize()函数，只需要在窗口改变的时候，也就是wind

    悠悠悠悠/ 0 赞/ 288 阅读