Skip to content

C
civil-front
Commit 0ed15335 by 苏咏卓
Options

更新地图

parent cedaec7b
Showing with 725 additions and 90 deletions
src/api/unified/unified.js
......@@ -204,3 +204,12 @@ export const getAreaNursingStatsList = data => {
})
}
/** -------------------- 地图 -------------------- **/
//获取地图数据
export const getMapData = (areaId) =>{
return request({
url:`portal/static/map/${areaId}.json`,
method: 'get'
})
}
\ No newline at end of file
src/views/unified/tapSwitch/marriage.vue
......@@ -60,7 +60,13 @@
<!-- 中 -->
<el-col :span="12">
<el-row :gutter="20">
<el-col :span="24"><div class="wians"></div> </el-col>
<el-col :span="24"
><div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="marriageMap" id="marriageMap"></div>
</div>
</el-col>
</el-row>
<br />
<el-row :gutter="20">
......@@ -117,11 +123,13 @@ import * as echarts from "echarts";
import {
getFivesYearMarriageLine,
getMarriageStats,
getAreaUnderMarriageStatsList
getAreaUnderMarriageStatsList,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
num: 0,
tableData: [
{
date: "1",
......@@ -136,35 +144,172 @@ export default {
],
marriageLine: {},
marriageStats: {},
areaUnderMarriageStatsList:{}
areaUnderMarriageStatsList: {},
};
},
created() {
this.getFivesYearMarriageLineFun();
this.getMarriageStatsFun();
this.getAreaUnderMarriageStatsListFun()
this.getAreaUnderMarriageStatsListFun();
this.getMapData("g450000"); //默认展示广西 g450000
},
methods: {
getFivesYearMarriageLineFun() {
getFivesYearMarriageLine({}).then((res) => {
getFivesYearMarriageLineFun(data) {
getFivesYearMarriageLine({
areaCode: data,
}).then((res) => {
console.log(res, "获取近5年结婚走势");
this.marriageLine = res.data.admin;
this.mainInfo(res.data.admin);
});
},
getMarriageStatsFun() {
getMarriageStats({}).then((res) => {
getMarriageStatsFun(data) {
getMarriageStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取结婚离婚人数");
this.marriageStats = res.data;
});
},
getAreaUnderMarriageStatsListFun(){
getAreaUnderMarriageStatsList({}).then(res =>{
console.log(res,'获取地区结婚离婚人数列表')
this.areaUnderMarriageStatsList = res.data
})
getAreaUnderMarriageStatsListFun(data) {
getAreaUnderMarriageStatsList({
areaCode: data,
}).then((res) => {
console.log(res, "获取地区结婚离婚人数列表");
this.areaUnderMarriageStatsList = res.data;
this.annualStatisticsFun();
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.marriageMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getFivesYearMarriageLineFun("450000");
this.getMarriageStatsFun("450000");
this.getAreaUnderMarriageStatsListFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
marriageMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("marriageMap"));
echarts.registerMap("GX", mapList);
map.setOption({
tooltip: {
trigger: "item",
// formatter: '{b}<br/>{c}%(完成数 / 指标数)'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
//text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
//name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#fff" },
borderWidth: 1, //区域边框宽度
borderColor: "#fff", //区域边框颜色
areaColor: "#0070BC", //默认区域颜色
},
emphasis: {
show: true,
areaColor: "#3066ba", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
this.num++;
console.log(this.num, "点击数字,2不执行");
if (this.num >= 2) {
//不执行
} else {
console.log("点击取值", res);
console.log("地图数组", mapList.features);
console.log("地区下标", res.dataIndex);
console.log("区域信息", mapList.features[res.dataIndex].properties);
console.log(
"区域信息地区码",
mapList.features[res.dataIndex].properties.adcode
);
this.getMapData(
"g" + mapList.features[res.dataIndex].properties.adcode
);
this.getFivesYearMarriageLineFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getMarriageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaUnderMarriageStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
//婚姻5年趋势
......@@ -537,6 +682,12 @@ export default {
margin-left: 20px;
}
.marriageMap {
width: 100%;
height: 500px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 400px;
......
src/views/unified/tapSwitch/mechanism.vue
......@@ -30,7 +30,11 @@
<el-col :span="18">
<el-row :gutter="20">
<el-col :span="16">
<div class="wians"></div>
<div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="mechanismMap" id="mechanismMap"></div>
</div>
</el-col>
<el-col :span="8">
......@@ -42,9 +46,9 @@
:data="tableData"
stripe
height="400"
:header-cell-style="{ background: '#042465', color: '#fff'}"
:cell-style="{ background: '#022872', color: '#fff'}"
style="width: 300px;margib-left:10px"
:header-cell-style="{ background: '#042465', color: '#fff' }"
:cell-style="{ background: '#022872', color: '#fff' }"
style="width: 300px; margib-left: 10px"
>
<el-table-column prop="date" label="排名" align="center">
</el-table-column>
......@@ -54,7 +58,6 @@
</el-table-column>
</el-table>
</div>
</div>
</el-col>
......@@ -103,10 +106,17 @@
<script>
import * as echarts from "echarts";
import { getSoorganStats,getAreaUnderSoorganStatsList,getAreaNursingStatsList,getAgencyPercentageStats } from "@/api/unified/unified";
import {
getSoorganStats,
getAreaUnderSoorganStatsList,
getAreaNursingStatsList,
getAgencyPercentageStats,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
num: 0,
tableData: [
{
date: "1",
......@@ -171,42 +181,53 @@ export default {
},
],
soorganStats: {},
areaUnderSoorganStatsList:{},
areaNursingStatsList:{},
agencyPercentageStats:[],
areaUnderSoorganStatsList: {},
areaNursingStatsList: {},
agencyPercentageStats: [],
welfareHomeName: [],
};
},
created() {
this.getSoorganStatsFun();
this.getAreaUnderSoorganStatsListFun()
this.getAreaNursingStatsListFun()
this.getAgencyPercentageStatsFun()
this.getAreaUnderSoorganStatsListFun();
this.getAreaNursingStatsListFun();
this.getAgencyPercentageStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
},
methods: {
getSoorganStatsFun() {
getSoorganStats({}).then((res) => {
getSoorganStatsFun(data) {
getSoorganStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取社会机构统计");
this.soorganStats = res.data;
});
},
getAreaUnderSoorganStatsListFun(){
getAreaUnderSoorganStatsList({}).then(res =>{
console.log(res,'获取地区下面社会机构统计列表')
this.areaUnderSoorganStatsList = res.data
})
getAreaUnderSoorganStatsListFun(data) {
getAreaUnderSoorganStatsList({
areaCode: data,
}).then((res) => {
console.log(res, "获取地区下面社会机构统计列表");
this.areaUnderSoorganStatsList = res.data;
this.sociologyFun();
});
},
getAreaNursingStatsListFun(){
getAreaNursingStatsList({}).then(res =>{
console.log(res,'获取区域养老院统计列表')
this.areaNursingStatsList = res.data
})
getAreaNursingStatsListFun(data) {
getAreaNursingStatsList({
areaCode: data,
}).then((res) => {
console.log(res, "获取区域养老院统计列表");
this.areaNursingStatsList = res.data;
this.pensionFun();
});
},
getAgencyPercentageStatsFun() {
getAgencyPercentageStats({}).then((res) => {
getAgencyPercentageStatsFun(data) {
getAgencyPercentageStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取区域机构占比");
this.agencyPercentageStats = res.data;
res.data.forEach((item) => {
......@@ -217,6 +238,139 @@ export default {
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.mechanismMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getSoorganStatsFun("450000");
this.getAreaUnderSoorganStatsListFun("450000");
this.getAreaNursingStatsListFun("450000");
this.getAgencyPercentageStatsFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
mechanismMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("mechanismMap"));
echarts.registerMap("GX", mapList);
map.setOption({
tooltip: {
trigger: "item",
// formatter: '{b}<br/>{c}%(完成数 / 指标数)'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
//text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
//name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#fff" },
borderWidth: 1, //区域边框宽度
borderColor: "#fff", //区域边框颜色
areaColor: "#0070BC", //默认区域颜色
},
emphasis: {
show: true,
areaColor: "#3066ba", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
this.num++;
console.log(this.num, "点击数字,2不执行");
if (this.num >= 2) {
//不执行
} else {
console.log("点击取值", res);
console.log("地图数组", mapList.features);
console.log("地区下标", res.dataIndex);
console.log("区域信息", mapList.features[res.dataIndex].properties);
console.log(
"区域信息地区码",
mapList.features[res.dataIndex].properties.adcode
);
this.getMapData(
"g" + mapList.features[res.dataIndex].properties.adcode
);
this.getSoorganStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaUnderSoorganStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaNursingStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAgencyPercentageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
//社会组织柱形图
sociologyFun() {
var chartDom = document.getElementById("sociology");
......@@ -568,10 +722,7 @@ export default {
},
},
mounted() {
setTimeout(() => {
this.sociologyFun();
this.pensionFun();
}, 1000);
setTimeout(() => {}, 1000);
},
};
</script>
......@@ -580,12 +731,12 @@ export default {
.el-table th {
overflow: hidden;
background-color: #082C61;
background-color: #082c61;
}
.el-table--small {
background-color: #082C61;
background-color: #082c61;
}
::v-deep{
::v-deep {
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 3px;
......@@ -600,7 +751,7 @@ export default {
z-index: 99;
width: 300px;
overflow: hidden;
margin:auto;
margin: auto;
}
.classification {
......@@ -617,7 +768,7 @@ export default {
.numText {
font-size: 20px;
color: #3A92F1;
color: #3a92f1;
text-align: center;
}
.sociology {
......@@ -664,6 +815,12 @@ export default {
display: flex;
}
.mechanismMap {
width: 100%;
height: 500px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 400px;
......
src/views/unified/tapSwitch/population.vue
......@@ -71,7 +71,13 @@
<!-- 中 -->
<el-col :span="12">
<el-row :gutter="20">
<el-col :span="24"><div class="wians"></div> </el-col>
<el-col :span="24"
><div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="populationMap" id="populationMap"></div>
</div>
</el-col>
</el-row>
<br />
<el-row :gutter="20">
......@@ -93,13 +99,17 @@
<el-row :gutter="20">
<el-col :span="12">
<div class="rescue">
<div class="size24">{{ threeYeartTotalData.cityToatlNum }}</div>
<div class="size24">
{{ threeYeartTotalData.cityToatlNum }}
</div>
<div class="size16">城市</div>
</div>
</el-col>
<el-col :span="12">
<div class="rescue">
<div class="size24">{{ threeYeartTotalData.villageToatlNum }}</div>
<div class="size24">
{{ threeYeartTotalData.villageToatlNum }}
</div>
<div class="size16">农村</div>
</div>
</el-col>
......@@ -133,16 +143,18 @@ import {
getMarriageStats,
getAgencyChildStatsList,
getThreeYearShjzAchieveStats,
getAreaDisabledIssueStats
getAreaDisabledIssueStats,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
num:0,
marriageLine: {},
marriageStats: {},
threeYearShjzAchieveStats: {},
threeYeartTotalData: {},
areaDisabledIssueStats:{}
areaDisabledIssueStats: {},
};
},
created() {
......@@ -150,33 +162,44 @@ export default {
this.getMarriageStatsFun();
this.getAgencyChildStatsListFun();
this.getThreeYearShjzAchieveStatsFun();
this.getAreaDisabledIssueStatsFun()
this.getAreaDisabledIssueStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
},
methods: {
getFivesYearMarriageLineFun() {
getFivesYearMarriageLine({}).then((res) => {
getFivesYearMarriageLineFun(data) {
console.log(data);
getFivesYearMarriageLine({
areaCode: data,
}).then((res) => {
console.log(res, "获取近5年结婚走势");
this.marriageLine = res.data.admin;
this.mainInfo(res.data.admin);
});
},
getMarriageStatsFun() {
getMarriageStats({}).then((res) => {
getMarriageStatsFun(data) {
getMarriageStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取结婚离婚人数");
this.marriageStats = res.data;
});
},
getAgencyChildStatsListFun() {
getAgencyChildStatsList({}).then((res) => {
getAgencyChildStatsListFun(data) {
getAgencyChildStatsList({
areaCode: data,
}).then((res) => {
console.log(res, "儿童福利统计");
this.agencyChildStatsList = res.data;
this.orphanFun()
});
},
getThreeYearShjzAchieveStatsFun() {
getThreeYearShjzAchieveStats({}).then((res) => {
getThreeYearShjzAchieveStatsFun(data) {
getThreeYearShjzAchieveStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取近三年城市农村低保发放人数统计");
this.threeYearShjzAchieveStats = res.data.admin;
this.threeYeartTotalData = res.data.totalData;
......@@ -184,14 +207,152 @@ export default {
});
},
getAreaDisabledIssueStatsFun(){
getAreaDisabledIssueStatsFun(data) {
getAreaDisabledIssueStats({
year:2021
}).then(res =>{
console.log(res,'残疾人两项补贴')
this.areaDisabledIssueStats = res.data
this.annualStatisticsFun(res.data)
})
year: 2021,
areaCode: data,
}).then((res) => {
console.log(res, "残疾人两项补贴");
this.areaDisabledIssueStats = res.data;
this.annualStatisticsFun(res.data);
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.populationMap([], res);
});
},
returnInfo() {
this.num = 0
this.getMapData("g450000");
this.getFivesYearMarriageLineFun("450000");
this.getMarriageStatsFun("450000");
this.getAgencyChildStatsListFun("450000");
this.getThreeYearShjzAchieveStatsFun("450000");
this.getAreaDisabledIssueStatsFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
populationMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("populationMap"));
echarts.registerMap("GX", mapList);
map.setOption({
tooltip: {
trigger: "item",
// formatter: '{b}<br/>{c}%(完成数 / 指标数)'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
//text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
//name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#fff" },
borderWidth: 1, //区域边框宽度
borderColor: "#fff", //区域边框颜色
areaColor: "#0070BC", //默认区域颜色
},
emphasis: {
show: true,
areaColor: "#3066ba", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
this.num++;
console.log(this.num,'点击数字,2不执行');
if (this.num >= 2) {
//不执行
} else {
console.log("点击取值", res);
console.log("地图数组", mapList.features);
console.log("地区下标", res.dataIndex);
console.log("区域信息", mapList.features[res.dataIndex].properties);
console.log(
"区域信息地区码",
mapList.features[res.dataIndex].properties.adcode
);
this.getMapData(
"g" + mapList.features[res.dataIndex].properties.adcode
);
this.getFivesYearMarriageLineFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getMarriageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAgencyChildStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getThreeYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaDisabledIssueStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
//儿童福利统计
......@@ -559,7 +720,7 @@ export default {
},
// 残疾人两项补贴
annualStatisticsFun(data) {
console.log(data)
console.log(data);
var chartDom = document.getElementById("annualStatistics");
var myChart = echarts.init(chartDom, "dark");
var option;
......@@ -669,7 +830,7 @@ export default {
},
},
legend: {
data: ['贫困残疾人','重度残疾人'],
data: ["贫困残疾人", "重度残疾人"],
},
toolbox: {
show: true,
......@@ -793,11 +954,11 @@ export default {
}
.size24Info {
font-size: 24px;
color: #C1BDBD;
color: #c1bdbd;
}
.size16Info {
font-size: 16;
color: #C1BDBD;
color: #c1bdbd;
}
.rescue {
text-align: center;
......@@ -842,6 +1003,12 @@ export default {
display: flex;
}
.populationMap {
width: 100%;
height: 500px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 400px;
......
src/views/unified/tapSwitch/socialAssistance.vue
......@@ -75,7 +75,13 @@
<!-- 中 -->
<el-col :span="12">
<el-row :gutter="20">
<el-col :span="24"><div class="wians"></div> </el-col>
<el-col :span="24"
><div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="socialAssistanceMap" id="socialAssistanceMap"></div>
</div>
</el-col>
</el-row>
<br />
<el-row :gutter="20">
......@@ -126,10 +132,12 @@ import {
getThreeYearShjzProvideStats,
getFivesYearShjzAchieveStats,
getAreaYearShjzAchieveStats,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
num: 0,
tableData: [
{
date: "2016-05-02",
......@@ -146,7 +154,7 @@ export default {
threeYearShjzProvideStats: {},
fivesYearShjzAchieveStats: {},
areaYearShjzAchieveStats: {},
cityNames:[],
cityNames: [],
cityAndvillagePeople: {}, // 五年享受低保资金人数
cityAndvillageNum: {}, // 五年享受低保资金总数
};
......@@ -156,10 +164,13 @@ export default {
this.getThreeYearShjzProvideStatsFun();
this.getFivesYearShjzAchieveStatsFun();
this.getAreaYearShjzAchieveStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
},
methods: {
getThreeYearShjzAchieveStatsFun() {
getThreeYearShjzAchieveStats({}).then((res) => {
getThreeYearShjzAchieveStatsFun(data) {
getThreeYearShjzAchieveStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取近三年城市农村低保发放人数统计");
this.threeYearShjzAchieveStats = res.data.admin;
this.cityAndvillagePeople = res.data.totalData;
......@@ -167,8 +178,8 @@ export default {
});
},
getThreeYearShjzProvideStatsFun() {
getThreeYearShjzProvideStats({}).then((res) => {
getThreeYearShjzProvideStatsFun(data) {
getThreeYearShjzProvideStats({ areaCode: data }).then((res) => {
console.log(res, "获取近三年城市农村低保发放金额统计");
this.threeYearShjzProvideStats = res.data.admin;
this.cityAndvillageNum = res.data.totalData;
......@@ -176,24 +187,157 @@ export default {
});
},
getFivesYearShjzAchieveStatsFun() {
getFivesYearShjzAchieveStats({}).then((res) => {
getFivesYearShjzAchieveStatsFun(data) {
getFivesYearShjzAchieveStats({ areaCode: data }).then((res) => {
console.log(res, "农村城市低保人数统计");
this.fivesYearShjzAchieveStats = res.data.admin;
});
},
getAreaYearShjzAchieveStatsFun() {
getAreaYearShjzAchieveStats({}).then((res) => {
getAreaYearShjzAchieveStatsFun(data) {
getAreaYearShjzAchieveStats({ areaCode: data }).then((res) => {
console.log(res, "获取近三年城市农村低保发放人数统计 城市柱形图");
this.areaYearShjzAchieveStats = res.data;
res.data.areaList.forEach(item => {
this.cityNames.push(
item.name
)
// res.data.areaList.forEach(item => {
// this.cityNames.push(
// item.name
// )
// });
// console.log(this.cityNames);
this.ruralAndcityFun();
});
console.log(this.cityNames);
this.ruralAndcityFun()
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.socialAssistanceMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getThreeYearShjzAchieveStatsFun("450000");
this.getThreeYearShjzProvideStatsFun("450000");
this.getFivesYearShjzAchieveStatsFun("450000");
this.getAreaYearShjzAchieveStatsFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
socialAssistanceMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("socialAssistanceMap"));
echarts.registerMap("GX", mapList);
map.setOption({
tooltip: {
trigger: "item",
// formatter: '{b}<br/>{c}%(完成数 / 指标数)'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
//text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
//name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#fff" },
borderWidth: 1, //区域边框宽度
borderColor: "#fff", //区域边框颜色
areaColor: "#0070BC", //默认区域颜色
},
emphasis: {
show: true,
areaColor: "#3066ba", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
this.num++;
console.log(this.num, "点击数字,2不执行");
if (this.num >= 2) {
//不执行
} else {
console.log("点击取值", res);
console.log("地图数组", mapList.features);
console.log("地区下标", res.dataIndex);
console.log("区域信息", mapList.features[res.dataIndex].properties);
console.log(
"区域信息地区码",
mapList.features[res.dataIndex].properties.adcode
);
this.getMapData(
"g" + mapList.features[res.dataIndex].properties.adcode
);
this.getThreeYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getThreeYearShjzProvideStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getFivesYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
......@@ -526,7 +670,7 @@ export default {
{
type: "category",
axisTick: { show: false },
data: this.cityNames,
data: this.areaYearShjzAchieveStats.areaList,
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -665,6 +809,12 @@ export default {
margin-left: 20px;
}
.socialAssistanceMap {
width: 100%;
height: 500px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 416px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment