vue3+Echarts页面加载不渲染显示空白页面的解决

目录
  • vue3 Echarts页面加载不渲染显示空白页面
    • 个人认为造成这个问题的原因
    • 解决这个问题的方法
  • vue Echarts白屏或等一会才出现
    • 原因
    • 解决方法

vue3 Echarts页面加载不渲染显示空白页面

在父组件获取到数据后传递给子组件并没有及时的更新渲染图表。

在本地开发环境是没有一点问题,但发布到测试环境上每次页面加载都不渲染,点击浏览器刷新按钮后才会去渲染图表。

个人认为造成这个问题的原因

页面加载子组件dom元素此时还没有加载完成,所以看到的就是空白,只有刷新一下才可以。

解决这个问题的方法

在生命周期里面使用 nextTick()待dom加载完成之后再去渲染图表```

具体实现代码:

父组件:

获取到数据后通过props 传递给子组件

```javascript
 <!--入驻统计折线图-->
  <hostLine ref="settled" :settledData="settledData">   </hostLine>
  // 获取入驻统计
   async getSettledData() {
        const result = await getProjectSettled();
        // 如果后台返回的数据是空 前端就渲染一个空表出来 必须等获取到数据以后在渲染 Echarts
        if (result.success) {
          if (result.data.companyCount.length === 0 && result.data.stationCount.length === 0) {
            Object.assign(data.settledData);
          } else {
            Object.assign(data.settledData, result.data);
          }
          update.value = new Date().getTime();
        }
      },

子组件:

接收父组件传递的数据并进行 watch 监听,在生命周期onMounted里面使用 nextTick进行渲染图表就行了。

<template>
  <div class="line-overview">
    <div class="host-line">
      <div class="host-line-title">入驻统计</div>
      <div id="hostLine" style="width: 100%; height: 360px"></div>
    </div>
  </div>
