vue结合Echarts实现点击高亮效果的示例

2024-04-14 03:28:39

本文主要介绍如何在vue中使用Echarts实现点击高亮效果。

1、首先看一下官方网站上的介绍：

http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency

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的实例代码（3种图）
详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）
在Vue中使用echarts的方法
vue中echarts3.0自适应的方法

在Vue中使用echarts的实例代码（3种图）

前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图以下数据已做脱敏处理这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换
vue中echarts3.0自适应的方法

前端时间做一个vue的项目,echart是按需引入的如下: // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts' // 引入折线图 import 'echarts/lib/chart/line' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legendScroll' 然后发现在缩放浏览器窗口时折线图并不会自适应
在Vue中使用echarts的方法

上篇文章给大家介绍了在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入上面全局引入会将所有的echarts图表打包,导致体积过大,我
详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

数据可视化将数据通过图表的形式展现出来将大大的提升可读性和阅读效率本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等技术栈 vue2.x vuex 存储公共变量,如色值等 vue-router 路由 element-ui 饿了么基于vue2开发组件库,本例使用了其中的datePicker echarts 一款丰富的图表库 webpack.ES6.Babel.Stylus... 项目截图开发组件化本项目完全采用组件化的思想进行开发.使用vue-router作为路由,每个页面
vue结合Echarts实现点击高亮效果的示例

本文主要介绍如何在vue中使用Echarts实现点击高亮效果. 1.首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2.在初始化的时候绑定这两个事件.需要绑定的事件是鼠标的点击事件和右键点击事件. mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementBy
vue实现tab栏点击高亮效果

本文实例为大家分享了tab栏实现点击高亮,供大家参考,具体内容如下之前面试的时候被问到过如何使用vue实现tab栏切换高亮,今天自己写demo顺便记录一下 vue官方文档里有一个基础知识点叫做对象语法 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> //data如下 data: { isActive: true,
JS实现的表格行鼠标点击高亮效果代码

本文实例讲述了JS实现的表格行鼠标点击高亮效果代码.分享给大家供大家参考,具体如下: 偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效) <script type="text/javascript"> var highlightcolor='#E0F2FE'; var clickcolor='#ffedd2'; function MouseOver(){ var source=event.srcElement; if (sour
vue实现a标签点击高亮方法

如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre
vue实现录音功能js-audio-recorder带波浪图效果的示例

目录前言: 因为业务需要,现在将整理的录音功能资料记录下,使用插件js-audio-recorder 实现效果:可得到三种录音数据,pcm,wav,mp3 等官方api入口:点我(网不好的童鞋可以看最下面的api截图) 官方案例入口:点我官方源码git入口:点我实现步骤: 一:安装插件 js-audio-recorder 二:安装将格式转换为mp3的插件 lamejs 三:附上实现源码: 到这里,代码就结束了,上面每个方法都有很详细的注释,就不累赘了整理api:(有代理的可以看官网,这
vue中实现弹出层动画效果的示例代码

1 <template> <div class="home">  <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click
Flutter实现文本滚动高亮效果的示例讲解

目录前言功能实现前言最近有个需求是人工语音播放时文本能随语音朗读时像歌词滚动的效果. 原本第一考虑的时能随时间字体渐变成更改后的颜色, 有比较流畅的走马灯效果. 但最终实践了几次后发现要能够逐字逐行渐变有一些麻烦, 不好实现. 所以转而变为将字体直接将字体高亮, 一段文本区分成两个部分, 一个部分是高亮文本, 也就是已朗读的部分, 一个部分是剩下未朗读的非高亮文本. 通过时时渲染页面就能达成滚动高亮的效果. 功能实现因为在Text中会存在两段文本, 所以就不能单只用Text组件, 而改
Vue实现内部组件轮播切换效果的示例代码

对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下: 我们可以引入一个轮播组件,但是有个问题,通常轮播组件都会把所有的slide都渲染出来再进行切换,这样就导致所有的资源都会触发加载,这可能不是我们所期待的,毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了.所以我们可以手动简单地写一个,满足需求即可. 现在一步步来实现这个功能,先写一个实现基本切换的demo. 1. 实现切换先用vue-cli搭建一个工程脚手架,使用以下命令: npm install
Android 设置主题实现点击波纹效果的示例

开头先说说大家都知道的Material Design. Material Design: Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,我大致把它分为四部分: 主题和布局视图和阴影 UI控件动画 Material Theme 使用Material主题: Material主题只能应用在Android L版本. 应用Material主题很简单,只需要修改res/values/styles.xml文件,
Vue使用vue-area-linkage实现地址三级联动效果的示例

很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1.安装vue-area-linkage插件:npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose 2.在main.js上进行依赖注入,如下图所示: 3.在对应vue文件的template模板上写

vue结合Echarts实现点击高亮效果的示例

您可能感兴趣的文章:

相关推荐

随机推荐