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