An example of using Vue with Echarts to achieve click highlighting effect-JS Tutorial-php.cn

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

亚连

Release： 2018-05-29 17:05:32

Original

3316 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(&#39;myChart&#39;));
  myChart.on(&#39;click&#39;, function (params) {
  console.log(params);
  //点击高亮
  that.myChart.dispatchAction({
   type: &#39;focusNodeAdjacency&#39;,
   // 使用 dataIndex 来定位节点。
   dataIndex: params.dataIndex
  });
  if (params.dataType == &#39;edge&#39;) {
   that.handleClick(params);
  } else if (params.dataType == &#39;node&#39;) {
   if (that.firstNode == &#39;&#39;) {
   that.firstNode = params.name;
   } else {
   that.secondNode = params.name;
   }
  }
  });
  //取消右键的弹出菜单
  document.oncontextmenu = function () {
  return false;
  };
  //右键取消高亮
  myChart.on(&#39;contextmenu&#39;, function (params) {
  console.log(params);
  that.myChart.dispatchAction({
   type: &#39;unfocusNodeAdjacency&#39;,
   // 使用 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.

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!