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 相关文章推荐
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
浅谈js原生拖放
Nov 21 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
js编写简易的计算器
Jul 29 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进行MySQL删除记录操作代码
2008/06/07 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
详解php用static方法的原因
2018/09/12 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
拖动一个HTML元素
2006/12/22 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python实现石头剪刀布程序
2021/01/20 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python 安装移动复制第三方库操作
2020/07/13 Python
人力资源部门的主要职能
2014/02/22 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
共青团员自我评价
2015/03/10 职场文书