位置: 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教程(电脑培训网络教学)

  • 华为Nova8SE活力版发布会在哪看(华为nova8se活力板配置参数)

    华为Nova8SE活力版发布会在哪看(华为nova8se活力板配置参数)

  • 复制文件经过内存吗(复制文件显示进度)

    复制文件经过内存吗(复制文件显示进度)

  • airpods有黑色的吗(airpods里面黑黑的是啥)

    airpods有黑色的吗(airpods里面黑黑的是啥)

  • 单片机应用系统是由什么组成的(单片机应用系统的设计原则)

    单片机应用系统是由什么组成的(单片机应用系统的设计原则)

  • 微信记录删了怎么恢复聊天记录(微信记录删了怎么查转账记录)

    微信记录删了怎么恢复聊天记录(微信记录删了怎么查转账记录)

  • 华为数据线通用吗(华为的数据线通用吗)

    华为数据线通用吗(华为的数据线通用吗)

  • 为什么哈啰出行打不开(为什么哈啰出行开不了车)

    为什么哈啰出行打不开(为什么哈啰出行开不了车)

  • 笔记本电脑受潮的症状(笔记本电脑受潮了怎么办)

    笔记本电脑受潮的症状(笔记本电脑受潮了怎么办)

  • 小红书会自动解封吗(小红书会自动解锁吗)

    小红书会自动解封吗(小红书会自动解锁吗)

  • 微视提现了为什么没有到账(微视提现后就没红包了)

    微视提现了为什么没有到账(微视提现后就没红包了)

  • 微博被拉黑了能关注对方吗(微博被拉黑了能拉黑对方吗)

    微博被拉黑了能关注对方吗(微博被拉黑了能拉黑对方吗)

  • 如何为word设置密码(如何为word设置人脸指纹或pln)

    如何为word设置密码(如何为word设置人脸指纹或pln)

  • iphone11pro max连拍怎么操作(11promax相机连拍)

    iphone11pro max连拍怎么操作(11promax相机连拍)

  • 网线线序不对有影响吗(网线线序接错了能通吗)

    网线线序不对有影响吗(网线线序接错了能通吗)

  • vue按拍摄键怎么没用(vue相机怎么拍照)

    vue按拍摄键怎么没用(vue相机怎么拍照)

  • 打开抖音网络不可用怎么回事儿(抖音网络打不开是怎么回事)

    打开抖音网络不可用怎么回事儿(抖音网络打不开是怎么回事)

  • iphone11两个喇叭怎么只有右边的响(iphone11两个喇叭都有杂音)

    iphone11两个喇叭怎么只有右边的响(iphone11两个喇叭都有杂音)

  • 路由器自己可以安装吗(路由器自己可以改密码吗)

    路由器自己可以安装吗(路由器自己可以改密码吗)

  • 微信注销账号后手机能不能再注册(微信注销账号后多久可以再注册)

    微信注销账号后手机能不能再注册(微信注销账号后多久可以再注册)

  • Win11 Insider Preview Build 22463更新推送(附更新、修复内容汇总)(win11 insider preview怎么升级正式版)

    Win11 Insider Preview Build 22463更新推送(附更新、修复内容汇总)(win11 insider preview怎么升级正式版)

  • 什么是WebRTC?(什么是webrip)

    什么是WebRTC?(什么是webrip)

  • 如何安装php的pcntl拓展?(phpipam安装)

    如何安装php的pcntl拓展?(phpipam安装)

  • 织梦实现列表页双样式和列表样式循环交替变化方法(织梦内容页模板修改)

    织梦实现列表页双样式和列表样式循环交替变化方法(织梦内容页模板修改)

  • Dedecms织梦利用memberlist标签调用自定义模型中会员(织梦使用教程)

    Dedecms织梦利用memberlist标签调用自定义模型中会员(织梦使用教程)

  • 教育培训学校怎么翻译
  • 机器配件属于什么报销项目
  • 劳务企业向总包提供
  • 缴注册印花税怎么做账
  • 印花税的计税依据为各种应税凭证上所记载的计税金额
  • 留存收益未分配利润占比
  • 房地产企业土地增值税
  • 采用托收承付方式怎么做分录?
  • 搬迁补偿收入计入什么会计科目
  • 企业购买劳保用品会计处理
  • 外购商品计入
  • 长期借款产生的利息计入哪个科目
  • 销售安装门窗增值税
  • 代扣代缴个人所得税计入哪个科目
  • 无票收入记账多的进项发票怎么处理?
  • 增值税普通发票有什么用
  • 建筑企业能申请小微企业吗
  • 一次性奖金如何交税
  • etc在充值后未索取可以再次索取吗
  • 把十六点改成十五点半起床
  • 财务报表年报和季报必须一样吗
  • 免税收入和不征税收入有哪些?怎么记忆
  • 积极的财政政策有哪些
  • 个体户生产经营所得怎么报税
  • 提供给生产工人的住房的租赁费用应计入
  • 预付业务招待费会计分录
  • 在win7系统中,添加打印机驱动程序
  • win10更新失败怎么回事
  • 阿拉斯加州zip
  • 一个药厂能够生产药品的三个前提条件
  • 上年费用未计提
  • win11无法安装程序包
  • windows 10 build 21354
  • 工程施工广告牌
  • 会计的科类
  • 个人独资企业和合伙企业的区别
  • 未确认融资费用借贷方向
  • 动态模型图如何制作
  • php 数组
  • php页面跳转方法
  • 让 new bing 使用 GPT-4 编写一个令人满意的程序全过程赏析
  • 税费的审计
  • 资产减值损失为什么要调增
  • 所得税的应税所得额
  • 进项票和销项票金额一样可以吗
  • 医疗服务比
  • mysql索引命令
  • 先销售后开发票的如何做帐?
  • 税盘维护费可以年年抵扣吗
  • 通行费发票增值税申报怎么填写
  • 长期待摊费用待抵扣税金
  • 以前年度损益调整怎么做账
  • 出差餐补算在工资里吗
  • 资产减值损失借贷方向
  • 预借备用金的会计分录
  • 职工福利费税前扣除标准是应发工资还是实发工资
  • 房产税减按70%的政策
  • 个人为什么不能购买永续债
  • 总分类账,明细分类账,日记账
  • 可供出售金融资产公允价值变动
  • 进项做成了销项怎么调账
  • 单位购入车辆能抵扣吗
  • 企业应该设置哪些部门
  • win81蓝屏重启故障
  • fedora怎么用
  • win edge
  • linux使用场合
  • qq远程桌面操作
  • window10里的ie浏览器
  • linux的截图工具
  • python gui视频教程
  • portainer集群管理
  • unity xcode
  • unity5.x游戏开发指南
  • unity脚本api
  • python语言面向过程吗
  • 欠税务局税款的后果
  • 不予处理的法律依据
  • 新版电子发票怎么看发票代码图片
  • 滨州市望海花园北侧规划
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设