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

This commit is contained in:
lnn19986213 2024-05-13 13:30:13 +08:00
commit 9ad39f8396
17 changed files with 1101 additions and 863 deletions

View File

@ -32,7 +32,7 @@ const option = {
tooltip: {
show: true, //---,true
trigger: "axis",
formatter: "{b0}:{c0}" + "人",
formatter: "{b0}:{c1}" + "人",
},
xAxis: [
{

View File

@ -1,128 +1,123 @@
<template>
<div
ref="chart"
style="width: 100%;height: 400px"
></div>
<div ref="chart" style="width: 100%; height: 400px"></div>
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const chart = ref(); // DOM
const data1 = [
"龙游县人民医院",
"龙游县中医院",
"龙游县横山镇中心卫生院",
"龙游县溪水镇中心卫生院",
"龙游县龙游街道社区卫生服务中心",
"龙游县塔石镇中心卫生院",
"龙游县罗家县中心卫生院",
];
let option = {
tooltip: {
trigger: "axis",
// formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
},
grid: {
top: "13%",
left: "1%",
right: "10%",
bottom: "0%",
containLabel: true,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
formatter: function (params) {
var str = ""; //
var paramsLen = params.length; //
var len = 6; //
var rowNumber = Math.ceil(paramsLen / len); //
if (paramsLen > len) {
//len
for (var i = 0; i < rowNumber; i++) {
var temp = ""; //
var start = i * len; //
var end = start + len; //
if (i == rowNumber - 1) {
//
temp = params.substring(start, paramsLen);
} else {
//
temp = params.substring(start, end) + "\n";
}
str += temp; //
}
} else {
//
str = params;
}
return str; //
},
textStyle: {
color: "#ffffff",
},
rotate: 40,
},
data: data1,
const data = reactive({
list: [],
jgmc: [],
rs: [],
option: {},
bg: [],
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
// formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
},
],
yAxis: [
{
name:'在册数',
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.2)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ccc",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
grid: {
top: "13%",
left: "15%",
right: "10%",
bottom: "0%",
containLabel: true,
},
],
series: [
{
name: "职工医疗保险发放人次",
type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6,100,50],
barWidth: 20,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
];
if (params.dataIndex == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
// formatter: function (params) {
// var str = ""; //
// var paramsLen = params.length; //
// var len = 6; //
// var rowNumber = Math.ceil(paramsLen / len); //
// if (paramsLen > len) {
// //len
// for (var i = 0; i < rowNumber; i++) {
// var temp = ""; //
// var start = i * len; //
// var end = start + len; //
// if (i == rowNumber - 1) {
// //
// temp = params.substring(start, paramsLen);
// } else {
// //
// temp = params.substring(start, end) + "\n";
// }
// str += temp; //
// }
// } else {
// //
// str = params;
// }
// return str; //
// },
textStyle: {
color: "#ffffff",
},
rotate: 40,
},
data: data.jgmc,
},
],
yAxis: [
{
name: "在册数",
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.2)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "职工医疗保险发放人次",
type: "bar",
data: data.rs,
barWidth: 20,
itemStyle: {
normal: {
color: function (params) {
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
@ -132,33 +127,8 @@ let option = {
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 3 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
false),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
@ -168,15 +138,8 @@ let option = {
color: "rgba(255, 242, 142, 0.20)",
},
],
false
);
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
false),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
@ -186,31 +149,35 @@ let option = {
color: "rgba(142, 187, 255, 0.20)",
},
],
false
);
}
false),
];
return colorList[params.dataIndex % colorList.length];
},
},
},
},
},
],
],
};
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
myChart.setOption(data.option);
};
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.list.forEach((item, index) => {
data.jgmc.push(item.jgmc);
data.rs.push(item.rs);
});
getOption();
setChart();
}, 600);
});
</script>

View File

@ -3,13 +3,29 @@
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year:{
type: Array,
default: () => [],
}
});
const data= reactive({
list:[],
year:[],
option:{},
bg:[],
})
const chart = ref(); // DOM
const data1 = ["2019", "2020", "2021", "2022", "2023"];
let option = {
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} ",
@ -33,12 +49,12 @@ let option = {
},
},
data: data1,
data: data.year,
},
{
axisTick: false,
type: "category",
data: data1,
data: data.year,
axisLabel: {
show: false,
},
@ -102,18 +118,13 @@ let option = {
{
name: "体检人数",
type: "bar",
data: [120, 49, 70, 232, 25.6],
data: data.list,
barWidth: 20,
itemStyle: {
normal: {
color: function (params) {
if (params.dataIndex == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
@ -123,33 +134,8 @@ let option = {
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 3 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
false),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
@ -159,15 +145,8 @@ let option = {
color: "rgba(255, 242, 142, 0.20)",
},
],
false
);
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
false),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
@ -177,9 +156,10 @@ let option = {
color: "rgba(142, 187, 255, 0.20)",
},
],
false
);
}
false),
];
return colorList[params.dataIndex % colorList.length];
},
},
},
@ -191,28 +171,32 @@ let option = {
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
data: data.bg.map(() => 100),
barWidth: 50,
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
}
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
myChart.setOption(data.option);
}
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list
data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)
});
</script>
<style scoped>

