vue結合Echarts實現(xiàn)點擊高亮效果的示例
更新時間：2018年03月17日 09:18:05 作者：0day__
下面小編就為大家分享一篇vue結合Echarts實現(xiàn)點擊高亮效果的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
本文主要介紹如何在vue中使用Echarts實現(xiàn)點擊高亮效果。
1、首先看一下官方網(wǎng)站上的介紹：
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 來定位節(jié)點。
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實現(xiàn)點擊高亮效果的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了Vue簡化用戶查詢/添加功能的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
Vue中的 mixins 和 provide/inject詳解
這篇文章主要介紹了Vue中的 mixins 和 provide/inject詳解,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue實現(xiàn)一個無限加載列表功能,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue彈窗插件實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue結合echarts繪制一個支持切換的折線圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了解決vuex刷新數(shù)據(jù)消失問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中數(shù)據(jù)請求axios的封裝和使用，Axios?是一個基于?promise?的?HTTP?庫，下面文章圍繞主題的相關資料展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了vue和webpack安裝命令，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
本文主要介紹了flask和vue前后端分離項目部署的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關資料,需要的朋友可以參考下2023-02-02