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

gx

This commit is contained in:
姚宇浩 2024-07-02 10:35:51 +08:00
parent eaca2116f7
commit e59a72cc31
4 changed files with 158 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,14 @@
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue"; import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
} from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
@ -12,151 +19,165 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
year:{ year: {
type: Array, type: Array,
default: () => [], default: () => [],
} },
});
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
}); });
const data= reactive({
list:[],
year:[],
option:{},
bg:[],
})
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const getOption = () => { const getOption = () => {
data.option = { 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%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
// boundaryGap: false, // boundaryGap: false,
data: data.year, data: data.year,
// splitArea: { // splitArea: {
// show: true, // show: true,
// interval: '10', // interval: '10',
// areaStyle: { // areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"], // color: ["rgba(255, 255, 255, 0.10)"],
// width:10, // width:10,
// }, // },
// }, // },
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 16, fontSize: 16,
},
}, },
}, },
}, yAxis: {
yAxis: { type: "value",
type: "value", splitLine: {
splitLine: { show: true,
show: true, lineStyle: {
lineStyle: { color: "rgba(226, 226, 226, 0.3)",
color: "rgba(226, 226, 226, 0.3)", width: 1,
width: 1, },
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
}, },
}, },
axisLabel: { series: [
//坐标轴刻度标签的相关设置 {
textStyle: { name: "背景",
color: "#ffffff", type: "bar",
fontSize: 16, data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
}, },
}, {
}, name: "糖尿病人数",
series: [ type: "line",
{ stack: "Total",
name: "背景", symbol: "emptyCircle",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "糖尿病人数",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10, symbolSize: 10,
itemStyle: { itemStyle: {
borderColor: "#E8FF00", borderColor: "#E8FF00",
borderWidth: 1, borderWidth: 1,
color: "#E8FF00", color: "#E8FF00",
}, },
label: { label: {
show: true, show: true,
color: "#ffffff", color: "#ffffff",
position:'top', position: "top",
formatter: function (data) { formatter: function (data) {
return data.value; return data.value;
}, },
}, },
areaStyle: { areaStyle: {
color: "#F4F65B", color: "#F4F65B",
normal: { normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
0, 0,
0, 0,
1, 1,
[ [
{ {
offset: 0, offset: 0,
// color: 'RGBA(184, 204, 241, 1)' // color: 'RGBA(184, 204, 241, 1)'
color: 'rgba(255, 234, 90, 0.50)', color: "rgba(255, 234, 90, 0.50)",
}, },
{ {
offset: 1, offset: 1,
color: "rgba(255, 234, 90, 0)", color: "rgba(255, 234, 90, 0)",
}, },
], ],
false false
), ),
shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
}, },
data: data.list,
}, },
data: data.list, ],
}, };
],
}; };
} watch(
() => props.list,
(newValue, oldValue) => {
setTimeout(() => {
data.list = props.list;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
}
);
const setChart = () => { const setChart = () => {
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option); myChart.setOption(data.option);
} };
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list data.list = props.list;
data.year = props.year data.year = props.year;
data.year.forEach(()=>{ data.year.forEach(() => {
data.bg.push(0) data.bg.push(0);
}) });
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>
<style scoped> <style scoped>

18
src/view/hygiene.vue
View File

@ -9,7 +9,7 @@
</div> </div>
<span class="text"> <span class="text">
<img <img
v-if="leftchoose.first == '1'" v-if="leftchoose.first == '1' "
src="@/assets/images/hygiene/yb_1.png" src="@/assets/images/hygiene/yb_1.png"
class="c" class="c"
style="width: 160px" style="width: 160px"
@ -35,7 +35,7 @@
</span> </span>
</div> </div>
<ePie <ePie
v-if="leftchoose.first == '1'" v-if="leftchoose.first == '1' && showEchart"
:list="data.medicalInsurance.ffrc" :list="data.medicalInsurance.ffrc"
:year="data.medicalInsurance.year" :year="data.medicalInsurance.year"
></ePie> ></ePie>
@ -54,9 +54,9 @@
</div> </div>
</div> </div>
<div class="sm_title_1"></div> <div class="sm_title_1"></div>
<tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb> <tnb :list="data.lmb.tnbrs" :year="data.lmb.year" v-if="showEchart"></tnb>
<div class="sm_title_2"></div> <div class="sm_title_2"></div>
<gxy :list="data.lmb.gxyrs" :year="data.lmb.year"></gxy> <gxy :list="data.lmb.gxyrs" :year="data.lmb.year" v-if="showEchart"></gxy>
</div> </div>
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
@ -114,7 +114,7 @@
<div class="minTopPart2"> <div class="minTopPart2">
<div class="left"> <div class="left">
<div class="leftImg"> <div class="leftImg">
<eP4 :list="data.jkda.jdl"></eP4> <eP4 :list="data.jkda.jdl" v-if="showEchart"></eP4>
</div> </div>
<div class="left_me"> <div class="left_me">
<div>建档率</div> <div>建档率</div>
@ -123,7 +123,7 @@
</div> </div>
<div class="right"> <div class="right">
<div class="rightImg"> <div class="rightImg">
<eP4_1 :list="data.jkda.jtysqyl"></eP4_1> <eP4_1 :list="data.jkda.jtysqyl" v-if="showEchart"></eP4_1>
</div> </div>
<div class="right_me"> <div class="right_me">
<div>家庭医生签约率</div> <div>家庭医生签约率</div>
@ -141,7 +141,7 @@
</div> </div>
</div> </div>
<!-- <div style="width: 100%; "> --> <!-- <div style="width: 100%; "> -->
<eP5 :list="data.jsbgl"></eP5> <eP5 :list="data.jsbgl" v-if="showEchart"></eP5>
<!-- </div> --> <!-- </div> -->
</div> </div>
</div> </div>
@ -177,7 +177,7 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<eP7 :list="data.jktj.jktjrs" :year="data.jktj.year"></eP7> <eP7 :list="data.jktj.jktjrs" :year="data.jktj.year" v-if="showEchart"></eP7>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title last"> <div class="yd_title last">
@ -216,6 +216,7 @@ import tnb from "./echarts_hygiene/tnb.vue";
import gxy from "./echarts_hygiene/gxy.vue"; import gxy from "./echarts_hygiene/gxy.vue";
import { ref, reactive, onMounted, onBeforeMount } from "vue"; import { ref, reactive, onMounted, onBeforeMount } from "vue";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
const showEchart=ref(true)
const leftchoose = ref({ const leftchoose = ref({
first: "1", first: "1",
second: "1", second: "1",
@ -292,6 +293,7 @@ const getData = async () => {
data.fyglrs = res.data.fyglrs; data.fyglrs = res.data.fyglrs;
data.jktj = res.data.jktj; data.jktj = res.data.jktj;
data.jkhd = res.data.jkhd; data.jkhd = res.data.jkhd;
showEchart.value=true;
} }
}); });
}; };

