美文网首页
如何让echarts图表自适应

如何让echarts图表自适应

作者: 回不去的那些时光 | 来源:发表于2020-01-21 23:15 被阅读0次

方法一

let chart = echarts.init(this.$refs.refName);
...
window.addEventListener("resize", chart.resize);

方法二

使用resize-detector

  • 1、下载resize-detector库
npm install resize-detector --save
  • 2、引入工具类
import { addListener, removeListener } from "resize-detector"; // 监听图表变化
  • 3、使用工具类
mounted() {
    this.chart = echarts.init(this.$refs.refName);
    addListener(this.$refs.refName, this.resize); //  添加图表监听
},
beforeDestroy() {
    removeListener(this.$refs.refName, this.resize); // 移除监听
    this.chart.dispose(); // 销毁图表实例
    this.chart = null;
},

相关文章

网友评论

      本文标题:如何让echarts图表自适应

      本文链接:https://www.haomeiwen.com/subject/tidyzctx.html