Vue+echart 图根据网页自适应resize缩放

Vue+echart 图根据网页自适应resize缩放_第1张图片

const chartBar = null;

data{
    return {chartBar :null}
}

//关键代码

activated() {
   // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
   //  if (this.chartBar) {
       this.chartBar.resize();
   //  }
   
  },

chartBar = echarts.init(document.getElementById("J_chartBarBox2"));
chartBar.setOption(option);
window.addEventListener("resize", this.handlerResize);

methods:{
    // 处理网页滚动缩放
    handlerResize() {
      if (chartBar) {
        chartBar.resize();
      }
    },
}

你可能感兴趣的:(vue.js,echarts,javascript)