怎么在vue中使用Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果?相信很多沒有經(jīng)驗(yàn)的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、網(wǎng)站設(shè)計與策劃設(shè)計,姜堰網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:姜堰等地區(qū)。姜堰做網(wǎng)站價格咨詢:18980820575
1、介紹:
2、在初始化的時候綁定這兩個事件。需要綁定的事件是鼠標(biāo)的點(diǎn)擊事件和右鍵點(diǎn)擊事件。
mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementById('myChart')); myChart.on('click', function (params) { console.log(params); //點(diǎn)擊高亮 that.myChart.dispatchAction({ type: 'focusNodeAdjacency', // 使用 dataIndex 來定位節(jié)點(diǎn)。 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(); },
運(yùn)行效果如下:
看完上述內(nèi)容,你們掌握怎么在vue中使用Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!