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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
Vuex模块化应用实践示例
Feb 03 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排序算法的复习和总结
2012/02/15 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
Prototype Array对象 学习
2009/07/19 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
面试后的英文感谢信
2014/02/01 职场文书
经典商业广告词
2014/03/13 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
银行先进个人总结
2015/02/15 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
mysql查询结果实现多列拼接查询
2022/04/03 MySQL