位置: IT常识 - 正文

如何通过点击按钮切换显示不同echarts图表(通过点击office文件按钮可以选择设置系统选项)

编辑:rootadmin
这篇文章主要介绍了如何通过点击按钮切换显示不同echarts图表,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教 目录

推荐整理分享如何通过点击按钮切换显示不同echarts图表(通过点击office文件按钮可以选择设置系统选项),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:通过点击office文件按钮可以选择设置系统选项,点击按钮,如何通过点击按键截屏,按住()键将以单击点为绘制对象,如何实现按钮的点击事件,如何通过点击按钮切换幻灯片,如何通过点击按钮切换幻灯片,如何通过点击按钮切换幻灯片,内容如对您有帮助,希望把文章链接给更多的朋友!

点击按钮切换显示不同echarts图表1、使用v-if时2、使用v-show时按钮点击事件实现一个页面获取多个echarts图表我的心路历程接下来我具体的描述下我的最终成果是怎么实现的点击按钮切换显示不同echarts图表

众所周知,调用echarts方法要写在mounted周期里,因为在页面处于created周期时,还得不到数据,没办法渲染到echarts图表上(具体原因查看vue生命周期),但是当点击按钮后切换图表,涉及到是否能够找到要渲染的dom,需要结合v-if和v-show来灵活使用。

废话不多说,开始拿例子说话,没时间的直接看例子后面的结论。

点击按钮后直接切换echarts图表(updated的应用) 本次案例是点击按钮,在echarts图表和vueSeamlessScroll组件之前切换,出现两种情况

1、使用v-if时

按钮index默认为0,查看页面时,echarts图表在mounted里面调用,按钮点击“入驻服务”后,页面显示如下

到目前一切都正常,等再切回index为0的时候,幺蛾子就来了,echarts图表它不显示了

看到这里,应该都明白,因为已经过了mounted周期,在页面操作属于在其他周期函数里的事情…

2、使用v-show时如何通过点击按钮切换显示不同echarts图表(通过点击office文件按钮可以选择设置系统选项)

index为0时,echarts图表正常,index为1时,vueSeamlessScroll组件它不会自动轮播了!!!就在我以为是这个组件的问题,甚至都要去网上百度如何更加深入了解这个组件的时候,突然想起来,方向可能是,如何同步更新视图。这个时候不禁让我想到每次面试都被问烂的vue生命周期,用updated()周期函数配合v-if使用即可。

结论:遇到通过按钮在同一个页面中来更新视图的echarts之类的问题,使用updated周期函数

按钮点击事件实现一个页面获取多个echarts图表

最近导师让完成一个任务,任务的大概内容是,5个按钮分别是1-5号,还有另外两个按钮是最近5小时和最近24小时,通过点击按钮实现动态的从后台获取符合条件的数据,并展示在前端echarts里面,当时接到这个任务之后脑子是比较蒙的,后来经过了大概一周的研究终于搞定了,在此做个记录,也是为了给大家分享一下整体的思路。先把截图奉上!

1号最近5小时的数据:

1号最近24小时的数据:

在此说明一下,横坐标和纵坐标的值都是通过后台从数据库里读取出来的,而且eachers图是动态的,不是静止不动的,这只是截图原因。

我的心路历程

我拿到这个任务的时候一开始的需求是是要静态的,并且是要4个一条线的图,所以我的第一想法和大家是一样的去官网上贴代码,然后改样式,这样想想也挺简单,我大致的说一下,照顾一下初学者;

https://echarts.apache.org/zh/index.html

大家可以从上面的链接上面选则自己想要的图表类型,然后cv代码就可以了,so easy,你只需要自己根据自己的需求创建div和设置样式即可。

接下来我具体的描述下我的最终成果是怎么实现的

主要是思路:具体代码我就不贴了

