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);
                }
            }
        });
    }

 

posted @ 2020-08-28 15:00  a茶色  阅读(509)  评论(0编辑  收藏  举报