位置: IT常识 - 正文

解决echarts获取数据不渲染的问题(echarts获取不到宽和高)

编辑:rootadmin
解决echarts获取数据不渲染的问题 写在前面

推荐整理分享解决echarts获取数据不渲染的问题(echarts获取不到宽和高),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts获取option并修改,echarts获取option,echarts获取option,echarts获取不到宽和高,echart获取当前区域的数据,echart获取当前区域的数据,echart获取当前区域的数据,echarts获取option,内容如对您有帮助,希望把文章链接给更多的朋友!

    本菜鸟第一次接到echarts的需求,就搞了整整一天,需求是这样的:①单线图表,只有一个系列。②多线图表,根据返回的数据系列生成不同的折现,形成一个堆叠折线图。③选单天的话,那么就以24小时为横坐标;如果是选择了一段时间,那么这个时间范围就以天为单位作为横坐标。

    于是乎,请求接口数据花了五分钟,调试问题七小时属于是,这个过程中,有异步的问题、监听外部切换时间范围的问题、刷新数据时要先初始化原来的数据的问题,数据对应的问题等等。

    好记性不如烂笔头,在此简单记录一下吧。

踩坑与解决 一.首先是异步问题 

问题:

        接口请求回来了数据,并且格式也已经全部处理成和死数据一样了,然而,死数据可以显示,接口请求回来的数据却一直不能挂到图表上去。最后才发现,每次都是先渲染了图表,我的数据才回来。

什么是异步请求和什么是同步请求?

解决echarts获取数据不渲染的问题(echarts获取不到宽和高)

1. 同步请求:客户端向服务端发送请求,服务端响应以后客户端才渲染页面 2. 异步请求:客户端向服务端发送请求,客户端不等服务端响应就行行页面渲染,一般做页面的局部刷新。

       造成上面原因就是我的页面向服务端发送请求,页面不等服务端响应就已经渲染图表,尽管后面数据请求成功但此时页面已经渲染成功,页面此时只知道他所渲染图表时数据为空,所以不会显示数据。

        最终用一个很不正规的方法解决了问题:

mounted () { setTimeout(() => { this.init() }, 500) }, 二.其次是外部时间范围切换,数据不会自动刷新的问题

问题:

        由于时间选择器写在父组件里面,图表放在子组件里面,我用 searchParams当props传进来,但是发现只有第一次打开才会渲染,后面再在外面切换时间范围,子组件的图表没变化,方法也没调用。

解决:

        最终用watch解决,给图表的div加一个id,然后每次切换时间,就刷新图表。

        注意:每次刷新都要把列表清空,不然会越push列表越长,图表越刷新越密集。

watch: { searchParams: { deep: true, immediate: true, handler () { this.dataList = [] this._getTrend() setTimeout(() => { this.init(document.getElementById('tendency_')) }, 500) } } },

子组件中:

props: { searchParams: Object,}

父组件中:

<tendency v-if="activeName=='vnode'" :search-params="searchParams"></tendency> searchParams: { startDate: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'), endDate: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') },

 小白狂踩坑系列

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

上一篇:ghoststarttrayapp.exe是什么进程 有什么作用 ghoststarttrayapp进程查询

