下图显示四个条形图,点击条形图就跳转到其页面,这说明您要判断你点了那个条形图。
echarts给了它点击事件 写法,我们只要模仿就行,代码如下:
  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);

第二个问题就是跳转页面的问题,有三种方式:

  1. window.location.href="${base}/admin/file/list.htm";
  1. parent.location.href="${base}/admin/file/list.htm";
  2. top.location.href="${base}/admin/file/list.htm";

这三个的区别用如下图解释:

使用window跳转页面,只是区域一跳转了显示您要调到的页面,其他区域发生变化;使用parent跳转页面,区域二跳转显示您要跳到的页面;使用top跳转页面,区域三全部跳转到您要调到的页面,整个页面刷新。

echarts图表点击事件之跳转页面和加载页面的更多相关文章

  1. echarts 图点击事件

    有三种方式,介绍一下,大家学习哈 1.利用tooltip记录信息,使用zr 监听事件,进行事件处理. 这种方法是利用showTip方法或者tooltip的formatter函数记录选中的数据信息,并在 ...

  2. vue Echarts 柱状图点击事件

    drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...

  3. html A标签 绑定点击事件。跳转页面。处理

    在平时的页面中,肯定有需要点击A标签 进行处理. 这时候习惯性的绑定一个点击事件进行数据处理. 在A标签中 herf="#" 然后绑定一个点击事件. 或者在A标签里面的元素里面有一 ...

  4. 关于Echarts柱状图点击事件的实现方法

    开发过程中,我们经常会碰到这样的需求:在柱状图上,点击某条柱形,调用相应的方法或跳转相应的界面 接下来就详细介绍如何实现柱状图的点击事件,其中maChart是绘图对象 一.简单的点击事件 myChar ...

  5. echarts饼图点击事件

    /** * 点击事件 */myChart2.on('click', function (param) { var index = param.dataIndex; alert(index);});

  6. echarts添加点击事件

    由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容 如图所示: 一开始找了好多博客,发现都不好用,大部分都是用到了 var ecConf ...

  7. Echarts设置点击事件

    简单明了. echarts初始化完成之后,给实例对象通过on绑定事件. 这里的事件包括: 'click','dblclick','mousedown','mouseup','mouseover','m ...

  8. jsp中点击一个图片跳转到另一个页面的方法

    1.这是jsp页面中的关于图片的那段代码 <img src="images/tj1.png " id="tj1"></img> 2.跳转 ...

  9. vue中添加Echarts图表的使用,Echarts的学习笔记

    项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...

随机推荐

  1. JAVA中使用MD5加密实现密码加密

    1.新建Md5.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 package c ...

  2. Python-复习-文件操作-21

    # 文件处理 # 打开文件 #open('路径','打开方式','指定编码方式') # 打开方式 r w a r+ w+ a+ b #r+ 打开文件直接写 和读完再写 # 编码方式 —— utf-8 ...

  3. CF367C. Hard problem

    链接[http://codeforces.com/group/1EzrFFyOc0/contest/706/problem/C] 题意: 他希望它们按词典顺序排序(就像字典中那样),但他不允许交换其中 ...

  4. “数学口袋精灵”第二个Sprint计划(第六~八天)

    “数学口袋精灵”第二个Sprint计划----第六天~第八天进度 任务分配: 冯美欣:欢迎界面的背景音乐完善 吴舒婷:游戏界面的动作条,选择答案后的音效 林欢雯:代码算法设计 第六天: 进度: 冯美欣 ...

  5. 在web.xml中配置监听器来控制ioc容器生命周期

    5.整合关键-在web.xml中配置监听器来控制ioc容器生命周期 原因: 1.配置的组件太多,需保障单实例 2.项目停止后,ioc容器也需要关掉,降低对内存资源的占用. 项目启动创建容器,项目停止销 ...

  6. 『编程题全队』Beta 阶段冲刺博客一

    1.提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID) (1) 昨天已完成的工作 孙志威: 1.讨论并制定了Beta阶段的计划 孙慧君: 1.Beta阶段任务的认领 黄华林 ...

  7. linux命令学习head和tail

    linux命令head和tail是一对:more和less是一对. head和tail https://www.2cto.com/os/201507/414753.html 一个头,一个尾. tail ...

  8. Linux CentOS虚拟机网卡配置

    最近在VMware安装CentOS6.5之后,每次从宿主机访问虚拟机的Oracle时,都要修改IP地址,因为没有设置虚拟机的IP,所以每次开机之后虚拟机的IP地址都是随机的,于是研究了下给虚拟机配置静 ...

  9. 日常工作: 应用服务器Oracle驱动问题说明

    1. .net使用Oracle驱动的发展等 作为.net线的产品的ERP产品 最初的版本 使用了.net 1.1发布时 微软提供的Oracle的驱动 但是后续微软的.net产品线貌似没有继续发展相应的 ...

  10. insertBefore(),appendChild()创建添加列表实例

    定义: insertBefore() 方法在您指定的已有子节点之前插入新的子节点. 语法: 父级.insertBefore(新的子节点,指定的已有子节点) 实例: <input id=" ...