vue+echarts数据可视化大屏开发--图表自适应自动伸缩(react中同理)

本文链接：https://blog.youkuaiyun.com/qq_36710522/article/details/102784513

这篇博客主要介绍了如何在vue项目中使用echarts进行数据可视化大屏开发，并且实现了图表的自适应和自动伸缩功能。内容包括关键代码展示，特别指出在vue框架下无需考虑低版本浏览器的兼容问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现上很简单，下面进入正题 (直接上代码)：

<script>
    export default {
        data() {
            return {	
				resizefun:null
			}
        },
        mounted() {
            this.echartLoad();
            //实现自适应
           	this.resizefun = ()=>{
                this.$echarts.init(document.getElementById('myChart')).resize(); //这里的myChart就是要自适应的图表容器Id
            }
            window.addEventListener('resize',this.resizefun)
        },
        //移除事件监听，避免内存泄漏
        beforeDestroy() {
    		window.removeEventListener('resize', this.resizefun)
    		this.resizefun = null
  		},
        methods: {
            echartLoad() {
                // 初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                myChart.setOption({
                    ...
                });
            }
        }
    }
</script>

*值得注意的是：
IE8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是vue框架下不用考虑这些，因为vue 本身也不支持ie8以下的~

//兼容写法
 //为了移除事件监听，才封装了resizefun方法，不是必须
 window.addEventListener('resize',this.resizefun)
 //如果在声明周期结束时不需要移除事件监听，上述代码也可以为：
 window.addEventListener('resize',()=>{
         this.$echarts.init(document.getElementById('myChart')).resize()
 })
 兼容性写法一：
 //注意使用es6的箭头函数，不然this的指向会改变
 window.onresize = () => {
        this.$echarts.init(document.getElementById('myChart')).resize();
 }
 兼容性写法二：
 let myChart = this.$echarts.init(document.getElementById('myChart'))
  window.onresize = function(){
        myChart .resize();
 }