vue Echarts自适应浏览器resize报错：Cannot read property 'resize' of undefined

最新推荐文章于 2025-08-13 16:21:45 发布
原创 最新推荐文章于 2025-08-13 16:21:45 发布 · 1w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Echarts自适应浏览器resize报错：Cannot read property 'resize' of undefined

1.问题

今天在做Echarts自适应浏览器时，发现拖动窗口进行缩放时，会出现一个问题：Cannot read property ‘resize’ of undefined。

Echarts插件绘制的柱状图正常情况下页面截图：
在这里插入图片描述
但是当我拖动浏览器窗口的边框进行缩放时会报错：
在这里插入图片描述
相关代码如下：

    mounted() {
   
   
      //在mounted生命周期函数中实例化echarts对象
      this.drawHistogarm();
    },
    methods:{
   
   
      drawHistogarm(){
   
   
        //初始化echarts实例
        let histogram = this.$echarts.init(do
最低0.47元/天 解锁文章

200万优质内容无限畅学
关于vue3 build报错：TypeError: Cannot read property ‘tapPromise’ of undefined解决方案
cabinx的博客
09-03 2512
关于vue3 build报错：TypeError: Cannot read property ‘tapPromise’ of undefined解决方案 问题描述: vue3 build后出现以下报错： TypeError: Cannot read property 'tapPromise' of undefined 解决方案: 上述报错的原因是压缩插件compression-webpack-plugin版本太高导致（一般情况下不要超过6.x，但是5.x版本及以下才能生成正确的压缩文件
vue2/3 - echarts报错TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)详细解决方案！
高级前端工程师
07-11 2632
vue2，vue3，nuxt，echarts，图表，日历图表，柱状图，饼图，解决echarts中TypeError: Cannot，还是报错，不行怎么办，TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)，vue echarts 报错queryComponents不存在，echart报错，解决echart，在使用案例的echart的日历图表的时候，报错，在使用echarts将关系图中的结点用饼图替换的代码编程过
Echarts在resize时报错
weixin_55666792的博客
03-04 495
Echarts在resize时报错
Echarts自适应浏览器时Cannot read property ‘resize’ of undefined
zxs123csdn的博客
01-19 1467
Echarts自适应浏览器时，发现拖动窗口进行缩放时，会出现一个问题：Cannot read property ‘resize’ of undefined。 window.EventListener('resize',function(){ myChart.resize() // 报错 if(myChart){ myChart.resize() // 不报错 } }) 就正常了 ...
vue3使用Echarts柱状图滚动条报错
m0_72953083的博客
08-13 403
在vue3中创建柱状图时,option添加滚动条datazoom,在页面滑动,滑动无效且产生报错。好像是vue3中ref定义的响应式问题,采用shallowRef定义myChart变量可以解决.
echarts dataZoom 组件报Cannot read properties of undefined (reading ‘type‘)
Sherry Tian的博客
02-06 1814
使用dataZoom组件，拖拽时报Cannot read properties of undefined (reading 'type')错误，且拖拽不生效问题解决方案。
vue中使用echarts，resize无效的3种情况分析及解决办法
茉莉蜜茶~~~
07-19 1万+
vue echarts resize不生效
关于Vue中使用eCharts响应容器大小的变化，出现Cannot read properties of undefined (reading ‘resize‘)的问题
qq_43210082的博客
04-08 4346
问题重现 在Vue2中学习使用eCharts时遇到了如下问题： 使用eCharts提供的resize()方法，监听图表容器的大小并改变图表大小。 我在组件中这样写： export default { name: "chart", data() { return { chart: null, }; }, methods: { initChart() { this.chart = echarts.init(document.getElementBy
vue使用echarts中resize()自适应屏幕宽度报错：Cannot read property ‘resize‘ of undefined
agua001的博客
07-29 4120
1、在echarts 使用resize()Api 屏幕变化的时候报：Uncaught TypeError: Cannot read property ‘resize’ of undefined 2、看了大佬的文章：https://blog.csdn.net/HH18700418030/article/details/96281813虽然没使用到他说的方法，但是使用了评论者的方法，可行 3、原先的的代码: mounted() { this.$nextTick(() => { this.my
Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx
01-21
Vue打包Cannot read property 'tapPromise' of undefined报错处理 Vue.js是一款流行的前端框架，用于构建用户界面和单页应用程序。然而，在使用Vue.js时，我们可能会遇到一些报错信息，例如Cannot read property '...
vue-echarts出现Uncaught TypeError: Cannot read property ‘dispatchAction‘ of undefined
wm9028的专栏
08-29 657
# vue-echarts出现Uncaught TypeError: Cannot read property 'dispatchAction' of undefined 在vue项目中，使用自动展示的功能，能运行，但是一直报错*Uncaught TypeError: Cannot read property 'dispatchAction' of undefined*。虽然可以运行，一直打印错误看着挺闹心的。试了好久找了解决办法。 # 报错代码实现部分摘录 播放代码实现： ```javascript
vue使用echarts自适应报错 Uncaught TypeError: Cannot read property ‘resize‘ of undefined
CMDN123456的博客
09-26 381
vue使用echarts自适应报错 Uncaught TypeError: Cannot read property 'resize' of undefined
【vue3中使用echarts resize报错】ECharts.resize() ERROR! Cannot read propert
无言非影的博客
10-27 1802
vue3项目，使用 echarts当窗口发生变动的时候，会触发echarts实例的resize方法，这个时候浏览器会报错。
解决Echarts图标resize函数报错
qq_37622750的博客
06-09 3051
解决Echarts图标resize函数报错问题 需求：当页面大小变化时，图表进行重新绘制，响应页面尺寸。 修改之前： // 使用刚指定的配置项和数据显示图表。 this.pieChart.setOption(option); window.onresize = () => { // 监听页面变化事件 this.pieChart.resize(); // 调用echart的重绘方法 }; 效果：可以实现效果，但是控制台会报错，_this.pieC
echarts图表自适应，Cannot read properties of null(reading ‘resize‘)
ZMJ_QQ的博客
11-25 2374
在父组件中引入了多个子组件，每一个子组件中是一个echarts图表，在子组件的方法中 setChartOption(){ let _this=this; this.chart.setOption({ //option....}); window.addEventListener("resize", function () { if (_this.chart) { _this.chart.resize(); } }); } 在进行缩放的时候可能...
Vue报错：Cannot read properties of undefined (reading ‘echarts‘)
SunPeng的博客
07-11 6593
Vue报错：Cannot read properties of undefined (reading ‘echarts‘)，引入中国地图china.js
TypeError:Cannot read properties of undefined (reading‘...‘)
热门推荐
qq_57057576的博客
08-13 10万+
若a为undefined，则会报错，若，a为空，则，a.name为undefined。原因可能是，挂载时，有dom节点，但是数据还未返回。例： a.name a的name属性。不能够读取undefined的属性。
在Vue3中导入Echart飞机航线图的china.js文件，控制台报错TypeError: Cannot read properties of undefined
qq_56937317的博客
09-06 814
解决在Vue3中导入Echart飞机航线图的china.js文件，控制台报错TypeError: Cannot read properties of undefined (reading 'echarts')at china.js:13:22 at china.js:15:3的问题
vue3 echarts resize自适应报错解决
weixin_44133581的博客
06-26 960
不要用data去存储 echarts 实例，可能会报错 undefined ...type...* 使用同一个resize监听事件。
echarts 柱状图 resize 报错TypeError: Cannot read properties of undefined (reading 'type')
最新发布
09-10
在进行 Echarts 柱状图 resize 操作时出现 “TypeError: Cannot read properties of undefined (reading 'type')” 错误，通常是由于 Echarts 实例受到 Vue 响应式处理的影响。以下是具体的解决办法： ### 组合式中使用 markRaw 在组合式 API 里，运用 `markRaw` 标记无需进行响应式处理的对象，防止被 `proxy` 影响。示例代码如下： ```javascript import { markRaw, onMounted, ref } from 'vue'; import * as echarts from 'echarts'; export default { setup() { const chartRef = ref(null); let chart; onMounted(() => { const el = chartRef.value; chart = markRaw(echarts.init(el)); // 避免被 proxy // 柱状图配置项 const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' } ] }; chart.setOption(option); // 模拟 resize 操作 window.addEventListener('resize', () => { chart.resize(); }); }); return { chartRef }; } }; ``` ### 选项式中直接挂在 this 上 在选项式 API 中，不在 `data` 里 `return` Echarts 实例，而是直接将其挂载到 `this` 上。示例代码如下： ```javascript import * as echarts from 'echarts'; export default { data() { return { option: null // 只保留 option，移除 myChart }; }, methods: { initChart() { this.myChart = echarts.init(this.$refs.chartDom); // 直接挂在 this 上 // 柱状图配置项 const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' } ] }; this.myChart.setOption(option); // 模拟 resize 操作 window.addEventListener('resize', () => { this.myChart.resize(); }); } }, mounted() { this.initChart(); } }; ```
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值