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 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
jquery退出each循环的写法
Feb 26 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 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中返回引用类型的方法
2015/04/03 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
大型车展策划方案
2014/02/01 职场文书
初中军训感想300字
2014/03/05 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
2015年防汛工作总结
2015/05/15 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle