首页 前端知识 ECharts 报错:Initialize failed: invalid dom 的解决思路

ECharts 报错:Initialize failed: invalid dom 的解决思路

2024-04-29 11:04:32 前端知识 前端哥 464 238 我要收藏

在做管理系统的后台时,有个可视化大屏需要用到图表,选择了echarts,但是却发现控制台报错了,好像不影响使用,归根到底还是在渲染图表时,根据id获取到的dom还没有渲染出来,就会出现这个错误。
在这里插入图片描述
解决办法:直接在mounted生命周期上把init图表放到定时器里面去,就成了一个宏任务,这样会在渲染dom之后执行。这样就解决了!(vue的mounted生命周期,dom元素还没有渲染出来)

  setTimeout(() => {
    this.init();
    this.timer = setInterval(this.init, 60 * 1000)
  }, 200)
	
  init(){
	let chartDom = document.getElementById('lineQty');
    var myChart = echarts.init(chartDom, '#101638');
    var option = {
      grid: {
        left: 76,
        top: 6,
        width: 280,
        height: 220
      },
      yAxis: {
        type: 'category',
        data: xData,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      xAxis: {
        type: 'value',
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      textStyle: {
        color: '#fff'
      },
      tooltip: {
        show: true
      },
      series: [
        {
          name: '生产线',
          data: yData,
          type: 'bar',
          lineHeight: 100,
          legendHoverLink: true,
          itemStyle: {
            color: 'rgba(0, 160, 234, 1)',
            borderRadius: [6, 6, 6, 6],
          },
          label: {
            show: true,
            align: 'center',
            verticalAlign: 'middle'
          }
        }
      ]
    };
    option && myChart.setOption(option);
    }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6103.html
标签
评论
发布的文章

qt JSON和字符串相互转换

2024-05-05 12:05:04

nlohmann::json从入门到精通

2024-05-05 12:05:00

Android-第十节JSON讲解

2024-05-05 12:05:35

FastJson 框架详解

2024-05-05 12:05:31

MySql操作JSON

2024-05-05 12:05:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!