7
src/view/sy.vue
View File

@ -229,9 +229,9 @@
<img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" /> <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
</div> </div>
</div> </div>
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2> <ePie2 style="margin-top: 20px" :list="data.ageRatio" v-if="showEchart"></ePie2>
<div class="bt"> <div class="bt">
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie> <ePie style="margin-bottom: 20px" :list="data.ageGroup" v-if="showEchart"></ePie>
<div <div
class="btList" class="btList"
ref="mainRef" ref="mainRef"
@ -623,6 +623,8 @@ import qyfw1 from "../assets/images/sy/ljzcs.png";
import qyfw2 from "../assets/images/sy/rzbms.png"; import qyfw2 from "../assets/images/sy/rzbms.png";
import qyfw3 from "../assets/images/sy/shqys.png"; import qyfw3 from "../assets/images/sy/shqys.png";
import qyfw4 from "../assets/images/sy/dxje.png"; import qyfw4 from "../assets/images/sy/dxje.png";
//控制echart的显示
const showEchart=ref(true)
// 详情弹框 // 详情弹框
const dialogShow = ref(false); const dialogShow = ref(false);
const dialogShowEc = ref(false); const dialogShowEc = ref(false);
@ -1270,6 +1272,7 @@ const getData = async () => {
data.jtsyList[4].key2_value = data.jtsyList[4].key2_value =
res.data.transportation.highSpeedRail.passengerFlow; res.data.transportation.highSpeedRail.passengerFlow;
} }
showEchart.value=true;
}); });
}; };
//获取表格数据 //获取表格数据

