vue2 RelationGraph 人物关系 & 筛选 图片不显示

官网链接：relation-graph - A Relationship Graph Component

修改效果：

<template>
    <div>
        <div style="margin-top:0px;width: calc(100% - 10px);height:calc(100vh);">
            <RelationGraph ref="graphRef" :options="graphOptions">
                <!-- <template #node="{ node }">
                    <div class="my-node-style" :style="{ 'background-image': 'url(' + node.data.icon + ')' }">
                    </div>
                    <div class="c-node-name" :style="{ color: node.color }">{{ node.text }}</div>
                </template> -->
                <template #graph-plug>
                    <div
                        style="position:absolute;z-index:700;left:20px;top:20px;height:110px;padding-top:6px;padding-left: 30px;padding-right:30px;border: #efefef solid 1px;color: #555555;border-radius: 10px;background-color: rgba(255,255,255,0.79);font-size: 12px;">
                        <div style="">
                            <div style="line-height: 20px;">节点筛选：</div>
                            <el-radio-group v-model="checked_sex" size="mini" @change="doFilter">
                                <el-radio-button label="">全部</el-radio-button>
                                <el-radio-button label="男"></el-radio-button>
                                <el-radio-button label="女"></el-radio-button>
                            </el-radio-group>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <el-radio-group v-model="checked_isgoodman" size="mini" style="margin-left:50px;"
                                @change="doFilter">
                                <el-radio-button label="">全部</el-radio-button>
                                <el-radio-button :label="true">正面人物</el-radio-button>
                                <el-radio-button :label="false">反面人物</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div>
                            <div style="line-height: 20px;">关系筛选：</div>
                            <el-checkbox-group v-model="rel_checkList" @change="doFilter">
                                <el-checkbox v-for="thisItem in all_rel_type" :key="thisItem" :label="thisItem" />
                            </el-checkbox-group>
                        </div>
                    </div>
                </template>
            </RelationGraph>
        </div>

    </div>
</template>

<script>
import RelationGraph from 'relation-graph';
import demoData from './Demo4AdvDataFilterData.json';
const graphOptions = {
    debug: false,
    defaultNodeBorderWidth: 0,
    defaultNodeColor: 'rgba(238, 178, 94, 1)',
    allowSwitchLineShape: true,
    allowSwitchJunctionPoint: true,
    defaultLineShape: 1,
    layout:
    {
        label: '自动布局',
        layoutName: 'force',
        layoutClassName: 'seeks-layout-force'
    },
    defaultJunctionPoint: 'border'

    // 这里可以参考"Graph 图谱"中的参数进行设置
};
export default {
    name: 'RelationGraphDemo',
    components: { RelationGraph },
    data() {
        return {
            g_loading: true,
            demoname: '---',
            checked_sex: '',
            checked_isgoodman: '',
            rel_checkList: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
            all_rel_type: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
            graphOptions
        };
    },
    created() {
    },
    mounted() {
        this.setGraphData();
    },
    methods: {
        setGraphData() {
            demoData.nodes.forEach(node => {
                node.innerHTML = `<div class="c-my-node" style="background-image: url(${node.data.icon}); 
                 background-size: 100%;height: 80px;width: 80px; border-radius: 40px;
                  border: 3px solid ${node.borderColor};">
                  <div class="c-node-name" style="color: ${node.borderColor};">${node.text}</div></div>`;
            });
            const __graph_json_data = demoData
            this.$refs.graphRef.setJsonData(__graph_json_data, (graphInstance) => {
            });
        },
        doFilter() {
            const _all_nodes = this.$refs.graphRef.getInstance().getNodes();
            const _all_links = this.$refs.graphRef.getInstance().getLinks();
            _all_nodes.forEach(thisNode => {
                let _isHideThisLine = false;
                if (this.checked_sex !== '') {
                    if (thisNode.data['sexType'] !== this.checked_sex) {
                        _isHideThisLine = true;
                    }
                }
                if (this.checked_isgoodman !== '') {
                    if (thisNode.data['isGoodMan'] !== this.checked_isgoodman) {
                        _isHideThisLine = true;
                    }
                }
                thisNode.opacity = _isHideThisLine ? 0.1 : 1;
            });
            _all_links.forEach(thisLink => {
                thisLink.relations.forEach(thisLine => {
                    if (this.rel_checkList.indexOf(thisLine.data['type']) === -1) {
                        if (!thisLine.isHide) {
                            thisLine.isHide = true;
                            console.log('Hide line:', thisLine);
                        }
                    } else {
                        if (thisLine.isHide) {
                            thisLine.isHide = false;
                            console.log('Show line:', thisLine);
                        }
                    }
                });
                // thisNode.opacity = _isShowThisNode ? 1 : 0.1
            });
            this.$refs.graphRef.getInstance().dataUpdated();
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.c-my-node {
    background-position: center center;
    background-size: 100%;
    height: 80px;
    width: 80px;
    border-radius: 40px;
    border: #ff8c00 solid 2px;
}




.c-node-name {
    width: 160px;
    margin-left: -40px;
    text-align: center;
    margin-top: 85px;
}
</style>