echarts關係圖多次調介面問題
阿新 • • 發佈:2020-08-28
使用echarts關係圖點選之後,走了很多次介面,發現新增一個off事件就可以解決了,具體如下:
renderEcharts = () => { const { location: { query }, fileModel } = this.props; const { fileMd5 } = fileModel; let graph = fileMd5;var currentGraph = { nodes: {}, links: {}, }; var nodeMap = {};var myChart; myChart = echarts.init(document.getElementById('dd_echarts')); myChart.off('click') //在這裡加就解決了點選多次載入問題 // 頁面載入時,第一次初始化圖 function init() {// 根據定義的常量,產生currentGraph的預設資料 // 遍歷全部nodes和links,產生node對映map for (let i = 0; i < graph.nodes.length; i++) {if (defaultCategory.includes(graph.nodes[i].category)) { currentGraph.nodes[graph.nodes[i].name] = graph.nodes[i]; const categoryName = graph.nodes[0].category for (let j = 0; j < graph.links.length; j++) { if (graph.links[j].source == categoryName) { currentGraph.links[graph.links[j].source+ "_" + graph.links[j].target] = graph.links[j] } } } nodeMap[graph.nodes[i].name] = graph.nodes[i]; nodeMap[graph.nodes[i].name]['links'] = {}; nodeMap[graph.nodes[i].name]['nodes'] = {}; nodeMap[graph.nodes[i].name]['hasAppend'] = false; } for (let i = 0; i < graph.links.length; i++) { let link = graph.links[i]; if (nodeMap[link.source] !== undefined && nodeMap[link.target] !== undefined) { nodeMap[link.source].links[link.target] = link; nodeMap[link.source].nodes[nodeMap[link.target].name] = nodeMap[link.target]; } } for (let i = 0; i < graph.nodes.length; i++) { graph.nodes[i].itemStyle = null; graph.nodes[i].label = { normal: { show: graph.nodes[i].symbolSize > 15 } }; } redrawGraph(); } // 處理點選節點展開 function append(nodeName) { // 根據nodeName從nodeMap裡拿出對應的nodes和links,並append到currentGraph.nodes currentGraph.linksvar node = nodeMap[nodeName]; if (node.hasAppend === true || Object.keys(node.nodes).length === 0 || Object.keys(node.links).length === 0) { message.info('無法繼續展開'); return } Object.values(node.nodes).forEach(n => { currentGraph.nodes[n.name] = n; }); Object.values(node.links).forEach(l => { currentGraph.links[l.source + "_" + l.target] = l; }); node.hasAppend = true; redrawGraph(); } // 處理點選節點收縮 function remove(nodeName) { //根據nodeName從nodeMap裡拿出對應的nodes和links,從currentGraph.nodes currentGraph.links刪除當前節點的nodes和links並且遞迴 let node = nodeMap[nodeName]; Object.values(node.nodes).forEach(n => { delete currentGraph.nodes[n.name]; if (n.hasAppend === true && Object.keys(n.nodes).length > 0) { remove(n.name); } }); Object.values(node.links).forEach(l => { delete currentGraph.links[l.source + '_' + l.target]; }); // 設定flag 等於false node.hasAppend = false; redrawGraph(); } // 根據更新後的option重新畫圖 function redrawGraph() { console.log(currentGraph,'123321') option.series[0].data = Object.values(currentGraph.nodes); option.series[0].links = Object.values(currentGraph.links); myChart.clear(); console.log(option,'9999999999') myChart.setOption(option); } function sizes(text){ if(text>=1024*1024*1024/10)return Math.round((text/1024/1024/1024).toFixed(2)*100)/100+'G' if(text>=1024*1024/10)return Math.round((text/1024/1024).toFixed(2)*100)/100+'M' if(text>=1024/10)return Math.round( (text/1024).toFixed(2)*100)/100+'KB' if(text<1024/10)return text+'B' } function sensitivity(text) { if (text == '3') return intl.get('Intl_supersensitive') if (text == '2') return intl.get('Intl_medium_sensitive') if (text == '1') return intl.get('Intl_low_sensitivity') } const option = { title: { top: 'top', left: 'center', }, tooltip: { formatter: function (datas) { const title = datas.value if(title){ return `${datas.marker}${intl.get("Intl_file_size")}:${sizes(title.fileSize)}<br/>${datas.marker}${intl.get("Intl_sensitivity")}:${sensitivity(title.level)}<br/>${datas.marker}${intl.get("Intl_transfer_number")}:${title.volume}`; } } }, legend: [], animation: false, series: [{ type: 'graph', layout: 'force', data: Object.values(currentGraph.nodes), links: Object.values(currentGraph.links), color: '#d1d1d1', categories: dataList, roam: true, focusNodeAdjacency: false, itemStyle: { normal: { borderColor: '#fff', borderWidth: 1, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.3)' } }, label: { formatter: '{b}' }, lineStyle: { color: 'target', opacity: 0.6, curveness: 0 }, emphasis: { lineStyle: { width: 10 } }, edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [4, 10], force: { layoutAnimation: false, repulsion: 500, edgeLength: 70, } }] }; init(); myChart.on('click', function (params) { if (params.dataType === "node") { let node = nodeMap[params.data.name]; if (node.hasAppend === true) { remove(node.name) } else { append(node.name); } } }); }