18
src/view/yl.vue
View File

@ -36,7 +36,7 @@
</span> </span>
</div> </div>
<ePie <ePie
v-if="leftchoose.first == '1' && showR" v-if="leftchoose.first == '1' && showEchart"
:list1="data.leftTop1" :list1="data.leftTop1"
:list2="data.leftTop2" :list2="data.leftTop2"
:year="data.leftTopYear" :year="data.leftTopYear"
@ -82,7 +82,7 @@
</span> </span>
</div> </div>
<eP2 <eP2
v-if="leftchoose.second == '1' && showR" v-if="leftchoose.second == '1' && showEchart"
:list1="data.leftCenter1" :list1="data.leftCenter1"
:list2="data.leftCenter2" :list2="data.leftCenter2"
:year="data.leftCenterYear" :year="data.leftCenterYear"
@ -128,7 +128,7 @@
</span> </span>
</div> </div>
<eP3 <eP3
v-if="leftchoose.third == '1' && showR" v-if="leftchoose.third == '1' && showEchart"
:list1="data.leftbottom1" :list1="data.leftbottom1"
:list2="data.leftbottom2" :list2="data.leftbottom2"
:year="data.leftbottomYear" :year="data.leftbottomYear"
@ -170,7 +170,7 @@
</div> </div>
</div> </div>
<div class="ageGroupone"> <div class="ageGroupone">
<ePie3d v-if="showR" :list="data.rkgk"></ePie3d> <ePie3d v-if="showEchart" :list="data.rkgk"></ePie3d>
<div class="btList" ref="mainRef"> <div class="btList" ref="mainRef">
<div class="btListding"> <div class="btListding">
<span>各年龄段</span> <span>各年龄段</span>
@ -201,7 +201,7 @@
</div> </div>
</div> </div>
<ylJHSY <ylJHSY
v-if="showR" v-if="showEchart"
:list1="data.centerBottom1" :list1="data.centerBottom1"
:list2="data.centerBottom2" :list2="data.centerBottom2"
:year="data.centerBottomYear" :year="data.centerBottomYear"
@ -265,7 +265,7 @@
<div class="serviceTop"> <div class="serviceTop">
<div class="visit"> <div class="visit">
<img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" /> <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
<ylSMFW v-if="showR" :list="data.smfwcs"></ylSMFW> <ylSMFW v-if="showEchart" :list="data.smfwcs"></ylSMFW>
</div> </div>
<div class="medicalService"> <div class="medicalService">
<img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" /> <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
@ -287,7 +287,7 @@
/> />
</div> </div>
<ylXZZC <ylXZZC
v-if="showR" v-if="showEchart"
:list1="data.zccs1" :list1="data.zccs1"
:list2="data.zccs2" :list2="data.zccs2"
@village="chooseVillage" @village="chooseVillage"
@ -336,7 +336,7 @@ const leftchoose = ref({
second: "1", second: "1",
third: "1", third: "1",
}); });
const showR = ref(false); const showEchart = ref(false);
// 详情弹框 // 详情弹框
const dialogShow = ref(false); const dialogShow = ref(false);
const tableType = reactive({ const tableType = reactive({
@ -662,7 +662,7 @@ const getData = () => {
data.zccs2.push(element.zccs); // 次数 data.zccs2.push(element.zccs); // 次数
}); });
} }
showR.value = true; showEchart.value = true;
}); });
}; };
</script> </script>