View File

@ -1,131 +1,151 @@
<template>
<div ref="chart" style="width: 100%;height:210px;"></div>
<div ref="chart" style="width: 100%; height: 210px"></div>
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const chart = ref(); // DOM
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
});
let option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} ",
},
grid: {
top:'5%',
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} ",
},
grid: {
top: "5%",
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"],
// splitArea: {
// show: true,
// interval: '10',
// areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"],
// width:10,
// },
// },
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
},
series: [
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "高血压人数",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
}, areaStyle: {
color: "#F4F65B",
normal: {
//线4x0,y0,x2,y2(0~1);true
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
// color: 'RGBA(184, 204, 241, 1)'
color: 'rgba(0, 252, 255, 0.50)',
},
{
offset: 1,
color: "rgba(0, 252, 255, 0)",
},
],
false
),
shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
// splitArea: {
// show: true,
// interval: '10',
// areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"],
// width:10,
// },
// },
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
data: [120, 182, 191, 234, 200],
},
],
};
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
},
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "高血压人数",
type: "line",
stack: "Total",
symbol: "emptyCircle",
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
symbolSize: 10,
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
areaStyle: {
color: "#F4F65B",
normal: {
//线4x0,y0,x2,y2(0~1);true
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
// color: 'RGBA(184, 204, 241, 1)'
color: "rgba(0, 252, 255, 0.50)",
},
{
offset: 1,
color: "rgba(0, 252, 255, 0)",
},
],
false
),
shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
},
},
data: data.list,
},
],
};
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
myChart.setOption(data.option);
};
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>

View File

@ -1,164 +1,189 @@
<template>
<div ref="chart" style="width: 100%; height:250px;"></div>
<div ref="chart" style="width: 100%; height: 250px"></div>
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const data = reactive({
list: [],
zgffrc: [], //
cxffrc: [], //
year: [],
option: {},
bg:[],
});
const chart = ref(); // DOM
let option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
},
legend: {
top: "6%",
right: "11%",
textStyle: {
fontSize: 12,
color: "#ffffff",
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
},
},
grid: {
top:'23%',
left: "1%",
right: "10%",
bottom: "0%",
containLabel: true,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
legend: {
top: "6%",
right: "11%",
textStyle: {
fontSize: 12,
color: "#ffffff",
},
},
grid: {
top: "23%",
left: "1%",
right: "10%",
bottom: "0%",
containLabel: true,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
data: data.year,
},
{
axisTick: false,
type: "category",
data: data.year,
axisLabel: {
show: false,
},
},
data: ["2019", "2020", "2021", "2022", "2023"],
},
{
axisTick: false,
type: "category",
data: ["2019", "2020", "2021", "2022", "2023"],
axisLabel: {
show: false,
},
},
],
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
{
type: "value",
min: 0,
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,
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
],
series: [
{
name: "职工医疗保险发放人次",
type: "bar",
data: data.zgffrc,
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
{
name: "城乡医疗保险发放人次",
type: "bar",
data: data.cxffrc,
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
axisLabel: {
show: false,
fontSize: 14,
fontFamily: "MicrosoftYaHei",
color: "#DEF1FF",
lineHeight: 19,
{
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: data.bg.map(() => 100),
barWidth: 50,
},
},
],
series: [
{
name: "职工医疗保险发放人次",
type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
},
},
{
name: "城乡医疗保险发放人次",
type: "bar",
data: [2.6, 5.9, 9.0, 26.4, 28.7],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
barWidth: 50,
},
],
],
};
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
myChart.setOption(data.option);
};
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.year = props.year;
data.list.forEach((item) => {
data.zgffrc.push(item.zgffrc);
data.cxffrc.push(item.cxffrc);
data.bg.push("");
})
getOption();
setChart();
}, 600);
});
</script>

View File