第一步,我们需要从官网上找一个有3条折线图的图表。第二步,我们需要让横坐标动起来。第三步,我们需要实现从后端获取数据。(这一步需要你会建数据库,目的是后续怎么方便查数据更方便)第四步,我们需要通过按钮的点击事件绑定我们的数据是属于几号按钮的数据,就是说你点击哪个按钮只能获取到符合当前条件的数值。第五步,我们需要给控制时间的按钮也绑定上点击事件,类似于条件查询。第六步,我们需要给两个时间的div设置显示和隐藏。

由于篇幅原因,我就不粘代码了。

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

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

上一篇:BLOG-2(Blog2N如何计算)

下一篇:电脑学习网告诉你微擎如何开启Redis?打造最强微擎性能-OK教程(电脑培训网络教学)

  • 工程承包公司账务处理
  • 我可以通过什么知道明天的天气情况
  • 计提企业所得税分录
  • 资产的计税基础大于账面价值会形成可抵扣的暂时性差异
  • 出口未报关收到外汇怎样处理
  • 买金税盘怎么做账
  • 研究开发费用资本化和费用化
  • 外商投资企业如何注资
  • 房地产开发企业资质等级有几个
  • 租车费属于办公费吗
  • 怎样进行房产置换的账务处理
  • 预收货款存入银行分录
  • 城市维护建设税是什么意思
  • 以前年度少计提折旧怎么做分录
  • 抵货款回来的产品叫什么
  • 企业发生的现金折扣应计入
  • 税务系统1+1+5
  • 增值税免税收入汇算清缴的时候填哪
  • 增资扩股投资方要交印花税吗
  • 工作量法计提折旧会计分录
  • 水利建设基金的计税依据及税率
  • 不征收增值税项目进项税额可以抵扣吗
  • 设备升级改造如何开发票
  • 成本费用总额包括信用减值损失吗
  • 计提附加税的会计分录怎么写
  • 转贴现属于什么市场
  • 计提应收利息怎么做分录
  • 一台设备发票开来0.5台怎么做账?
  • 企业收入确认的依据是什么
  • 跨区域涉税事项报告表报验流程
  • 在php中,字符串有哪些表示形式
  • 经济业务原始凭证分录
  • 布鲁克斯的故事
  • php多进程开发
  • 小企业会计准则适用于哪些企业
  • 企业合并一般债权怎么算
  • 购买商品的会计分录贷方能写应付账款
  • nmblookup安装
  • ps闪退是什么原因win11
  • 计提预付账款会计分录
  • 金银首饰包装物消费税
  • 入库管理业务流程图
  • 非定额备用金的使用范围
  • 抵扣进项税是怎么算的
  • db2运维命令
  • 计入存货成本的税费
  • 资产处置损益要写明细账吗
  • 加计扣除适用于什么企业
  • SQL Server实时同步更新远程数据库遇到的问题小结
  • 建筑公司跨区域经营预缴
  • 捆绑销售的会计处理?
  • 结构性存款是什么存款
  • 债务人对债权人享有
  • 装修费按几年摊销费用
  • 小规模纳税人附加税减半征收
  • 带息票据为什么是贷财务费用
  • 存根联明细怎么申报
  • 未交增值税增加记哪方
  • 进项税额转出还要交税吗
  • 现金日记账1月怎么记账
  • 计提折旧对公司有什么好处
  • sql数据库检查命令
  • win8系统c盘占用多大
  • linux服务端
  • 新手怎样
  • WZCSLDR.exe - WZCSLDR是什么进程
  • win8 所有程序
  • iphone看mac
  • windows10如何多选文件
  • windows多屏显示
  • linux如何快速统计文件个数
  • win8如何切换用户登录
  • 朝鲜引擎
  • win10系统应用更新
  • 冒充咋写
  • flask使用celery
  • 用javascript写表单代码
  • python程序员必读书籍
  • 深圳市国家税务局电子税务局
  • 承租房变更承租人申请怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设