/**
|
* 环境风险统计图
|
*/
|
// 请求接口数据
|
const mapApi = require('../../../api/mapApi').default
|
// 使用封装方法
|
const AnimalService = require('../service/AnimalService').default
|
// 引入echarts基本组件
|
const echarts = require('echarts/lib/echarts')
|
|
module.exports = function () {
|
// 环形统计图数组
|
let riskLayerGroup = null
|
|
/**
|
* 初始化图层数组
|
* @param L leaflet对象
|
*/
|
this.init = async (layer, L) => {
|
this.animalService = new AnimalService({
|
L: L,
|
layer: layer
|
})
|
}
|
|
/**
|
* 加载图层
|
* @returns {Promise<void>}
|
*/
|
this.start = async () => {
|
if (riskLayerGroup) { // 图层全选时，清理图层数组并重新加载
|
riskLayerGroup.remove()
|
riskLayerGroup = null
|
}
|
riskLayerGroup = this.animalService.L.featureGroup().addTo(this.animalService.layer)
|
const result = await mapApi.getEnvironmentRisk()
|
const features = result.features
|
for (let i = 0; i < features.length; i++) {
|
const feature = features[i]
|
const geometry = feature.geometry
|
const properties = feature.properties
|
const qyId = properties.QY_ID
|
const distract = properties.DISTRACT
|
const coordinates = geometry.coordinates
|
if (distract !== '长江沿线') {
|
continue
|
}
|
this.animalService.L.marker([coordinates[1], coordinates[0]], {
|
icon: this.animalService.L.divIcon({
|
className: '',
|
iconAnchor: [15, 45],
|
iconSize: [40, 40],
|
html: '<div style="width: 40px; height: 40px; background-color: rgba(255,255,255,1); position: relative; border-radius: 50%;"></div>'
|
})
|
}).addTo(riskLayerGroup)
|
this.animalService.L.marker([coordinates[1], coordinates[0]], {
|
icon: this.animalService.L.divIcon({
|
className: '',
|
iconAnchor: [30, 60],
|
iconSize: [70, 70],
|
html: '<div id="qy_id_' + qyId + '" style="width: 70px; height: 70px; background-color: transparent; position: relative; border-radius: 50%;"></div>'
|
})
|
}).addTo(riskLayerGroup)
|
chartRender(properties)
|
}
|
}
|
|
/**
|
* 清除图层
|
*/
|
this.destory = () => {
|
if (riskLayerGroup) {
|
riskLayerGroup.remove()
|
riskLayerGroup = null
|
}
|
}
|
|
/**
|
* Echarts环形饼图
|
* @param properties
|
*/
|
function chartRender (properties) {
|
const qyId = properties.QY_ID
|
const qyjc = properties.QY_JC
|
const num = properties.QY_NUM
|
const oneLevel = properties.QY_ONELEVEL
|
const twoLevel = properties.QY_TWOLEVEL
|
const threeLevel = properties.QY_THREELEVEL
|
const o = echarts.init(document.getElementById('qy_id_' + qyId))
|
const option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: function (e) {
|
return '<div style="background-color: #0c5460; padding: 5px;">' +
|
'<div style="color: #63EEF5; font-size: 18px; font-weight: 500; text-align: center">' + qyjc + '</div>' +
|
'<div>一级风险：<span style="color: red">' + oneLevel + '个</span></div>' +
|
'<div>二级风险：<span style="color: yellow">' + twoLevel + '个</span></div>' +
|
'<div>三级风险：<span style="color: lawngreen">' + threeLevel + '个</span></div>' +
|
'</div>'
|
}
|
},
|
color: ['red', 'yellow', 'lawngreen'], // 设置饼图各块颜色
|
graphic: [ // 为环形图中间添加文字
|
{
|
type: 'text',
|
left: 'center',
|
top: '43%', // 设置环形文字的top位置
|
style: {
|
text: num,
|
textAlign: 'center',
|
fill: '#000',
|
fontSize: 12
|
}
|
}],
|
series: [{
|
name: qyjc,
|
type: 'pie',
|
radius: ['35%', '65%'],
|
label: {
|
normal: {
|
show: false,
|
position: 'center',
|
formatter: function (t) {
|
return num
|
},
|
textStyle: {
|
fontSize: 12,
|
color: '#000000'
|
}
|
}
|
},
|
data: [{
|
value: oneLevel,
|
name: '一级风险'
|
}, {
|
value: twoLevel,
|
name: '二级风险'
|
}, {
|
value: threeLevel,
|
name: '三级风险'
|
}]
|
}]
|
}
|
o.setOption(option)
|
}
|
}
|
