echarts图表点击事件之跳转页面和加载页面

下图显示四个条形图,点击条形图就跳转到其页面,这说明您要判断你点了那个条形图。
echarts给了它点击事件 写法,我们只要模仿就行,代码如下:
[javascript] view plain copy
 
  1. //echarts图表点击跳转  
  2.                 myChart.on('click', function (param){  
  3.                     var name=param.name;  
  4.                     if(name=="用户数"){  
  5.                         window.location.href="${base}/admin/user/list.htm";  
  6.                     }else if(name=="栏目数"){  
  7.                         window.location.href="${base}/admin/classify/list.htm";  
  8.                     }else if(name=="新闻数"){  
  9.                         window.location.href="${base}/admin/news/list.htm";  
  10.                    }else{  
  11.                     window.location.href="${base}/admin/file/list.htm";  
  12.                    }                      
  13.                 });  
  14.                 myChart.on('click',eConsole);  
第二个问题就是跳转页面的问题,有三种方式:
[javascript] view plain copy
 
  1. window.location.href="${base}/admin/file/list.htm";  
[javascript] view plain copy
 
  1. parent.location.href="${base}/admin/file/list.htm";  
  2. top.location.href="${base}/admin/file/list.htm";  

这三个的区别用如下图解释:
使用window跳转页面,只是区域一跳转了显示您要调到的页面,其他区域发生变化;使用parent跳转页面,区域二跳转显示您要跳到的页面;使用top跳转页面,区域三全部跳转到您要调到的页面,整个页面刷新。
posted @   雪莉06  阅读(1105)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示