【报错】nginx部署项目后Echarts折线图无法展示

文章目录

  • 报错
  • 分析
  • 解决
  • 小Tips

报错

vue3+TS+Arco项目打包之后nginx部署之后Echarts折线图无法正常展示,报错信息如下

【报错】nginx部署项目后Echarts折线图无法展示_第1张图片

分析

原因是在定义div时,使用了vue2中的$refs语法,渲染dom进行绘制echarts时,拿到dom元素之后无法进行 init 初始化,因此 Cannot read properties of undefined(reading 'setOption')报错。

【报错】nginx部署项目后Echarts折线图无法展示_第2张图片
【报错】nginx部署项目后Echarts折线图无法展示_第3张图片

解决

在取dom元素进行渲染时,使用原生的 document.getElwmwntById进行拿取 dom 元素,之后就可正常对echart 进行 init 初始化

【报错】nginx部署项目后Echarts折线图无法展示_第4张图片

【报错】nginx部署项目后Echarts折线图无法展示_第5张图片

小Tips

输入 cmd 进入命令行窗口

【报错】nginx部署项目后Echarts折线图无法展示_第6张图片
【报错】nginx部署项目后Echarts折线图无法展示_第7张图片

你可能感兴趣的:(浏览器,数据可视化开发,echarts,前端,javascript)