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 相关文章推荐
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
js简单时间比较的方法
Aug 02 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
jQuery实现滚动效果
Nov 17 jQuery
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 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
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
php下将XML转换为数组
2010/01/01 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
numpy.delete删除一列或多列的方法
2018/04/03 Python
Python中一些深不见底的“坑”
2019/06/12 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python 内置函数汇总详解
2019/09/16 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
化工机械应届生求职信
2013/11/04 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Python基础知识之变量的详解
2021/04/14 Python
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android