You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
7.4 KiB
182 lines
7.4 KiB
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: {
|
|
houseId: {
|
|
type: String,
|
|
value: '',
|
|
},
|
|
houseName:{
|
|
type: String,
|
|
value: '',
|
|
}
|
|
},
|
|
data: {
|
|
ec: {
|
|
lazyLoad: true
|
|
// onInit: initChart
|
|
},
|
|
tabList: [{
|
|
label: "问题突出类别",
|
|
value: 1
|
|
}, {
|
|
label: '行业领域分析',
|
|
value: 2
|
|
}],
|
|
tabValue: 1
|
|
},
|
|
lifetimes: {
|
|
ready() {
|
|
console.log(this.data.houseName,'houseName');
|
|
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: "1",
|
|
id: this.data.houseId
|
|
}
|
|
|
|
getFamilyRelationshipList(params).then(({
|
|
data
|
|
}) => {
|
|
const rootNode = {};
|
|
rootNode["id"] = this.data.houseId;
|
|
rootNode["name"] = this.data.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.data.houseId ? 50 : 30,
|
|
'symbol': symbolUrl,
|
|
label: {
|
|
"position": "bottom"
|
|
}
|
|
};
|
|
});
|
|
|
|
let links = data.map((item, index) => ({
|
|
"source": 0,
|
|
"target": index+1,
|
|
"name": item.houseHolderRel||'暂不清楚',
|
|
"label": {
|
|
"align": "center",
|
|
"fontSize": 12,
|
|
"color":"#9cbbf9"
|
|
},
|
|
"lineStyle": {
|
|
"color": "#9cbbf9"
|
|
}
|
|
}))
|
|
links.splice(links.length-1,1)
|
|
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;
|
|
});
|
|
}
|
|
}
|
|
});
|