vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例

更新時(shí)間：2018年03月17日 09:18:05 作者：0day__

下面小編就為大家分享一篇vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

本文主要介紹如何在vue中使用Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果。

1、首先看一下官方網(wǎng)站上的介紹：

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

2、在初始化的時(shí)候綁定這兩個(gè)事件。需要綁定的事件是鼠標(biāo)的點(diǎn)擊事件和右鍵點(diǎn)擊事件。

mounted: function () {
  let that = this;
  let myChart = this.$echarts.init(document.getElementById('myChart'));
  myChart.on('click', function (params) {
  console.log(params);
  //點(diǎn)擊高亮
  that.myChart.dispatchAction({
   type: 'focusNodeAdjacency',
   // 使用 dataIndex 來(lái)定位節(jié)點(diǎn)。
   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 來(lái)定位 series.
   seriesIndex: params.seriesIndex,
  })
  });
  that.myChart = myChart;
  that.drawLine();
 },

運(yùn)行效果如下：

以上這篇vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
vue中mapbox地圖顯示一半的問(wèn)題及解決方法
在vue中創(chuàng)建mapbox地圖，地圖只顯示一般，查看瀏覽器開(kāi)發(fā)者工具，發(fā)現(xiàn)將canvas.mapboxgl-canvas 的position:absolute去掉就解決了，今天小編通過(guò)本文給大家分享詳細(xì)過(guò)程，感興趣的朋友跟隨小編一起看看吧
2023-07-07
聊聊Vue 中 title 的動(dòng)態(tài)修改問(wèn)題
這篇文章主要介紹了 Vue 中 title 的動(dòng)態(tài)修改問(wèn)題，文中通過(guò)兩種方案給大家介紹了title的傳遞問(wèn)題 ,需要的朋友可以參考下
2019-06-06
vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
vue實(shí)現(xiàn)彈窗翻頁(yè)多選效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)彈窗翻頁(yè)多選效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Vue3項(xiàng)目中的hooks的使用教程
今天我們稍微說(shuō)一下 vue3 項(xiàng)目中的 hooks 的使用，其實(shí)這個(gè) hooks 呢是和 vue2 當(dāng)中的 mixin 是類(lèi)似的，學(xué)習(xí)過(guò) vue2 的小伙伴一定對(duì) mixin 一定比較熟悉，快跟隨小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Unocss(原子化css)?使用及vue3?+?vite?+?ts講解
這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡(jiǎn)單介紹了Unocss使用及圖標(biāo)庫(kù)使用，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-11-11
vue中如何獲取當(dāng)前路由name
這篇文章主要介紹了vue中如何獲取當(dāng)前路由name，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vuejs事件中心管理組件間的通信詳解
這篇文章主要為大家詳細(xì)介紹了vuejs事件中心管理組件間的通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
vue實(shí)現(xiàn)標(biāo)簽云效果的方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue標(biāo)簽云的實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-08-08