Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
姚宇浩 2024-05-13 11:56:23 +08:00
commit bcb4f8ee7a
4 changed files with 424 additions and 257 deletions

View File

@ -1,19 +1,50 @@
<template>
<div ref="chart" style="width: 100%; height:430px;"></div>
<div ref="chart" style="width: 100%; height: 430px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {
onBeforeMount,
onMounted,
reactive,
ref,
defineProps,
nextTick,
} from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list1: {
type: Array,
default: () => {
return [];
},
},
list2: {
type: Array,
default: () => {
return [];
},
},
year: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM
const data = [120, 200, 50, 80, 70, ];
const lineData = [150, 230, 24, 218, 135,];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
const data = reactive({
list1: [],
list2: [],
year: [],
option: {},
// max: null,
});
//
const color = [
{
@ -38,7 +69,11 @@ const color = [
],
},
];
const option = {
const getOption = () => {
data.option = {
color,
calculable: true,
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
@ -64,8 +99,6 @@ const option = {
containLabel: true,
color: "#ffffff",
},
calculable: true,
color,
xAxis: [
{
type: "category",
@ -79,12 +112,12 @@ const option = {
axisTick: {
show: false, //
},
data: ["2019", "2020", "2021", "2022", "2023"],
data: data.year,
},
{
type: "category",
show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
data: data.year,
},
],
yAxis: [
@ -92,7 +125,7 @@ const option = {
type: "value",
scale: true,
name: "计划生育人数",
max: max,
splitLine: {
//线
show: false,
@ -121,7 +154,7 @@ const option = {
type: "value",
scale: true,
min: 0,
max: max,
name: "计划生育补贴金额/元",
splitLine: {
show: false,
@ -146,17 +179,43 @@ const option = {
},
},
},
{
type: "value",
max:100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14,
fontFamily: "MicrosoftYaHei",
color: "#DEF1FF",
lineHeight: 19,
},
},
],
series: [
{
yAxisIndex: 0,
name: "计划生育人数",
data: data,
data: data.list1,
barWidth: 20,
type: "bar",
},
{
yAxisIndex: 1,
name: "计划生育补贴金额",
data: lineData,
data: data.list2,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
@ -166,10 +225,11 @@ const option = {
},
{
xAxisIndex: 1,
yAxisIndex: 2,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.map(() => max),
data: data.list2.map(() => 100),
barWidth: 40, //
emphasis: {
itemStyle: {
@ -195,23 +255,28 @@ const option = {
type: "bar",
},
],
};
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
myChart.setOption(data.option);
};
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list1 = props.list1;
data.list2 = props.list2;
data.year = props.year;
// data.max = data.list1
// .concat(data.list2)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
// console.log(data.max,data.list1, data.list2,111);
getOption();
setChart();
}, 600);
});
</script>

View File

@ -6,14 +6,44 @@
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {
onBeforeMount,
onMounted,
reactive,
ref,
defineProps,
nextTick,
} from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list1: {
type: Array,
default: () => {
return [];
},
},
list2: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(null); // DOM
const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
const datas = ["8", "10", "7", " 23", "25", "250"];
// const data = ["", "", "", "", "", ""];
// const datas = ["8", "10", "7", " 23", "25", "250"];
const data = reactive({
list1: [],
list2: [],
option: {},
});
let zoomShow = true;
// if (data.length > 7) {
@ -21,8 +51,8 @@ let zoomShow = true;
// } else {
// zoomShow = false;
// }
let option = {
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
axisPointer: {
@ -31,7 +61,7 @@ let option = {
},
legend: {},
grid: {
top: "-2%",
top: "0%",
left: "3%",
right: "8%",
bottom: "3%",
@ -100,7 +130,7 @@ let option = {
xAxis: {
// name: '/',
type: "value",
data: datas,
data: data.list2,
axisLabel: {
//
textStyle: {
@ -108,7 +138,7 @@ let option = {
},
// formatter: `{value}/` // x
formatter: function (value, index) {
if (index === datas.length - 1) {
if (index === data.list2.length - 1) {
//
return value + "/次"; //
} else {
@ -132,7 +162,7 @@ let option = {
},
yAxis: {
type: "category", //
data: data,
data: data.list1,
// max:10,
//y
axisLabel: {
@ -166,7 +196,7 @@ let option = {
series: [
{
type: "bar",
data: datas,
data: data.list2,
barWidth: 15, //
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
// barCategoryGap: "10" /**/,
@ -186,33 +216,55 @@ let option = {
},
],
};
}
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// onMounted(() => {
// // domecharts
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3
// var myChart = echarts.init(chart.value);
// // init(); // vue3.2this
// // 使
// myChart.setOption(option);
// myChart.on("scroll", function (event) {
// // bargap
// var bargap = event.scrollData / 10000; // 1%0.5bargap
// myChart.setOption({
// yAxis: {
// axisLabel: {
// bargap: bargap,
// },
// },
// });
// });
// // :
// // window.addEventListener("resize", () => {
// // myChart.resize();
// // });
// });
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
myChart.on("scroll", function (event) {
// bargap
var bargap = event.scrollData / 10000; // 1%0.5bargap
myChart.setOption({
yAxis: {
axisLabel: {
bargap: bargap,
},
},
});
});
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
myChart.setOption(data.option);
};
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list1 = props.list1;
data.list2 = props.list2;
data.year = props.year;
// data.max = data.list1
// .concat(data.list2)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
// console.log(data.max,data.list1, data.list2,111);
getOption();
setChart();
}, 600);
});
</script>

View File

@ -231,6 +231,8 @@ import ePie3 from "./echarts_education/pie3.vue";
import ePie4 from "./echarts_education/pie4.vue";
import ePieRose from "./echarts_education/pieRose.vue";
import eP1 from "./echarts_education/eP1.vue";
import http from "@/utils/request.js";
const fl = ref([
{
name: "留守儿童",
@ -405,7 +407,16 @@ const ratingBtn = (item) => {
onBeforeMount(() => {
selectData.list = roseData1.value;
selectData.list1 = schoolData.value;
getData();
});
const getData = () => {
http.get("/api/ggfwyth/education").then((res) => {
if (res.code == 200) {
console.log(res.data);
}
});
};
</script>
<style lang="scss" scoped>

View File

@ -31,8 +31,18 @@
/>
</span>
</div>
<ePie v-if="leftchoose.first == '1'" :list1="data.leftTop1" :list2="data.leftTop2" :year="data.leftTopYear"></ePie>
<ePie2 v-else :list1="data.leftTop3" :list2="data.leftTop4" :year="data.leftTopYear"></ePie2>
<ePie
v-if="leftchoose.first == '1'"
:list1="data.leftTop1"
:list2="data.leftTop2"
:year="data.leftTopYear"
></ePie>
<ePie2
v-else
:list1="data.leftTop3"
:list2="data.leftTop4"
:year="data.leftTopYear"
></ePie2>
</div>
<div class="flex1" style="margin-top: 10px">
<div class="yd_title left_2">
@ -63,8 +73,18 @@
/>
</span>
</div>
<eP2 v-if="leftchoose.second == '1'" :list1="data.leftCenter1" :list2="data.leftCenter2" :year="data.leftCenterYear"></eP2>
<eP2_2 v-else :list1="data.leftCenter3" :list2="data.leftCenter4" :year="data.leftCenterYear" />
<eP2
v-if="leftchoose.second == '1'"
:list1="data.leftCenter1"
:list2="data.leftCenter2"
:year="data.leftCenterYear"
></eP2>
<eP2_2
v-else
:list1="data.leftCenter3"
:list2="data.leftCenter4"
:year="data.leftCenterYear"
/>
</div>
<div class="flex1" style="margin-top: 10px">
<div class="yd_title left_3">
@ -95,8 +115,18 @@
/>
</span>
</div>
<eP3 v-if="leftchoose.third == '1'" :list1="data.leftbottom1" :list2="data.leftbottom2" :year="data.leftbottomYear"></eP3>
<eP3_2 v-else :list1="data.leftbottom3" :list2="data.leftbottom4" :year="data.leftbottomYear"></eP3_2>
<eP3
v-if="leftchoose.third == '1'"
:list1="data.leftbottom1"
:list2="data.leftbottom2"
:year="data.leftbottomYear"
></eP3>
<eP3_2
v-else
:list1="data.leftbottom3"
:list2="data.leftbottom4"
:year="data.leftbottomYear"
></eP3_2>
</div>
</div>
<div class="displayFlex center_bg">
@ -106,14 +136,18 @@
<div class="mtpImg1"></div>
<div class="mtpImg2"></div>
<div class="mtpImg3"></div>
<div class="mtpText1">5888811</div>
<div class="mtpText1">588811</div>
<div class="mtpText2">18%</div>
</div>
<ePie3d></ePie3d>
</div>
<div class="flex1">
<div class="yd_title familyPlanning"></div>
<ylJHSY></ylJHSY>
<ylJHSY
:list1="data.centerBottom1"
:list2="data.centerBottom2"
:year="data.centerBottomYear"
></ylJHSY>
</div>
</div>
<div class="displayFlex right_bg">
@ -122,7 +156,7 @@
<div class="history">
<div class="history1">
<div>
<span>16<span class="unit"></span></span>
<span>{{data.yljgzlzx.yljg}}<span class="unit"></span></span>
</div>
<img src="@/assets/YLimg/ylimg11.png" alt="" />
<img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
@ -136,7 +170,7 @@
</div> -->
<div class="history1">
<div>
<span>139<span class="unit"></span></span>
<span>{{data.yljgzlzx.zlzx}}<span class="unit"></span></span>
</div>
<img src="@/assets/YLimg/ylimg12.png" alt="" />
<img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
@ -169,7 +203,8 @@
alt=""
/>
</div>
<ylXZZC></ylXZZC>
<ylXZZC :list1="data.zccs1"
:list2="data.zccs2"></ylXZZC>
</div>
</div>
</div>
@ -198,27 +233,28 @@ const change = (name, index) => {
leftchoose.value[name] = index;
};
const data = reactive({
leftTop1:[],
leftTop2:[],
leftTop3:[],
leftTop4:[],
leftTopYear:[],
leftCenter1:[],
leftCenter2:[],
leftCenter3:[],
leftCenter4:[],
leftCenterYear:[],
leftbottom1:[],
leftbottom2:[],
leftbottom3:[],
leftbottom4:[],
leftbottomYear:[],
centerBottom1:[],
centerBottom2:[],
centerBottomYear:[],
leftTop1: [],
leftTop2: [],
leftTop3: [],
leftTop4: [],
leftTopYear: [],
leftCenter1: [],
leftCenter2: [],
leftCenter3: [],
leftCenter4: [],
leftCenterYear: [],
leftbottom1: [],
leftbottom2: [],
leftbottom3: [],
leftbottom4: [],
leftbottomYear: [],
centerBottom1: [],
centerBottom2: [],
centerBottomYear: [],
yljgzlzx: { yljg: "", zlzx: "" },
zccs1: [],
zccs2: []
})
zccs2: [],
});
onBeforeMount(() => {
getData();
});
@ -227,54 +263,57 @@ const getData = () => {
if (res.code == 200) {
//
//
res.data.endowmentInsurance.ffrc.forEach(element => {
data.leftTop1.push(element.zgffrc)
data.leftTop2.push(element.cxffrc)
res.data.endowmentInsurance.ffrc.forEach((element) => {
data.leftTop1.push(element.zgffrc);
data.leftTop2.push(element.cxffrc);
});
//
res.data.endowmentInsurance.ffje.forEach(element => {
data.leftTop3.push(element.zgffje)
data.leftTop4.push(element.cxffje)
res.data.endowmentInsurance.ffje.forEach((element) => {
data.leftTop3.push(element.zgffje);
data.leftTop4.push(element.cxffje);
});
//
data.leftTopYear = res.data.endowmentInsurance.year
data.leftTopYear = res.data.endowmentInsurance.year;
//
//
res.data.oldAgeSubsidy.btrs.forEach(element => {
data.leftCenter1.push(element.ninetyNinetyEight)
data.leftCenter2.push(element.ninetyNine)
res.data.oldAgeSubsidy.btrs.forEach((element) => {
data.leftCenter1.push(element.ninetyNinetyEight);
data.leftCenter2.push(element.ninetyNine);
});
//
res.data.oldAgeSubsidy.btje.forEach(element => {
data.leftCenter3.push(element.ninetyNinetyEight)
data.leftCenter4.push(element.ninetyNine)
res.data.oldAgeSubsidy.btje.forEach((element) => {
data.leftCenter3.push(element.ninetyNinetyEight);
data.leftCenter4.push(element.ninetyNine);
});
data.leftCenterYear = res.data.oldAgeSubsidy.year
data.leftCenterYear = res.data.oldAgeSubsidy.year;
//
//
res.data.tkdbOldAge.tkdbffrc.forEach(element => {
data.leftbottom1.push(element.tkjzrc)
data.leftbottom2.push(element.dbjzrc)
res.data.tkdbOldAge.tkdbffrc.forEach((element) => {
data.leftbottom1.push(element.tkjzrc);
data.leftbottom2.push(element.dbjzrc);
});
//
res.data.tkdbOldAge.tkdbffje.forEach(element => {
data.leftbottom3.push(element.tkjzje)
data.leftbottom4.push(element.dbjzje)
res.data.tkdbOldAge.tkdbffje.forEach((element) => {
data.leftbottom3.push(element.tkjzje);
data.leftbottom4.push(element.dbjzje);
});
//
data.leftbottomYear = res.data.tkdbOldAge.year
data.leftbottomYear = res.data.tkdbOldAge.year;
//
res.data.familyPlanning.familyPlanningData.forEach(element => {
data.centerBottom1.push(element.jhsyrs) //
data.centerBottom2.push(element.jhsybtje) //
res.data.familyPlanning.familyPlanningData.forEach((element) => {
data.centerBottom1.push(element.jhsyrs); //
data.centerBottom2.push(element.jhsybtje); //
});
//
data.centerBottomYear = res.data.familyPlanning.year
data.centerBottomYear = res.data.familyPlanning.year;
//
data.yljgzlzx.yljg = res.data.yljgzlzx.yljg;
data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx;
//
//
res.data.zlfw.xzzccs.forEach(element => {
data.zccs1.push(element.xzjd) //
data.zccs2.push(element.zccs) //
res.data.zlfw.xzzccs.forEach((element) => {
data.zccs1.push(element.xzjd); //
data.zccs2.push(element.zccs); //
});
}
});