Heim >Web-Frontend >js-Tutorial >Ein Beispiel für die Verwendung von Vue mit Echarts, um einen Klick-Hervorhebungseffekt zu erzielen
Im Folgenden werde ich Ihnen ein Beispiel für die Verwendung von Vue in Kombination mit Echarts zur Erzielung eines Klick-Hervorhebungseffekts vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.
In diesem Artikel wird hauptsächlich die Verwendung von Echarts vorgestellt, um einen Klick-Hervorhebungseffekt in Vue zu erzielen.
1. Schauen Sie sich zunächst die Einführung auf der offiziellen Website an:
http://echarts.baidu.com/api .html#action .graph.focusNodeAdjacency
2. Binden Sie diese beiden Ereignisse während der Initialisierung. Die Ereignisse, die gebunden werden müssen, sind Mausklickereignisse und Rechtsklickereignisse.
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(); },
Der Betriebseffekt ist wie folgt:
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Detaillierte Beispiele der Interaktion zwischen Servlet3.0 und reinem Javascript über Ajax
Baumform implementiert von vue Beispielcode für Gerichte
p5.js Einführungs-Tutorial Tastaturinteraktion
Das obige ist der detaillierte Inhalt vonEin Beispiel für die Verwendung von Vue mit Echarts, um einen Klick-Hervorhebungseffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!