@ -1,121 +1,142 @@
<template>
<div ref="chart" style="width: 100%; height:250px;"></div>
<div ref="chart" style="width: 100%; height: 250px"></div>
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const data = reactive({
list: [],
zgffje: [], //
cxffje: [], //
year: [],
option: {},
bg: [],
});
const chart = ref(); // DOM
let option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
},
legend: {
data: ["职工医疗保险金额", "城乡医疗保险金额"],
top: "6%",
right: "11%",
textStyle: {
fontSize: 12,
color: "#ffffff",
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
},
},
grid: {
top:'23%',
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"],
axisLabel: {
//
legend: {
data: ["职工医疗保险金额", "城乡医疗保险金额"],
top: "6%",
right: "11%",
textStyle: {
fontSize: 12,
color: "#ffffff",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
grid: {
top: "23%",
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
},
series: [
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "职工医疗保险金额",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
data: [120, 132, 101, 134, 90],
},
{
name: "城乡医疗保险金额",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
data: [150, 232, 201, 154, 190],
},
],
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "职工医疗保险金额",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
data: data.zgffje,
},
{
name: "城乡医疗保险金额",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
data: data.cxffje,
},
],
};
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
myChart.setOption(data.option);
};
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.year = props.year;
data.list.forEach((item) => {
data.zgffje.push(item.zgffje);
data.cxffje.push(item.cxffje);
data.bg.push("");
});
getOption();
setChart();
}, 600);
});
</script>

View File

@ -3,13 +3,30 @@
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year:{
type: Array,
default: () => [],
}
});
const data= reactive({
list:[],
year:[],
option:{},
bg:[],
})
let option = {
const chart = ref(); // DOM
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
@ -26,7 +43,7 @@ let option = {
xAxis: {
type: "category",
// boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"],
data: data.year,
// splitArea: {
// show: true,
// interval: '10',
@ -62,7 +79,7 @@ let option = {
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
@ -106,27 +123,31 @@ let option = {
shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
},
},
data: [120, 182, 191, 234, 200],
data: data.list,
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
}
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
myChart.setOption(data.option);
}
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list
data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)
});
</script>
<style scoped>

View File

