位置: 编程技术 - 正文

vue在使用ECharts时的异步更新和数据加载详解(vue中的echarts)

编辑:rootadmin

推荐整理分享vue在使用ECharts时的异步更新和数据加载详解(vue中的echarts),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue echarts,vue echarts,vue在使用组件前判断组件是否存在,vuejs echarts,vue中echarts怎么用,vue中的echarts,vue中echarts怎么用,vue中用echarts,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章: 下面话不多说了,来一起看看详细的介绍吧。

使用方法

使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面)

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器

初始化一个 echarts 实例并通过 setOption 方法生成一个你想要的图表类型,

首先先把,echarts里setOption的option,单独领出来,初始化放在data里

vue在使用ECharts时的异步更新和数据加载详解(vue中的echarts)

下面是在methods里初始化的一个方法,

然后在mounted里调用这个方法

接下来就就是数据异步加载与更新了。

以下的代码是本地的json类型,异步加载数据时只要填入数据,然后在series里根据名字对应到相应的系列就可以了。

但是,echarts的数据是直接merge的,所以当出现多条折线时,如果当天的数据为0,或者后台传过来的数据为空的时候,setOption的值根本就没有更新,而是直接merge了,所以这个问题就头大了。

对于这个问题的解决方法是

用getOption取到已经存在的option, 然后用this.lineChartOrder.setOption.clear() ,清空option,最后this.lineChartOrder.setOption(option, false, false) 。

这样就可以清掉了。

以下是官网异步数据加载与更新的方法,会相对简单些。

只需要将数据填充进入就可以了。

总结

标签: vue中的echarts

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

上一篇:解析Vue2 dist 目录下各个文件的区别(vue解析md)

下一篇:vue.js开发实现全局调用的MessageBox组件实例代码(vue.js 开发工具)

  • 销售货物的运费计入成本吗
  • 我公司租了个人的房子如何入账
  • 包工包料怎么开税票合适
  • 审计报告报备
  • 上季度资产总额填错了怎么办
  • 预付冲应付会计分录摘要
  • 产品在海关发生质量问题
  • 成本核算会计科目包括
  • 研发样机是什么
  • 注册资本印花税计入哪个科目
  • 非独立核算的分公司是法人主体吗
  • 非住宅过户税费标准最新
  • 增值税进项抵扣期限及认证期限
  • 年度企业所得税申报时间
  • 待摊费用和长期待摊费用的区别
  • 税控设备抵减如何填写报表
  • 从租计征房产税租金收入含税吗
  • 一次性劳务费需要交税吗
  • 应付股利会计分录例题
  • 经营所得的含义
  • wd discovery怎么安装
  • 个人银行卡作为公司备用金影响
  • PHP:mb_encoding_aliases()的用法_mbstring函数
  • 实收资本一定要打进公司对公户吗
  • php7.3安装
  • 蒂内河畔圣艾蒂安小镇,法国阿尔卑斯省 (© CAVALIER Michel/hemis.fr/Alamy Stock Photo)
  • 企业资产损失所得税税前扣除
  • 未认证用户是什么意思
  • php连接数据库的基本步骤是什么
  • 演员片酬要分给经纪公司吗
  • transformer add norm
  • js中move
  • 应收账款提了坏账后收回
  • 小型微利企业的认定标准
  • 退还多缴纳税款
  • 事业收入如何确认
  • 销售货物免税
  • 土地给人家种了几十年还能要回来吗
  • 企业印花税怎么入账
  • 接待客户的住宿费计入什么科目
  • 厂区地面硬化属于土建还是市政
  • 资产负债表不能有负数吗
  • 汇算清缴后发现成本多做了
  • 如何在sql server中建立一个表
  • 个人劳务费怎么退税
  • sql2008强制还原数据库
  • 经营范围变更银行变更需要什么资料
  • 合伙企业可以退出吗
  • 广告费的税额计入哪里
  • 水泥贸易利润
  • 周转材料低值易耗品五五摊销法
  • 旅客运输进项抵扣加计扣除怎么算
  • 旅行社差额征收税率多少
  • 生产成本二级科目设置
  • 行政单位年终奖的相关发放规定
  • 筹建期间取得的利息收入 企业所得税
  • 预收账款变成了什么
  • 其他应收款减值损失可以转回吗
  • 在SQL Server 2005中,数据库文件的扩展名为
  • 如何防止sql注入及数据安全问题
  • 系统32位和64位的区别 Windows系统32位和64位的区别在哪里
  • win2003进入安全模式
  • 安装win7需要激活吗
  • 怎么更改windows商店的安装位置
  • peafsearch是什么程序
  • macos 安装win7
  • windows7hosts文件
  • jquery怎么获取
  • 天天数链是做什么的
  • shell脚本连接服务器
  • python tcp socket
  • cocos2d教程
  • cocos2dx lua在sublime下的插件安装及查看定义
  • shell脚本运行c程序
  • python任务调度之schedule
  • 简述shell命令提示符的组成
  • js中ajax完整例子
  • jquery验证邮箱格式
  • python操作db2数据库
  • 电子税务局都能完成哪些功能
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设