下图显示四个条形图,点击条形图就跳转到其页面,这说明您要判断你点了那个条形图。
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. rem、em、px、pt及网站字体大小设配

    rem:相对的只是HTML根元素字体尺寸; em:相对于当前对象内文本的字体尺寸(值不是固定且继承父级元素的字体大小); px像素(Pixel):对于显示器屏幕分辨率而言的; pt:point,是印刷 ...

  2. 12.26daily_scrum

    尽管最近是众多大作业集中爆发deadline的紧要关头,队员们依旧热情高涨,投入良多,纷纷为产品发布出谋划策. 具体工作: 小组成员 今日任务 工作时间 李睿琦 软件调试过程总结 2 左少辉 滑锁密码 ...

  3. 软件分析之QQ

    腾讯QQ(简称“QQ”)是腾讯公司开发的一款基于Internet的即时通信软件.腾讯QQ支持在线聊天.视频通话.点对点断点续传文件.共享文件.网络硬盘.自定义面板.QQ邮箱等多种功能,并可与多种通讯终 ...

  4. The import * cannot be resolved

    背景 使用eclipse jee做练习的时候,下载了老师的项目源码.考虑到老师用的时myeclipse,目录结构略有不同,所有不想直接导入项目,又考虑到,可能环境不一样,会出现这样那样的问题,所以我的 ...

  5. Spring Cloud Zipkin

    Zipkin the idea is from the googlge paper:Dapper https://yq.aliyun.com/articles/60165 https://www.e4 ...

  6. HashMap, HashTable,HashSet,TreeMap 的时间复杂度

    hashSet,hashtable,hashMap 都是基于散列函数, 时间复杂度 O(1) 但是如果太差的话是O(n) TreeSet==>O(log(n))==> 基于树的搜索,只需要 ...

  7. 使用 jstack 查询线程死锁错误日志 定位问题

    定位问题 (1) 首先 找到相应的进程 使用 ps -ef | grep 'com.sankuai.qcs.regulation.dispatch' 找到进程的ID;==>21980 (2) t ...

  8. Idea for Mac 过期 IntelliJ IDEA 2017 完美注册方法(附idea for Mac破解方法)

    Idea 不能使用了: 开始破解: (1)首先下载 jar包: https://download.csdn.net/download/engerla/10573069 放到位置: /Applicati ...

  9. SQL Server 常用函数使用方法(持续更新)

    之前就想要把一些 SQL 的常用函数记录下来,不过一直没有实行...嘿嘿... 直到今天用到substring()这个函数,C# 里面这个方法起始值是 0,而 SQL 里面起始值是 1.傻傻分不清楚. ...

  10. codeforces710B

    Optimal Point on a Line CodeForces - 710B You are given n points on a line with their coordinates xi ...