xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
duanxiaohai 2024-05-13 11:21:35 +08:00
parent 4463c8557f b9bda9413c
commit f65b63e892
13 changed files with 745 additions and 586 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/view/echarts_hygiene/eP5.vue
View File

@ -1,26 +1,32 @@
<template> <template>
<div <div ref="chart" style="width: 100%; height: 400px"></div>
ref="chart"
style="width: 100%;height: 400px"
></div>
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data1 = [ const data = reactive({
"龙游县人民医院", list: [],
"龙游县中医院", jgmc: [],
"龙游县横山镇中心卫生院", rs: [],
"龙游县溪水镇中心卫生院", option: {},
"龙游县龙游街道社区卫生服务中心", bg: [],
"龙游县塔石镇中心卫生院", });
"龙游县罗家县中心卫生院", const getOption = () => {
]; data.option = {
let option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
// formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ", // formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
@ -28,7 +34,7 @@ let option = {
grid: { grid: {
top: "13%", top: "13%",
left: "1%", left: "15%",
right: "10%", right: "10%",
bottom: "0%", bottom: "0%",
containLabel: true, containLabel: true,
@ -38,44 +44,44 @@ let option = {
{ {
type: "category", type: "category",
axisLabel: { axisLabel: {
formatter: function (params) { // formatter: function (params) {
var str = ""; // 最终拼接成的字符串 // var str = ""; // 最终拼接成的字符串
var paramsLen = params.length; // 获取每项文字的个数 // var paramsLen = params.length; // 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置） // var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整 // var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { // if (paramsLen > len) {
//大于设定的len就换行，不大于就不变化 // //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) { // for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串 // var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置 // var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置 // var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // if (i == rowNumber - 1) {
// 最后一次不换行 // // 最后一次不换行
temp = params.substring(start, paramsLen); // temp = params.substring(start, paramsLen);
} else { // } else {
// 每一次拼接字符串并换行 // // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n"; // temp = params.substring(start, end) + "\n";
} // }
str += temp; // 最终拼成的字符串 // str += temp; // 最终拼成的字符串
} // }
} else { // } else {
// 给新的字符串赋值 // // 给新的字符串赋值
str = params; // str = params;
} // }
return str; //返回字符串 // return str; //返回字符串
}, // },
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
}, },
rotate: 40, rotate: 40,
}, },
data: data1, data: data.jgmc,
}, },
], ],
yAxis: [ yAxis: [
{ {
name:'在册数', name: "在册数",
type: "value", type: "value",
splitLine: { splitLine: {
show: true, show: true,
@ -87,7 +93,7 @@ let option = {
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
color: "#ccc", color: "#ffffff",
}, },
}, },
axisLine: { axisLine: {
@ -100,13 +106,12 @@ let option = {
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: "职工医疗保险发放人次", name: "职工医疗保险发放人次",
type: "bar", type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6,100,50], data: data.rs,
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
normal: { normal: {
@ -194,23 +199,26 @@ let option = {
}, },
}, },
], ],
};
}; };
const setChart = () => {
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(data.option);
};
// 单图表响应式: 跟随浏览器大小改变 onBeforeMount(() => {
// window.addEventListener("resize", () => { setTimeout(() => {
// myChart.resize(); data.list = props.list;
// }); data.list.forEach((item, index) => {
data.jgmc.push(item.jgmc);
data.rs.push(item.rs);
});
getOption();
setChart();
}, 600);
}); });
</script> </script>

58
src/view/echarts_hygiene/eP7.vue
View File

@ -3,13 +3,29 @@
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "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 chart = ref(); // 创建DOM引用
const data1 = ["2019", "2020", "2021", "2022", "2023"];
let option = { const getOption = () => {
data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} ", formatter: "{b0}<br />{a0}:{c0} ",
@ -33,12 +49,12 @@ let option = {
}, },
}, },
data: data1, data: data.year,
}, },
{ {
axisTick: false, axisTick: false,
type: "category", type: "category",
data: data1, data: data.year,
axisLabel: { axisLabel: {
show: false, show: false,
}, },
@ -102,7 +118,7 @@ let option = {
{ {
name: "体检人数", name: "体检人数",
type: "bar", type: "bar",
data: [120, 49, 70, 232, 25.6], data: data.list,
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
normal: { normal: {
@ -191,28 +207,32 @@ let option = {
itemStyle: { itemStyle: {
color: "rgba(221, 242, 255, 0.1)", color: "rgba(221, 242, 255, 0.1)",
}, },
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100), data: data.bg.map(() => 100),
barWidth: 50, barWidth: 50,
}, },
], ],
}; };
}
// 使用生命钩子 const setChart = () => {
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(data.option);
}
// 单图表响应式: 跟随浏览器大小改变 onBeforeMount(() => {
// window.addEventListener("resize", () => { setTimeout(() => {
// myChart.resize(); data.list = props.list
// }); data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)
}); });
</script> </script>
<style scoped> <style scoped>

