epmet-work-mp/subpages/searchResult/pages/resiInfo/component/graph/graph.js

import * as echarts from '../../../../../../ec-canvas/echarts';
import {
    getFamilyRelationshipList
} from "../../../../../../utils/api";
var chart;

const formatNumber = n => {
    n = n.toString()
    return n[1] ? n : '0' + n
}
Component({
    properties: {
        resiId: {
            type: String,
            value: '',
        }
    },
    data: {
        ec: {
            lazyLoad: true
            // onInit: initChart
        },
        tabList: [{
            label: "问题突出类别",
            value: 1
        }, {
            label: '行业领域分析',
            value: 2
        }],
        tabValue: 1
    },
    lifetimes: {
        ready() {
            this.getData()
        }
    },
    methods: {

        getData() {
            this.selectComponent('#hotlineComplaints').init((canvas, width, height, dpr) => {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 像素比
                });
                canvas.setChart(chart);
                let params = {
                    type: "0",
                    id: this.data.resiId
                }

                getFamilyRelationshipList(params).then(({
                    data
                }) => {
                    let resiName = data.filter(item=>item.id === this.data.resiId)[0].name
                    let nodeList = data.map((item, index) => ({
                        'name': item.name,
                        'id':index+1,
                        'category':0,
                        'symbolSize': item.id == this.data.resiId ? 50 : 30,
                        'symbol':item.type == 1?'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/a6cdfe6f699040f58fd8b2c10486b41d.png': item.houseHolderRel == '丈夫' ? 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/1e21790833b04e9abe61e2a8f40446cb.png' : 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/1e21790833b04e9abe61e2a8f40446cb.png',
                        // 'data': {
                        //     id: item.id,
                        //     type: item.type,
                        //     name: item.name
                        // },
                    }))
                    let links = data.map((item, index) => ({
                        "source": 0,
                        "target": index+1,
                        "name": item.houseHolderRel||'暂不清楚',
                        "label": {
                            "align": "center",
                            "fontSize": 12
                        },
                        "lineStyle": {
                            "color": "#ff7d18"
                        }
                    }))
                    links.splice(links.length-1,1)
                    let categories = data.map((item, index) => ({
                        "name":item.houseHolderRel||'暂不清楚',
                        "id":index+1,
                        "itemStyle": {
                            "color": 'red'
                        },
                        "lineStyle": {
                            "color": "#ff7d18"
                        }
                    }))
                    console.log(nodeList,links,categories);
                    console.log(JSON.stringify(nodeList));
                    console.log(JSON.stringify(links));
                    console.log(JSON.stringify(categories));

                    var option = {

                        legend: [{
                            // selectedMode: 'single',
                            // icon: 'circle'
                            show: false
                        }],
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            symbolSize: 10,
                            draggable: true,
                            roam: false,
                            focusNodeAdjacency: false,
                            categories: categories,
                              edgeSymbol: ['', 'arrow'],
                            // edgeSymbolSize: [80, 10],
                            edgeLabel: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 20
                                    },
                                    formatter(x) {
                                        return x.data.name;
                                    }
                                }
                            },
                            label: {
                                show: true
                            },
                            force: {
                                repulsion: 2000,
                                edgeLength: 120
                            },
                            data: nodeList,
                            links: links
                        }]
                    };
                    chart.setOption(option);
                })
                return chart;
            });
        }
    }
});