4 changed files with 219 additions and 0 deletions
@ -0,0 +1,189 @@ |
|||
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 |
|||
}) => { |
|||
// let index = data.findIndex(item => item.id == this.data.houseId);
|
|||
// if (index !== -1) {
|
|||
// const [item] = data.splice(index, 1);
|
|||
// data.unshift(item);
|
|||
// }
|
|||
|
|||
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' |
|||
}, |
|||
})) |
|||
|
|||
console.log(nodeList,links,categories); |
|||
|
|||
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; |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"ec-canvas": "../../../../../../ec-canvas/ec-canvas" |
|||
} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
<!--subpages/searchResult/pages/resiInfo/modules/graph/graph.wxml--> |
|||
<view class="hotlineComplaints"> |
|||
<ec-canvas id="hotlineComplaints" canvas-id="hotlineComplaints" ec="{{ ec }}"></ec-canvas> |
|||
</view> |
|||
@ -0,0 +1,20 @@ |
|||
/* 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%); |
|||
} |
|||
Loading…
Reference in new issue