62
src/view/echarts_hygiene/gxy.vue
View File

@ -1,22 +1,39 @@
<template> <template>
<div ref="chart" style="width: 100%;height:210px;"></div> <div ref="chart" style="width: 100%; height: 210px"></div>
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
});
let option = { const getOption = () => {
data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
padding: [20, 10, 20, 10], padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} ", formatter: "{b0}<br />{a1}:{c1} ",
}, },
grid: { grid: {
top:'5%', top: "5%",
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "3%", bottom: "3%",
@ -26,7 +43,7 @@ let option = {
xAxis: { xAxis: {
type: "category", type: "category",
// boundaryGap: false, // boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"], data: data.year,
// splitArea: { // splitArea: {
// show: true, // show: true,
// interval: '10', // interval: '10',
@ -62,7 +79,7 @@ let option = {
{ {
name: "背景", name: "背景",
type: "bar", type: "bar",
data: [0, 0, 0, 0, 0], data: data.bg,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)", color: "rgba(180, 180, 180, 0.2)",
@ -79,7 +96,8 @@ let option = {
borderColor: "#00FCFF", borderColor: "#00FCFF",
borderWidth: 1, borderWidth: 1,
color: "#00FCFF", color: "#00FCFF",
}, areaStyle: { },
areaStyle: {
color: "#F4F65B", color: "#F4F65B",
normal: { normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
@ -92,7 +110,7 @@ let option = {
{ {
offset: 0, offset: 0,
// color: 'RGBA(184, 204, 241, 1)' // color: 'RGBA(184, 204, 241, 1)'
color: 'rgba(0, 252, 255, 0.50)', color: "rgba(0, 252, 255, 0.50)",
}, },
{ {
offset: 1, offset: 1,
@ -105,27 +123,29 @@ let option = {
}, },
}, },
data: [120, 182, 191, 234, 200], data: data.list,
}, },
], ],
};
}; };
const setChart = () => {
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(data.option);
};
// 单图表响应式: 跟随浏览器大小改变 onBeforeMount(() => {
// window.addEventListener("resize", () => { setTimeout(() => {
// myChart.resize(); data.list = props.list;
// }); data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
}); });
</script> </script>

65
src/view/echarts_hygiene/pie.vue
View File

@ -1,15 +1,35 @@
<template> <template>
<div ref="chart" style="width: 100%; height:250px;"></div> <div ref="chart" style="width: 100%; height: 250px"></div>
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "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引用 const chart = ref(); // 创建DOM引用
let option = { const getOption = () => {
data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ", formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
@ -23,7 +43,7 @@ let option = {
}, },
}, },
grid: { grid: {
top:'23%', top: "23%",
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "0%", bottom: "0%",
@ -39,12 +59,12 @@ let option = {
color: "#ffffff", color: "#ffffff",
}, },
}, },
data: ["2019", "2020", "2021", "2022", "2023"], data: data.year,
}, },
{ {
axisTick: false, axisTick: false,
type: "category", type: "category",
data: ["2019", "2020", "2021", "2022", "2023"], data: data.year,
axisLabel: { axisLabel: {
show: false, show: false,
}, },
@ -98,7 +118,7 @@ let option = {
{ {
name: "职工医疗保险发放人次", name: "职工医疗保险发放人次",
type: "bar", type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6], data: data.zgffrc,
barWidth: "18%", barWidth: "18%",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -116,7 +136,7 @@ let option = {
{ {
name: "城乡医疗保险发放人次", name: "城乡医疗保险发放人次",
type: "bar", type: "bar",
data: [2.6, 5.9, 9.0, 26.4, 28.7], data: data.cxffrc,
barWidth: "18%", barWidth: "18%",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -138,27 +158,32 @@ let option = {
itemStyle: { itemStyle: {
color: "rgba(221, 242, 255, 0.1)", color: "rgba(221, 242, 255, 0.1)",
}, },
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100), data: data.bg.map(() => 100),
barWidth: 50, barWidth: 50,
}, },
], ],
};
}; };
const setChart = () => {
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(data.option);
};
// 单图表响应式: 跟随浏览器大小改变 onBeforeMount(() => {
// window.addEventListener("resize", () => { setTimeout(() => {
// myChart.resize(); 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> </script>

