epmet-work-uni/subpages/searchResult/pages/resiInfo/component/graph/graph.vue

<template>
    <!-- subpages/searchResult/pages/resiInfo/modules/graph/graph.wxml -->
    <view class="hotlineComplaints">
        <view id="graph" style=" height: 338rpx; width: 100%;"></view>
    </view>
</template>

<script>
import * as echarts from 'echarts';
import { getFamilyRelationshipList } from '../../../../../../utils/api';
export default {
    components: {

    },
    data() {
        return {
            myChart: null,
        };
    },
    props: {
        resiId: {
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        initEcharts() {
            var chartDom = document.getElementById('graph');
            // 将创建的echarts示例放到vue的data中，这样在这个界面就想到于全局配置了
            this.myChart = echarts.init(chartDom);
        },
        ready() {
            this.getData();
            this.initEcharts();
        },

        getData() {

            let params = {
                type: '0',
                id: this.resiId
            };
            getFamilyRelationshipList(params).then(({ data }) => {
                let index = data.findIndex((item) => item.id == this.resiId);
                if (index !== -1) {
                    const [item] = data.splice(index, 1);
                    data.unshift(item);
                }
                let nodeList = data.map((item, index) => {
                    let symbolUrl = '';
                    if (item.type === 1) {
                        symbolUrl = 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/a6cdfe6f699040f58fd8b2c10486b41d.png';
                    } else {
                        // 如果 type 不等于 1，则根据 gender 进行判断
                        if (item.gender === '1') {
                            // 如果 gender 等于 1，则根据 age 进行进一步的判断
                            symbolUrl =
                                item.age > 18 && item.age < 60
                                    ? 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/1e21790833b04e9abe61e2a8f40446cb.png'
                                    : item.age < 18
                                        ? 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/62c2b6a1ce834f8dae081b562b2579b9.png'
                                        : item.age > 60
                                            ? 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/bd586a4e7d0f4b3aa68c79067dfe1428.png'
                                            : '';
                        } else if (item.gender === '2') {
                            // 如果 gender 等于 2，则根据 age 进行进一步的判断
                            symbolUrl =
                                item.age > 18 && item.age < 60
                                    ? 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/3b44e3495dcd4d96a3c07baad1bd7c5e.png'
                                    : item.age < 18
                                        ? 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/0c38251bba644a6b8e4a925aea74c9a7.png'
                                        : item.age > 60
                                            ? 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/2465ff7633a94413bf4ed2aa778c2765.png'
                                            : '';
                        } else {
                            symbolUrl = 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/1e21790833b04e9abe61e2a8f40446cb.png';
                        }
                    }
                    return {
                        name: item.name,
                        id: index + 1,
                        category: 0,
                        symbolSize: item.id == this.resiId ? 50 : 30,
                        symbol: symbolUrl,
                        label: {
                            position: 'bottom'
                        },
                        data: {
                            type: item.type,
                            id: item.id
                        }
                    };
                });
                let links = data.map((item, index) => ({
                    source: 0,
                    target: index,
                    name: item.houseHolderRel || '未知',
                    label: {
                        align: 'center',
                        fontSize: 12,
                        color: '#9cbbf9'
                    },
                    lineStyle: {
                        color: '#9cbbf9'
                    }
                }));
                let categories = data.map((item, index) => ({
                    name: item.houseHolderRel || '未知',
                    id: index + 1,
                    itemStyle: {
                        color: '#9cbbf9'
                    }
                }));
                categories.splice(0, 1);
                var option = {
                    legend: [
                        {
                            // selectedMode: 'single',
                            // icon: 'circle'
                            show: false
                        }
                    ],
                    series: [
                        {
                            type: 'graph',
                            layout: 'force',
                            // symbolSize: 10,
                            force: {
                                repulsion: 80,
                                gravity: 0,
                                edgeLength: 100,
                                //线条长度
                                layoutAnimation: true
                            },
                            draggable: true,
                            roam: false,
                            nodeScaleRatio: 0,
                            focusNodeAdjacency: false,
                            lineStyle: {
                                normal: {
                                    opacity: 0.5,
                                    width: 1.5,
                                    curveness: 0
                                }
                            },
                            categories: categories,
                            edgeSymbol: ['', 'arrow'],
                            // edgeSymbolSize: [80, 10],
                            edgeLabel: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 20
                                    },
                                    formatter(x) {
                                        return x.data.name;
                                    }
                                }
                            },
                            label: {
                                show: true
                            },
                            data: nodeList,
                            links: links
                        }
                    ]
                };
                if (option) {
                    let than = this;
                    this.myChart.on('click', function (param) {
                        if (param.dataType == 'node') {
                            than.$emit('clickGraphNode', {
                                detail: {
                                    data: param.data.data
                                }
                            });
                        } else {
                        }
                    });
                    this.myChart.setOption(option);
                }
            });
        }
    },
    created: function () { },
    watch: {
        resiId: {
            handler: function (val) {
                this.getData();
            },

            immediate: true
        }
    }
};
</script>
<style scoped>
/* subpages/searchResult/pages/resiInfo/modules/graph/graph.wxss */
.hotlineComplaints {
    width: 100%;
    height: 618rpx;
    position: relative;
}

.hotlineComplaints image {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}
</style>