Un exemple d'utilisation de Vue avec Echarts pour obtenir un effet de surbrillance des clics

Ci-dessous, je vais partager avec vous un exemple d'utilisation de Vue combinée avec Echarts pour obtenir un effet de mise en évidence des clics. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Cet article présente principalement comment utiliser Echarts pour obtenir un effet de surbrillance des clics dans vue.

1. Tout d'abord, jetez un œil à l'introduction sur le site officiel :

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

2. Liez ces deux événements lors de l'initialisation. Les événements qui doivent être liés sont les événements de clic de souris et les événements de clic droit.

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

L'effet de l'opération est le suivant :

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Exemples détaillés d'interaction entre Servlet3.0 et javascript pur via Ajax

Forme d'arbre implémentée par vue Exemple de code de plats

tutoriel d'introduction p5.js interaction clavier

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!