位置: IT常识 - 正文

vue3+Echarts页面加载不渲染显示空白页面的解决(vue-echarts)

编辑:rootadmin
这篇文章主要介绍了vue3+Echarts页面加载不渲染显示空白页面的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教 目录

推荐整理分享vue3+Echarts页面加载不渲染显示空白页面的解决(vue-echarts),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 echarts,echarts-vue,vue3 echarts,vue3 echarts,vuejs echarts,vue echart图表,vue echarts setoption,vue3 echarts,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

解决这个问题的方法vue3+Echarts页面加载不渲染显示空白页面的解决(vue-echarts)

在生命周期里面使用 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"></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" ></div>

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

本文链接地址:https://www.jiuchutong.com/zhishi/304056.html 转载请保留说明!

上一篇:如何查看 Python 全部内置变量和内置函数?(如何查看python模块的依赖包)

下一篇:phpcms怎么做手机站(phpcms怎么样)

  • 红字冲回账务处理
  • 购买性支出和转移性支出财政职能发挥方面有何不同
  • 固定收益凭证是固定的吗
  • 预付账款怎么处理
  • 快消品行业成本结转方法
  • 捐赠支出税前扣除政策
  • 印花税账务处理
  • 当期未开票过收入,以后开票怎么做会计分录
  • 支票付款提示
  • 2021年2月适合公司开业的日子
  • 增值税申报税额填错了怎么进行填
  • 补交企业所得税怎么填申报表
  • 企业租车费可以抵扣吗
  • 工程公司安装中央空调能按混合销售计算增值税么?
  • 进项和销项不符的税务处理
  • 免抵税额为什么不能抵下期
  • 开票的时候如何把价格分散开
  • 可转债转换为股权投资的企业所得税处理
  • 企业会计准则固定资产解释
  • 删除所有没有销售业绩的员工记录
  • 银行抵押贷款结清后需要解押吗
  • 化妆品的消费税率多少
  • linux安装常用命令
  • 专票 普票
  • win7如何调出浏览器
  • 中秋福利发放现金怎么做表
  • 委托境外研发费用怎么扣除
  • 企业所得税纳税调整事项有哪些
  • 错账的种类
  • 敬老院利润分析
  • linux双ip路由设置方法
  • 下脚料属于什么科目
  • 同一控制下企业合并和非同一控制下企业合并的区别
  • yolo 官网
  • php全局变量和局部变量
  • vue3.0路由配置
  • 帝国cms功能
  • 银行存款手工明细分类账
  • 赔付支出计算公式
  • 判断文件是否存在,存在则删除
  • 长期股权投资核算的成本法与权益法的主要差别有哪些
  • 织梦网站怎么添加关键词
  • 商业企业会计如何记账
  • 企业购买黄金可以避税
  • 工资包含福利费吗
  • 发票替票该怎么做账
  • 个人独资企业是不是个体工商户
  • sql server2012使用方法
  • 个体工商户营业执照注销流程
  • 其他综合收益会影响未分配利润吗
  • 跌价准备如何入库
  • 收到投资款证明怎么做账
  • 衍生工具属于什么科目
  • 分期付款购车需要什么
  • 设置mysql数据库字符集的语句
  • mysql通过find_in_set()函数实现where in()顺序排序
  • CentOS 7.2下MySQL的安装与相关配置
  • winxp/win2000/win2003
  • xp系统1
  • 文件在移动或复制过程中权限的变化
  • win7系统解决数字签名问题
  • windows8.1玩穿越火线
  • win10怎么设置扩展屏
  • 两台没联网的电脑怎么创建局域网
  • nodejs可以直接操作数据库
  • 怎么检测端口通不通
  • javascript:openattachment
  • 用来检测程序小错误的测试方法
  • 安卓apk混淆工具
  • 批处理系统的进程调度算法
  • jquery 图片
  • node.js权威指南
  • 火狐firefox浏览器官网
  • 如何用python编写一个程序
  • android设置音量
  • 发票 报销期限
  • 进口肉的税率是多少
  • 购货方已抵扣的发票购货方怎么申请红冲
  • 关于加强税务稽查工作的思考
  • 山西税务12366
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设