epmet-work-uni/subpages/house/pages/housePortrait/component/graph/graph.vue

<template>
    <!-- subpages/searchResult/pages/resiInfo/modules/graph/graph.wxml -->
    <view class="hotlineComplaints">
        <ec-canvas id="hotlineComplaints" canvas-id="hotlineComplaints" :ec="ec"></ec-canvas>
    </view>
</template>

<script>
import ecCanvas from '../../../../../../ec-canvas/ec-canvas';
import * as echarts from '../../../../../../static/echarts.js';
import { getFamilyRelationshipListByHouseId } from '../../../../../../utils/api';
var chart;
export default {
    components: {
        ecCanvas
    },
    data() {
        return {
            ec: {
                lazyLoad: true
                // onInit: initChart
            },

            tabList: [
                {
                    label: '问题突出类别',
                    value: 1
                },
                {
                    label: '行业领域分析',
                    value: 2
                }
            ],
            tabValue: 1
        };
    },
    props: {
        houseId: {
            type: String,
            default: ''
        },
        houseName: {
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {
            console.log(this.houseName, 'houseName');
            this.getData();
        },

        getData() {
            this.zpSelectComponent('#hotlineComplaints').init((canvas, width, height, dpr) => {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 像素比
                });

                let than = this;
                chart.on('click', function (param) {
                    if (param.dataType == 'node') {
                        than.$emit('clickGraphNode', {
                            detail: {
                                data: param.data.data
                            }
                        });
                    } else {
                    }
                });
                canvas.setChart(chart);
                let params = {
                    id: this.houseId
                };
                getFamilyRelationshipListByHouseId(params).then(({ data }) => {
                    data = data.filter((item) => item.id != this.houseId);
                    const rootNode = {};
                    rootNode['id'] = this.houseId;
                    rootNode['name'] = this.houseName;
                    rootNode['type'] = 1;
                    data.unshift(rootNode);
                    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'
                                        : '';
                            }
                        }
                        return {
                            name: item.name,
                            id: index + 1,
                            category: 0,
                            symbolSize: item.id == this.houseId ? 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.resiHouseRel === null ? '未知' : item.resiHouseRel === '0' ? '自住' : item.resiHouseRel === '1' ? '出租' : '未知',
                        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'
                        }
                    }));
                    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
                            }
                        ]
                    };
                    chart.setOption(option);
                });
                return chart;
            });
        }
    },
    created: function () {},
    watch: {
        houseId: {
            handler: function (val) {
                this.getData();
            },

            immediate: true
        }
    }
};
</script>
<style>
/* subpages/searchResult/pages/resiInfo/modules/graph/graph.wxss */
ec-canvas {
    width: 100%;
    height: 100%;
}
.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>