Vue uses Echarts to achieve click highlight. vueecharts

Vue uses Echarts to achieve click highlight. vueecharts

This article describes how to use Echarts in vue to achieve click highlight.

1. First, let's take a look at the introduction on the official website:

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

2. bind these two events during initialization. Events to be bound are mouse click events and right-click events.

Mounted: function () {let that = this; let myChart = this. $ echarts. init (document. getElementById ('mychart'); myChart. on ('click', function (params) {console. log (params); // click to highlight that. myChart. dispatchAction ({type: 'focusnodeadjacency ', // use dataIndex to locate a node. 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 ;}}); // deselect the context menu document. oncontextmenu = function () {return false ;}; // right-click to cancel highlighting myChart. on ('textmenu ', function (params) {console. log (params); that. myChart. dispatchAction ({type: 'unfocusnodeadjacency ', // use seriesId, seriesIndex, or seriesName to locate the series. seriesIndex: params. seriesIndex,}); that. myChart = myChart; that. drawLine ();},

The running effect is as follows:

The above example of using vue in combination with Echarts to achieve click highlight effect is all the content shared by xiaobian. I hope to give you a reference, and I hope you can provide more support for the customer's house.