Home > Web Front-end > JS Tutorial > body text

An example of using Vue with Echarts to achieve click highlighting effect

亚连
Release: 2018-05-29 17:05:32
Original
3285 people have browsed it

Below I will share with you an example of using vue combined with Echarts to achieve click highlighting effect. It has a good reference value and I hope it will be helpful to everyone.

This article mainly introduces how to use Echarts in vue to achieve click highlighting effect.

1. First, take a look at the introduction on the official website:

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

2. Bind these two events during initialization. The events that need to be bound are mouse click events and right-click events.

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();
 },
Copy after login

The running effect is as follows:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed examples of interaction between Servlet3.0 and pure javascript through Ajax

Tree shape implemented by vue Example code of dish

p5.js introductory tutorial keyboard interaction

##

The above is the detailed content of An example of using Vue with Echarts to achieve click highlighting effect. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template