下一篇:lorena.exe是什么进程 有什么用 lorena进程查询(rnbrcache.exe是什么意思)

  • 华为matepadpro怎么开120hz(华为matepadpro怎么读)

    华为matepadpro怎么开120hz(华为matepadpro怎么读)

  • WPS怎么删除某一页(wps怎么删除某一页)

    WPS怎么删除某一页(wps怎么删除某一页)

  • 快充的标志(华为超级快充的标志)

    快充的标志(华为超级快充的标志)

  • 红米5plus拆机(红米5plus拆机视频带框)

    红米5plus拆机(红米5plus拆机视频带框)

  • 美团拉新用户怎么操作(美团拉新怎么拉)

    美团拉新用户怎么操作(美团拉新怎么拉)

  • 微信注销后聊天记录还在吗(微信重新登录后聊天记录没了)

    微信注销后聊天记录还在吗(微信重新登录后聊天记录没了)

  • 抖音的pid是什么(抖音店铺pid是什么意思)

    抖音的pid是什么(抖音店铺pid是什么意思)

  • 电脑怎么制作文件夹(电脑怎么制作文字图片教程)

    电脑怎么制作文件夹(电脑怎么制作文字图片教程)

  • 淘宝怎么看删除的订单(淘宝怎么看删除的订单记录)

    淘宝怎么看删除的订单(淘宝怎么看删除的订单记录)

  • b站一个账号可以几个人用(b站一个账号可以登两个手机吗)

    b站一个账号可以几个人用(b站一个账号可以登两个手机吗)

  • vivo手机浮屏怎么设置(vivo手机浮屏怎么弄出来)

    vivo手机浮屏怎么设置(vivo手机浮屏怎么弄出来)

  • 苹果xled灯怎么打开(苹果xled灯怎么关闭)

    苹果xled灯怎么打开(苹果xled灯怎么关闭)

  • 如何让歌词在苹果手机桌面(如何让歌词出现在苹果手机上)

    如何让歌词在苹果手机桌面(如何让歌词出现在苹果手机上)

  • 手机怎么一键还原(手机怎么一键还原试卷)

    手机怎么一键还原(手机怎么一键还原试卷)

  • 如何将表格设置为三线表格(如何将表格设置成在线编辑)

    如何将表格设置为三线表格(如何将表格设置成在线编辑)

  • 怎么找回抖音原账号号(怎么找回抖音原账号号,绑定号用不了)

    怎么找回抖音原账号号(怎么找回抖音原账号号,绑定号用不了)

  • 更新miui11会清除数据吗(miui更新会不会占内存)

    更新miui11会清除数据吗(miui更新会不会占内存)

  • 华为nfc关闭自动启动(华为nfc怎么关掉自动开启)

    华为nfc关闭自动启动(华为nfc怎么关掉自动开启)

  • 苹果十一有指纹解锁吗(苹果十一有指纹吗怎么设置)

    苹果十一有指纹解锁吗(苹果十一有指纹吗怎么设置)

  • 运行身份窗口总是弹出(运行身份窗口总是弹出打不开软件)

    运行身份窗口总是弹出(运行身份窗口总是弹出打不开软件)

  • 手机qq如何查看谁特别关心了我(手机qq如何查看密码是多少)

    手机qq如何查看谁特别关心了我(手机qq如何查看密码是多少)

  • vivo手机测距仪在哪里(华为自带的ar测距仪)

    vivo手机测距仪在哪里(华为自带的ar测距仪)

  • 快速排序原理(快速排序原理和思想)

    快速排序原理(快速排序原理和思想)

  • sar命令  统计系统运行状态(sar参数设置4个数)

    sar命令 统计系统运行状态(sar参数设置4个数)

  • 餐饮发票公司怎么抵税
  • 年检更换需要什么材料
  • 预缴企业所得税分录
  • 附加税减半征收政策从什么时候开始
  • 一般纳税人工会经费可以零申报吗
  • 增值税小规模纳税人起征点
  • 注册公司认缴资本不缴可以吗
  • 一般纳税人财务报表月报还是季报
  • 契税晚交有什么影响
  • 递延所得税如何申报
  • 企业给员工购买社保的规定
  • 屋面维修按定额预算明细表
  • 普通股股本属于什么科目
  • 押金满一年才能退
  • 养牛场增值税的税率是多?
  • 营业执照号码含义
  • 购入生产使用的材料会计分录
  • 出口专用发票可抵扣吗
  • 土地增值税清算时间
  • 为什么贷款利息变高了
  • 零星工程实施流程
  • 4s店帮买保险后会哪些资料要给我的
  • 1697510710
  • 固定资产报废的净损失计入哪里
  • 微信转账的手续费规则
  • 多发工资未退回会怎么样
  • 硬盘安装系统方法
  • 暂存款账务处理
  • qbdagent2002.exe - qbdagent2002是什么进程 有什么用
  • 怎么用老毛桃u盘装win7系统 老毛桃u盘装win7系统教程图解
  • 分公司与总公司的关系
  • tepac接口
  • 日本东京秋叶原攻略
  • 准备动作怎么做
  • 税控系统的维护包括哪些内容
  • php判断是否连接数据库
  • PHP模拟http请求的方法详解
  • 营改增销售服务范围
  • 小企业准则季度汇总
  • Python变量中forain
  • 建安企业确认收入的依据
  • mysql 子查询
  • 系统带我玩隐形守护者 小说
  • 生产成本和营业成本的区别和联系
  • 做账的好处
  • 购买固定资产的运费计入什么科目
  • 固定资产损失税前扣除备查资料有哪些
  • 出口运保费是什么费用
  • 纳税申报财务报表怎么撤销
  • 银行结息需要开发票吗
  • 付外汇代缴税费
  • 制造费用按什么设置明细
  • mysql osc
  • mysql错误代码1418
  • Win10 Build 17035自制64位中国版十合一ISO镜像下载地址
  • xp电脑显示屏显示不全
  • window10打补丁
  • 在windows中创建用户的步骤
  • wget下载命令
  • windows7system登录
  • windows xp能装微信吗
  • 正版win10怎么用
  • ubuntu14.04.6安装教程
  • win7资源管理器不停的崩溃重启
  • Windows 7+Fedora 16启动项问题讲解
  • opengl实现光照效果
  • onclick和onclientclick
  • node.js http服务器
  • 检测输入条件的各种组合
  • 使用jquery实现的项目
  • Do All in Cmd Shell一切在命令行下完成第1/6页
  • 单机模式在哪
  • shell脚本用法
  • psi python
  • 政治轮训的效果
  • 北京 国税局
  • ukey证书初始密码
  • 网上交车辆购置税怎么交
  • 税控系统减免税报表里
  • 江西省国家税务局李德平
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设