位置: 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是什么意思)

  • 海关进口啥意思
  • 发票冲红重开,重开时是按新税率还是旧税率
  • 一般纳税人的增值税税率有哪些
  • 企业进项不足的原因
  • 资产负债表其他应付款包括哪些
  • 小规模印花税是季报还是月报
  • 车船税在备注栏怎么报表
  • 一般纳税人普票怎么做分录
  • 救灾捐赠会计分录
  • 纳税人选择简易办法一经选择
  • 已收款未开票未发货能确认收入吗
  • 开发成本月末如何处理
  • 公户转私户的钱几天能到账
  • 教育费附加减免政策
  • 失控发票进项转出成本不用转出
  • 出租车发票日期可以改吗
  • 可以给农村信用社的存折转账吗
  • 活动费的税率
  • 普通发票费用会计分录
  • 设备安装税率是6%还是9%
  • 财务报表中应收账款包括什么
  • 普票需要缴纳印花税吗
  • 当企业预收款项无需退回
  • 小微企业行业划分标准 工信部
  • windows10命令提示符怎么用
  • 商品进价销售要上税吗
  • 制造费用主要包括哪些内容
  • windows10 怎么样
  • 收到公司投资属于什么会计科目
  • 游戏运营服务是做什么的
  • 会计购入材料入什么科目
  • 坏账损失属于或有事项吗
  • trainer 平替
  • vue实现文件上传和下载
  • stm32cubeIDE开发串口 修改速率
  • ftp port命令
  • 旅游业哪些发票需要交税
  • wordpress整站备份
  • ios14.5ipad
  • 资产负债表和利润表的勾稽关系
  • 结转清理损失会计分录
  • 公司注销税款太多
  • phpcms怎么用
  • 企业所得税季度预缴怎么计算
  • 承兑汇票可以当现金用吗
  • 一般纳税人税率2023
  • 待处理财产损益是什么类科目
  • 个税申报月份错误怎么更改
  • 土地出让合同的法律效力
  • 餐厅打包盒收费标准通知
  • 消费税的计税方式有哪几种?
  • 资本金利润率正常范围
  • 审计 调整分录
  • 财务负责人怎么实名认证
  • 坏账准备的账务处理怎么理解
  • 企业主要的工会是什么
  • 错误凭证如何处理
  • 金蝶凭证做错了已经入账怎么更正
  • sql语句 时间差
  • mysql服务自动停止运行
  • linux运行级别定义在
  • win10重置登录
  • mac os怎么删除用户
  • linux lv扩容
  • windows z
  • win造字软件
  • 如何手动修复模糊图片
  • centos7.0安装网卡驱动
  • Linux上PPTP VPN的一键安装以及设置开机启动的方法
  • 安卓游戏源代码
  • js插件写法
  • python re 查找
  • unity shader可视化编辑
  • unity5用什么语言
  • js运行效率
  • 国家税务总局司长
  • 上海市国家税务局地址
  • 一般纳税人的进项票必须当月认证吗?
  • 辛嵨静志
  • 国税局巡察整改方案
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设