vue弹窗里面使用echarts不显示的问题及解决

 更新时间:2023年01月23日 12:40:57   作者:呱呱•.•  
这篇文章主要介绍了vue弹窗里面使用echarts不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

前言

弹出层中插入echarts图表,没有报错,但是图表加载不出来

此弹出层没有用element 的dialog 对话框,用的自己封装的组件,但是出现的问题是一样的

原因分析

弹出层 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。

弹出层组件会监听 visible 的状态,当状态为 true 时,立刻触发 open 事件,但这个时候 弹出层 的内容还没有渲染。

因为 Vue 组件通过 $emit 触发的事件并不是异步执行的,而是同步执行。

解决方式

一、nextTick

      this.$nextTick(() => {
      //  执行echarts方法
        this.initEcharts()
      })

二、setInterval

 

 setInterval(() => {
        //  执行echarts方法
        this.initEcharts()
      }, 500);

弹出层组件和画图方法:

    <popup :tClick="retreatFromSave" :tBoot="organizationUp" tWidth='1080px'>  
      <div slot="main" class="teamwork-text-nr">
        <div class="line">实景图</div>
            <!-- 图表 -->
            <div id="sCharts" style="height: 500px;"></div>
          </div>
      <div slot="footer" style="text-align: right;padding-right: 30px;">
        <jurisbtn tFloat="none" :tClick="retreatFromSave" tName="关闭" type="primary"></jurisbtn>
      </div>
    </popup>
    //   图表
    initEcharts() {
      const myChart = this.$echarts.init(document.getElementById('sCharts'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总体积',
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value} m³'
            }
          },
          {
            type: 'value',
            name: '使用负荷',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '总体积',
            type: 'bar',
            data: [2.0, 4.9, 5.5, 2.2, 4.6, 6.7, 5.6, 6.2, 3.6, 2.0, 6.4, 3.3],
            itemStyle: {
              normal: {
                color: '#d0e17d'
              }
            }
          },
          {
            name: '使用负荷',
            type: 'line',
            yAxisIndex: 1,
            data: [100, 22, 33, 45, 63, 80, 20, 23, 23, 65, 12, 6.2],
            itemStyle: {
              normal: {
                color: '#898989'
              }
            }
          }
        ]
      }
      myChart.setOption(option);
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现点击按钮倒计时

    vue实现点击按钮倒计时

    这篇文章主要为大家详细介绍了vue实现点击按钮倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue中嵌入可浮动的第三方网页窗口的示例详解

    Vue中嵌入可浮动的第三方网页窗口的示例详解

    本文介绍了在Vue2项目中嵌入可浮动的第三方网页窗口的实现方法,包括使用iframe、div+script和dialog元素等方式,并提供了一个实战Demo,展示了如何在Vue组件中动态加载和控制浮窗的显示,需要的朋友可以参考下
    2025-02-02
  • Vue3中实现歌词滚动显示效果

    Vue3中实现歌词滚动显示效果

    本文分享如何在Vue 3中实现一个简单的歌词滚动效果,我将从歌词数据的处理开始,一步步介绍布局的搭建和事件的实现,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • Vue.directive 实现元素scroll逻辑复用

    Vue.directive 实现元素scroll逻辑复用

    这篇文章主要介绍了Vue.directive 实现元素scroll逻辑复用功能,文中给大家提到元素实现滚动的条件有两个,具体内容详情大家参考下本文
    2019-11-11
  • 关于怎么在vue项目里写react详情

    关于怎么在vue项目里写react详情

    本篇文章是在vue项目里写tsx的一篇介绍。其实vue里面写jsx也挺有意思的,接下来小编九给大家详细介绍吧,感兴趣的小伙伴请参考下面的文章内容
    2021-09-09
  • vue2.* element tabs tab-pane 动态加载组件操作

    vue2.* element tabs tab-pane 动态加载组件操作

    这篇文章主要介绍了vue2.* element tabs tab-pane 动态加载组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的 渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解,感兴趣的朋友一起看看吧
    2016-11-11
  • Vue + OpenLayers 快速入门学习教程

    Vue + OpenLayers 快速入门学习教程

    大家都知道使用 Openlayers可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的,本文记录下 Vue 使用 OpenLayers 入门,使用 OpenLayers 创建地图组件的相关知识,需要的朋友一起学习下吧
    2021-09-09
  • Vue 数据绑定的原理分析

    Vue 数据绑定的原理分析

    这篇文章主要介绍了Vue 数据绑定的原理,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Vite打包优化之缩小打包体积实现详解

    Vite打包优化之缩小打包体积实现详解

    这篇文章主要为大家介绍了使用Vite缩小打包体积如何实现的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论