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.sortElements实现table排序
May 04 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
JS实现商品筛选功能
Aug 19 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
js回调函数原理与用法案例分析
Mar 04 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
批量修改RAR文件注释的php代码
2010/11/20 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
Python 多线程实例详解
2017/03/25 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
什么是python的函数体
2020/06/19 Python
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
优秀交警事迹材料
2014/01/26 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
自强之星事迹材料
2014/05/12 职场文书
小学开学标语
2014/07/01 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers