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