下面我就為大家分享一篇vue結合Echarts實現點擊高亮效果的範例，具有很好的參考價值，希望對大家有所幫助。
本文主要介紹如何在vue中使用Echarts實現點擊高亮效果。
1、先看一下官方網站上的介紹：
#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 来定位节点。
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();
},# 運行效果如下：
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
Servlet3.0與純javascript透過Ajax互動的實例詳解
以上是vue結合Echarts實現點擊高亮效果的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
