当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue结合Echarts实现点击高亮效果的示例

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

2019年06月06日  | 移动技术网IT编程  | 我要评论

cctv5天下足球直播,qie663,程控调度机

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

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

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实现点击高亮效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网