echarts关系图多次调接口问题
使用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); } } }); }