65
src/view/echarts_hygiene/pie2.vue
View File

@ -1,15 +1,33 @@
<template> <template>
<div ref="chart" style="width: 100%; height:250px;"></div> <div ref="chart" style="width: 100%; height: 250px"></div>
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "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引用 const chart = ref(); // 创建DOM引用
let option = { const getOption = () => {
data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
padding: [20, 10, 20, 10], padding: [20, 10, 20, 10],
@ -25,7 +43,7 @@ let option = {
}, },
}, },
grid: { grid: {
top:'23%', top: "23%",
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "3%", bottom: "3%",
@ -35,7 +53,7 @@ let option = {
xAxis: { xAxis: {
type: "category", type: "category",
// boundaryGap: false, // boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"], data: data.year,
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
@ -63,7 +81,7 @@ let option = {
{ {
name: "背景", name: "背景",
type: "bar", type: "bar",
data: [0, 0, 0, 0, 0], data: data.bg,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)", color: "rgba(180, 180, 180, 0.2)",
@ -72,7 +90,6 @@ let option = {
{ {
name: "职工医疗保险金额", name: "职工医疗保险金额",
type: "line", type: "line",
stack: "Total",
symbol: "emptyCircle", symbol: "emptyCircle",
symbolSize: 10, symbolSize: 10,
@ -81,12 +98,11 @@ let option = {
borderWidth: 1, borderWidth: 1,
color: "#00FCFF", color: "#00FCFF",
}, },
data: [120, 132, 101, 134, 90], data: data.zgffje,
}, },
{ {
name: "城乡医疗保险金额", name: "城乡医疗保险金额",
type: "line", type: "line",
stack: "Total",
symbol: "emptyCircle", symbol: "emptyCircle",
symbolSize: 10, symbolSize: 10,
@ -96,26 +112,31 @@ let option = {
color: "#2468FF", color: "#2468FF",
}, },
data: [150, 232, 201, 154, 190], data: data.cxffje,
}, },
], ],
};
}; };
const setChart = () => {
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(data.option);
};
// 单图表响应式: 跟随浏览器大小改变 onBeforeMount(() => {
// window.addEventListener("resize", () => { setTimeout(() => {
// myChart.resize(); 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> </script>

55
src/view/echarts_hygiene/tnb.vue
View File

@ -3,13 +3,30 @@
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "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: { tooltip: {
trigger: "axis", trigger: "axis",
padding: [20, 10, 20, 10], padding: [20, 10, 20, 10],
@ -26,7 +43,7 @@ let option = {
xAxis: { xAxis: {
type: "category", type: "category",
// boundaryGap: false, // boundaryGap: false,
data: ["1月", "2月", "3月", "4月", "5月"], data: data.year,
// splitArea: { // splitArea: {
// show: true, // show: true,
// interval: '10', // interval: '10',
@ -62,7 +79,7 @@ let option = {
{ {
name: "背景", name: "背景",
type: "bar", type: "bar",
data: [0, 0, 0, 0, 0], data: data.bg,
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)", color: "rgba(180, 180, 180, 0.2)",
@ -106,27 +123,31 @@ let option = {
shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}, },
}, },
data: [120, 182, 191, 234, 200], data: data.list,
}, },
], ],
}; };
}
// 使用生命钩子 const setChart = () => {
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(data.option);
}
// 单图表响应式: 跟随浏览器大小改变 onBeforeMount(() => {
// window.addEventListener("resize", () => { setTimeout(() => {
// myChart.resize(); data.list = props.list
// }); data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)
}); });
</script> </script>
<style scoped> <style scoped>

8
src/view/echarts_yl/eP2.vue
View File

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

8
src/view/echarts_yl/eP2_2.vue
View File

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

8
src/view/echarts_yl/eP3.vue
View File

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

2
src/view/echarts_yl/eP3_2.vue
View File

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

2
src/view/echarts_yl/pie.vue
View File

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

8
src/view/echarts_yl/pie2.vue
View File

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

52
src/view/hygiene.vue
View File

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