vue 使用Echarts 图表自适应问题

<template>
  <div :class="className" :style="{ height: height, width: width }" ref="Echart" id="myChart" />
</template>

 methods: {
   init() {
      const self = this; //因为箭头函数会改变this指向，指向windows。所以先把this保存
      setTimeout(() => {
        window.addEventListener("resize", function () {
          self.chart = self.$echarts.init(self.$refs.Echart);
          self.chart.resize();
        });
      }, 10);
    },
 }

注意：这里$echarts，是在全局配置了echart
1.vue 项目中 引用echarts

cnpm install echarts -S

2.安装成功后 在main.js中全局配置echarts

就不需要再每个页面都引入echart：

参考链接：echarts自适应

今天的文章vue 使用Echarts 图表自适应问题分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。