本文主要介绍如何在vue中使用echarts实现点击高亮效果。
1、首先看一下官方网站上的介绍：
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();
},
运行效果如下：
以上这篇vue结合echarts实现点击高亮效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持萬仟网。
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