</template>
<script lang="ts">
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent, GridComponent, } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { UniversalTransition } from 'echarts/features';
import { defineComponent, inject, watch, onMounted, onUnmounted, ref, shallowRef, nextTick  } from "vue";
echarts.use([
  TooltipComponent,
  LegendComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
export default defineComponent({
  props: ["settledData"],
  setup(props) {
    const update = inject("update");
    const LineChart = shallowRef();
    const drawChart = () => {
      const cahrtData = props.settledData;
      LineChart.value = echarts.init(document.getElementById("hostLine") as HTMLElement);
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ['企业数量', '工位数量',]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: cahrtData?.date.reverse()
        },
        // Y标尺固定
        yAxis: {
            type: "value",
            scale: true,
            // // boundaryGap: [0.2, 0.2],
            // // 动态设置Y轴的刻度值 只取整数
            min: (value:Record<string,number>) => {
              return Math.floor(value.min / 100) * 100;
            },
            max: (value:Record<string,number>) => {
              return Math.ceil(value.max / 100) * 100;
            },
        },
        series: [
          {
            name: "企业数量",
            type: "line",
            stack: "Total",
            data: cahrtData?.companyCount,
          },
          {
            name: "工位数量",
            type: "line",
            stack: "Total",
            data: cahrtData?.stationCount,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      LineChart.value.setOption(option);
      window.addEventListener("resize", () => {
        LineChart.value.resize();
      });
    };
    onMounted(() => {
      watch([update], () => {
        nextTick(()=>{
          drawChart();
        })
      }, {
        deep: true
      })
    });
    onUnmounted(() => {
      LineChart.value.dispose();
    });
  },
});
</script>

vue Echarts白屏或等一会才出现

原因

由于是异步加载数据,setOption的时候div的宽高还是0,导致canvas渲染宽高也是0。

解决方法

加上默认的width和height

<div class="echarts-vue" style="width:500px; height:500px" ></div>

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

(0)

相关推荐

  • vue中Echarts使用动态数据的两种实现方式

    目录 Echarts使用动态数据的两种方式 1.通过computed 2.在data中定义option vue Echarts几种常用图表动态数据切换 1.柱状图 2.平滑折线面积图 3.折线图堆叠 4.饼状图 Echarts使用动态数据的两种方式 在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式. 1.通过computed computed: {     options() {       let that

  • Vue 项目中Echarts 5使用方法详解

    目录 前言 创建项目 基本使用 安装 使用方法 柱状图 动态排序柱状图 前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目 先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用 安装 首先安装echarts npm i

  • vue3+ts+echarts实现按需引入和类型界定方式

    目录 vue3+ts+echarts实现按需引入和类型界定 vue3按需引入echarts问题及使用 vue3+ts+echarts实现按需引入和类型界定 一直想系统学习一下echarts,无奈今天在引入上就犯了难,现记录一下我的解决方案 为了减少体积和使用的便利,我想实现一个按需和全局的引入 本来是想在main.ts当中直接import * as echarts from 'echarts',然后把这个echarts挂载在app的实例上,但是以我现有的经验,这可能要涉及到this的问题,vue

  • vue3封装echarts组件最佳形式详解

    目录 思路 目录结构 组件代码 v-charts.vue useCharts.ts type.d.ts options/bar.ts 项目中使用 index.vue /hooks/useStatisDeviceByUserObject.ts 思路 项目中经常用到echarts,不做封装直接拿来使用也行,但不可避免要写很多重复的配置代码,封装稍不注意又会过度封装,丢失了扩展性和可读性.始终没有找到一个好的实践,偶然看到一篇文章,给了灵感.找到了一个目前认为用起来很舒服的封装. 结合项目需求,针对不

  • vue中Echarts图表宽度没占满的问题

    目录 vue Echarts图表宽度没占满 解决方法 vue Echarts图表宽度自适应,亲测有效 实现宽度自适应语句 vue Echarts图表宽度没占满 显示效果: 经过测试,当把宽度写成固定px的时候,就能正确渲染. 解决方法 1.宽高写成固定px,针对宽度不需要自适应的大屏. 2.当宽度需要自适应,父元素需要设置宽高,可以使用$nextTick 当元素宽度发生改变,只需要等待DOM渲染完成在渲染图表,这样就不会出现问题了. 相似案例: 当点击按钮使用v-if进行图表切换,同样会使出现宽

  • vue3中echarts的tooltip组件不显示问题及解决

    目录 vue3 echarts的tooltip组件不显示 解决办法 Echarts|tooltip提示框组件参数 vue3 echarts的tooltip组件不显示 data() { return { chartInstance: '' } }, mounted() { if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart) this.chartInstance.setOption(option)

  • vue3+Echarts页面加载不渲染显示空白页面的解决

    目录 vue3 Echarts页面加载不渲染显示空白页面 个人认为造成这个问题的原因 解决这个问题的方法 vue Echarts白屏或等一会才出现 原因 解决方法 vue3 Echarts页面加载不渲染显示空白页面 在父组件获取到数据后传递给子组件并没有及时的更新渲染图表. 在本地开发环境是没有一点问题,但发布到测试环境上每次页面加载都不渲染,点击浏览器刷新按钮后才会去渲染图表. 个人认为造成这个问题的原因 页面加载子组件dom元素此时还没有加载完成,所以看到的就是空白,只有刷新一下才可以. 解

  • vue.js页面加载执行created,mounted的先后顺序说明

    created页面加载未渲染html之前执行. mounted渲染html后再执行. 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以. 补充知识:关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考 学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图,重点在于数据,拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上. 我们也都知道在Vue父子组件可以通过Props实现父组件

  • ajax请求+vue.js渲染+页面加载的示例

    1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script> <!--标准mui.css--> <link href="<c:url value=" rel="external nofollo

  • Qt实现边加载数据边显示页面的示例代码

    目录 1.定义显示定时器 1:定义定时器 2:定时器调用 3:定时器加载数据 2.线程加载数据 3.实时呈现加载进度 做过C++开发的人们都知道,无论是MFC框架还是QT框架,实现加载数据的等待效果都是很麻烦的,不像WEB端轻轻松松一句代码就搞定了.而我们这些做C++的,最常用的方法就是开线程了. 刚开始,我也是采用的开线程的方式,但是,想象总是与事实相悖的. 假设页面展示的数据比较多,导致加载页面时间较长,用户体验度很差,点击了触发按钮之后很长时间才会有响应,总让人误会程序死机了,但真正的原因

  • 网页加载时页面显示进度条加载完成之后显示网页内容

    现在网上有很多网页加载进度条 ,但大多都是时间固定的. 下面的当查询大量数据时,网页加载较慢,在网页加载时,显示进度条,当网页加载完成时,进度条消失,显示网页已经加载完成的内容. 复制代码 代码如下: <html> <script language=VBScript> Dim Bar, SP Bar = 0 SP = 100 Function Window_onLoad() Bar = 95 SP = 10 End Function Function Count() if Bar

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

    vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e

  • 在页面加载之后执行JavaScript

    我们都知道,页面加载是有顺序的.让我们先来理一下页面的展示过程: 当你输入url并按下回车时 首先从本地查找域名,有的话直接用hosts文件里的ip地址,否则查询DNS,得到ip地址 建立TCP连接——进行“三次握手” 客户端发送http请求 服务端处理,并返回结果给客户端 关闭TCP连接——需要“四次挥手” 浏览器收到结果,开始解析资源(JS.CSS.HTML),解析HTML生成的dom树,和同时解析css生成的cssom树结合生成渲染树 根据渲染树渲染页面 当然,再详细的比如:如何解析生成D

  • jQuery基于ajax实现页面加载后检查用户登录状态的方法

    本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然

  • js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

    本文实例讲述了js实现的页面加载完毕之前loading提示效果.分享给大家供大家参考,具体如下: 一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop =

随机推荐