@ -34,7 +34,8 @@ const data = reactive({
list1: [],
list2: [],
year: [],
option: {}
option: {},
bg:[],
})
const getOption = () => {
@ -99,7 +100,7 @@ const getOption = () => {
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
@ -152,6 +153,9 @@ onBeforeMount(() => {
data.list1 = props.list1
data.list2 = props.list2
data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)

View File

@ -34,7 +34,8 @@ const data = reactive({
list1: [],
list2: [],
year: [],
option: {}
option: {},
bg:[],
})
const getOption = () => {
@ -99,7 +100,7 @@ const getOption = () => {
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
@ -153,6 +154,9 @@ onBeforeMount(() => {
data.list1 = props.list1
data.list2 = props.list2
data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)

View File

@ -34,7 +34,8 @@ const data = reactive({
list1: [],
list2: [],
year: [],
option: {}
option: {},
bg:[],
})
const getOption = () =>{
@ -91,7 +92,7 @@ const getOption = () =>{
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
@ -140,6 +141,9 @@ onBeforeMount(() => {
data.list1 = props.list1
data.list2 = props.list2
data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)

View File

@ -168,7 +168,7 @@ const getOption = () =>{
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
data: data.year.map(() => 100),
barWidth: 50,
},
],

View File

@ -163,7 +163,7 @@ const getOption = () => {
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
data: data.year.map(() => 100),
barWidth: 50,
},
],

View File

@ -33,7 +33,8 @@ const data = reactive({
list1: [],
list2: [],
year: [],
option: {}
option: {},
bg:[],
})
const getOption = () => {
data.option = {
@ -89,7 +90,7 @@ const getOption = () => {
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
@ -139,6 +140,9 @@ onBeforeMount(() => {
data.list1 = props.list1
data.list2 = props.list2
data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)

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,180 +69,214 @@ const color = [
],
},
];
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //
},
},
},
legend: {
data: ["计划生育人数", "计划生育补贴金额"],
top: "8%",
textStyle: {
fontSize: 12,
color: "#ffffff", //
},
},
grid: {
left: "6%",
right: "9%",
bottom: "2%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
color,
xAxis: [
{
type: "category",
// name: "/",
axisLabel: {
//
textStyle: {
color: "#ffffff",
const getOption = () => {
data.option = {
color,
calculable: true,
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //
},
},
axisTick: {
show: false, //
},
data: ["2019", "2020", "2021", "2022", "2023"],
legend: {
data: ["计划生育人数", "计划生育补贴金额"],
top: "8%",
textStyle: {
fontSize: 12,
color: "#ffffff", //
},
},
{
type: "category",
show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
grid: {
left: "6%",
right: "9%",
bottom: "2%",
containLabel: true,
color: "#ffffff",
},
],
yAxis: [
{
type: "value",
scale: true,
name: "计划生育人数",
max: max,
splitLine: {
//线
xAxis: [
{
type: "category",
// name: "/",
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, //
},
data: data.year,
},
{
type: "category",
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
data: data.year,
},
],
yAxis: [
{
type: "value",
scale: true,
name: "计划生育人数",
splitLine: {
//线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
min: 0,
max: max,
name: "计划生育补贴金额/元",
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "计划生育人数",
data: data,
barWidth: 20,
type: "bar",
},
{
name: "计划生育补贴金额",
data: lineData,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.map(() => max),
barWidth: 40, //
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
type: "bar",
},
],
{
type: "value",
scale: true,
min: 0,
name: "计划生育补贴金额/元",
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
{
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.list1,
barWidth: 20,
type: "bar",
},
{
yAxisIndex: 1,
name: "计划生育补贴金额",
data: data.list2,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
xAxisIndex: 1,
yAxisIndex: 2,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.list2.map(() => 100),
barWidth: 40, //
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
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

@ -30,16 +30,16 @@
/>
</span>
</div>
<ePie v-if="leftchoose.first == '1'"></ePie>
<ePie2 v-else></ePie2>
<ePie v-if="leftchoose.first == '1'" :list='data.medicalInsurance.ffrc' :year='data.medicalInsurance.year'></ePie>
<ePie2 v-else :list='data.medicalInsurance.ffje' :year='data.medicalInsurance.year'></ePie2>
</div>
<div class="flex1" style="margin-top: 10px">
<div class="yd_title left_3"></div>
<div class="sm_title_1"></div>
<tnb></tnb>
<tnb :list='data.lmb.tnbrs' :year='data.lmb.year'></tnb>
<div class="sm_title_2"></div>
<gxy></gxy>
<gxy :list='data.lmb.gxyrs' :year='data.lmb.year'></gxy>
</div>
</div>
<div class="displayFlex center_bg">
@ -51,7 +51,7 @@
<div class="right">
<div class="right_top">门急诊人次</div>
<img src="@/assets/images/hygiene/jt.png" class="right_center" />
<div class="right_bottom">867.371</div>
<div class="right_bottom">{{data.mz.mjzrc}}</div>
</div>
</div>
<div class="item">
@ -59,7 +59,7 @@
<div class="right">
<div class="right_top">住院人数</div>
<img src="@/assets/images/hygiene/jt.png" class="right_center" />
<div class="right_bottom">6.723</div>
<div class="right_bottom">{{data.mz.zyrs}}</div>
</div>
</div>
</div>
@ -96,7 +96,7 @@
<div class="yd_title familyPlanning"></div>
<!-- 计划生育 -->
<!-- <div style="width: 100%; "> -->
<eP5></eP5>
<eP5 :list='data.jsbgl'></eP5>
<!-- </div> -->
</div>
</div>
@ -105,12 +105,12 @@
<div class="yd_title mechanism"></div>
<div class="history">
<div class="history1">
<div class="va">2048</div>
<div class="va">{{data.fyglrs.ycfrc}}</div>
<img src="@/assets/images/hygiene/yf.png" alt="" />
<div class="historyimg">孕产妇系统管理人数</div>
</div>
<div class="history1">
<div class="va">21810</div>
<div class="va">{{data.fyglrs.etrs}}</div>
<img src="@/assets/images/hygiene/et.png" alt="" />
<div class="historyimg">0-6岁儿童系统管理人数</div>
</div>
@ -118,12 +118,12 @@
</div>
<div class="flex1" style="flex: 1.1">
<div class="yd_title service"></div>
<eP7></eP7>
<eP7 :list='data.jktj.jktjrs' :year='data.jktj.year'></eP7>
</div>
<div class="flex1">
<div class="yd_title last"></div>
<div class="table">
<div class="item" v-for="i in 15">
<div class="item" v-for="i in data.jkhd">
3月2日健康日在龙中公园进行健康活动宣
</div>
</div>
@ -144,7 +144,8 @@ import eP4 from "./echarts_hygiene/eP4.vue";
import eP4_1 from "./echarts_hygiene/eP4_1.vue";
import tnb from "./echarts_hygiene/tnb.vue";
import gxy from "./echarts_hygiene/gxy.vue";
import { ref, onMounted, onBeforeMount } from "vue";
import { ref,reactive, onMounted, onBeforeMount } from "vue";
import http from "@/utils/request.js";
const leftchoose = ref({
first: "1",
second: "1",
@ -153,6 +154,33 @@ const leftchoose = ref({
const change = (name, index) => {
leftchoose.value[name] = index;
};
const data = reactive({
medicalInsurance:{},//
lmb:{},//
mz:{},//
jkda:[],//
jsbgl:[],//
fyglrs:{},//
jktj:{},//65
jkhd:[],//
})
onBeforeMount(() => {
getData();
});
const getData = () => {
http.get("/api/ggfwyth/health").then((res) => {
if (res.code == 200) {
data.medicalInsurance = res.data.medicalInsurance;
data.lmb = res.data.lmb;
data.mz = res.data.mz;
// data.jkda = res.data.jkda;
data.jsbgl = res.data.jsbgl;
data.fyglrs = res.data.fyglrs;
data.jktj = res.data.jktj;
data.jkhd = res.data.jkhd;
}
});
};
</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); //
});
}
});