Vue2项目中使用ECharts图表并实现自适应效果

Vue2项目中使用ECharts图表并实现自适应效果

安装ECharts使用暂时省略 , 只解决ECharts图表并实现自适应效果.

1.在组件mounted时绑定resize事件 window.addEventListener(‘resize’, this.handleResize)，当窗口大小发生变化时自动调整图表大小

  mounted() {
    // 在组件mounted时绑定resize事件，当窗口大小发生变化时自动调整图表大小
    window.addEventListener('resize', this.handleResize)
    this.initChart() // 初始化图表
    // console.log(this.$el, 8888888)
  },

2. 在组件销毁前解绑resize事件 window.removeEventListener(‘resize’, this.handleResize)

 beforeDestroy() {
    // 在组件销毁前解绑resize事件
    window.removeEventListener('resize', this.handleResize)
  },

3 .在 methods里处理resize事件，调整图表大小

  // 处理resize事件，调整图表大小
    handleResize() {
      if (this.chart) {
        // 调用Echarts实例的resize方法，重新绘制图表
        this.chart.resize()
      }
    },

最后测试调整窗口大小就可以实现图表自适应了！

如果您感觉有用，请点赞 + 收藏 ！