当前位置: 首页 > news >正文

vue echarts 柱状图表,点击柱子,路由代参数(X轴坐标)跳转

一,echarts 点击事件监控

myChart.on('click', (params) => {if (params.componentType === 'series' && params.dataIndex !== undefined) {const months = this.month_htqd[params.dataIndex]; // 获取点击柱状图的 X 轴坐标值alert(`点击了柱状图,值为: ${months}`);// 根据点击的柱状图数据索引,处理跳转逻辑this.$router.push( {path: `/tzmanager/yueding`,query: {yuedTime: months}});}});

二,跳转到的vue组件,接收参数

data () {return {queryParam: {yuedTime: '' // 初始化为空,接收选择的月份值},},}

三、watch监听router变化,具体参数根据你自己的功能实现去写

 mounted() {if(this.$route.query.yuedTime!=null){const yuedTime =this.$route.query.yuedTime;let dateObj = new Date(yuedTime);this.queryParam.yuedTime =dateObj;this.searchQuery();this.handleUpdateClick();}},watch: {'$route'(to, from) {// 监听路由参数变化if(this.$route.query.yuedTime!=null){const yuedTime =this.$route.query.yuedTime;let dateObj = new Date(yuedTime);this.queryParam.yuedTime = dateObj;// 在这里可以执行刷新组件的其他操作this.searchQuery();}}},

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 复杂网络的任意子节点的网络最短距离
  • AIoTedge 智能边缘物联网平台
  • 如何用手机压缩视频?手机压缩视频方法来了
  • 【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(二十三)
  • 【两种方法】多位数的数字和问题
  • 【C++】——初识模版
  • .NET单元测试使用AutoFixture按需填充的方法总结
  • VAE论文阅读
  • 2024中国大学生算法设计超级联赛(1)
  • 消费金融系统开发回忆录
  • 《昇思 25 天学习打卡营第 14 天 | 基于MindSpore的红酒分类实验 》
  • 代码解读:Diffusion Models中的长宽桶技术(Aspect Ratio Bucketing)
  • Android 15 之如何快速适配 16K Page Size
  • Spring Boot 学习(10)——固基(Idea 配置 git 访问 gitee)
  • JSON字符串介绍
  • 【翻译】Mashape是如何管理15000个API和微服务的(三)
  • 2017届校招提前批面试回顾
  • Android优雅地处理按钮重复点击
  • Brief introduction of how to 'Call, Apply and Bind'
  • - C#编程大幅提高OUTLOOK的邮件搜索能力!
  • JavaScript函数式编程(一)
  • JAVA多线程机制解析-volatilesynchronized
  • JSDuck 与 AngularJS 融合技巧
  • Linux CTF 逆向入门
  • spring cloud gateway 源码解析(4)跨域问题处理
  • 多线程 start 和 run 方法到底有什么区别?
  • 关于Flux,Vuex,Redux的思考
  • 实习面试笔记
  •  一套莫尔斯电报听写、翻译系统
  • C# - 为值类型重定义相等性
  • ​ssh免密码登录设置及问题总结
  • ​无人机石油管道巡检方案新亮点:灵活准确又高效
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • # Spring Cloud Alibaba Nacos_配置中心与服务发现(四)
  • # windows 安装 mysql 显示 no packages found 解决方法
  • # 利刃出鞘_Tomcat 核心原理解析(七)
  • #13 yum、编译安装与sed命令的使用
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (附源码)springboot车辆管理系统 毕业设计 031034
  • (强烈推荐)移动端音视频从零到上手(上)
  • (三)c52学习之旅-点亮LED灯
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (转) Android中ViewStub组件使用
  • (转)项目管理杂谈-我所期望的新人
  • ..回顾17,展望18
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .【机器学习】隐马尔可夫模型(Hidden Markov Model,HMM)
  • .gitignore文件_Git:.gitignore
  • .net core 控制台应用程序读取配置文件app.config
  • .Net Core 生成管理员权限的应用程序
  • .NET Micro Framework 4.2 beta 源码探析
  • .NET WebClient 类下载部分文件会错误?可能是解压缩的锅
  • .NET 线程 Thread 进程 Process、线程池 pool、Invoke、begininvoke、异步回调
  • .Net语言中的StringBuilder:入门到精通
  • ?php echo $logosrc[0];?,如何在一行中显示logo和标题?