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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
jquery BS,dialog控件自适应大小
Jul 06 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 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图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP7修改的函数
2021/03/09 PHP
jquery maxlength使用说明
2011/09/09 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
python 的列表遍历删除实现代码
2020/04/12 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
中学生校园广播稿
2014/01/16 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
教育实习指导教师评语
2014/12/31 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS