vue结合Echarts实现点击高亮效果的示例


Posted in Javascript onMarch 17, 2018

本文主要介绍如何在vue中使用Echarts实现点击高亮效果。

1、首先看一下官方网站上的介绍:

http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency

vue结合Echarts实现点击高亮效果的示例

vue结合Echarts实现点击高亮效果的示例

2、在初始化的时候绑定这两个事件。需要绑定的事件是鼠标的点击事件和右键点击事件。

mounted: function () {
  let that = this;
  let myChart = this.$echarts.init(document.getElementById('myChart'));
  myChart.on('click', function (params) {
  console.log(params);
  //点击高亮
  that.myChart.dispatchAction({
   type: 'focusNodeAdjacency',
   // 使用 dataIndex 来定位节点。
   dataIndex: params.dataIndex
  });
  if (params.dataType == 'edge') {
   that.handleClick(params);
  } else if (params.dataType == 'node') {
   if (that.firstNode == '') {
   that.firstNode = params.name;
   } else {
   that.secondNode = params.name;
   }
  }
  });
  //取消右键的弹出菜单
  document.oncontextmenu = function () {
  return false;
  };
  //右键取消高亮
  myChart.on('contextmenu', function (params) {
  console.log(params);
  that.myChart.dispatchAction({
   type: 'unfocusNodeAdjacency',
   // 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.
   seriesIndex: params.seriesIndex,
  })
  });
  that.myChart = myChart;
  that.drawLine();
 },

运行效果如下:

vue结合Echarts实现点击高亮效果的示例

vue结合Echarts实现点击高亮效果的示例

以上这篇vue结合Echarts实现点击高亮效果的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
vue实现a标签点击高亮方法
Mar 17 #Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 #Javascript
Vue 实现双向绑定的四种方法
Mar 16 #Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 #Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 #Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 #Javascript
vue-router相关基础知识及工作原理
Mar 16 #Javascript
You might like
main.php
2006/12/09 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
webpack4简单入门实例
2018/09/06 Javascript
用js实现放大镜效果
2020/10/28 Javascript
Python实现多并发访问网站功能示例
2017/06/19 Python
python tkinter实现屏保程序
2019/07/30 Python
python网络编程之五子棋游戏
2020/05/14 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
Python魔术方法专题
2020/06/19 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
焊接专业毕业生求职信
2013/10/01 职场文书
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
团日活动总结范文
2014/04/25 职场文书
学校对教师的评语
2014/04/28 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
2014年教务处工作总结
2014/12/03 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
论文答辩开场白大全
2015/05/27 职场文书
党支部半年考察意见
2015/06/01 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书