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

gx

This commit is contained in:
duanxiaohai 2024-06-14 16:16:41 +08:00
parent c8652803ec
commit 4c91185c73
3 changed files with 284 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/sjfx/sjfx11.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 165 KiB

293
src/view/analyze.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="module">
<div class="displayFlex left_bg">
<div >
<div class="flex11">
<div class="yd_title left_1">
<div class="animate-border">
<i></i>
@ -25,21 +25,29 @@
</div>
<div class="ViewData">
<div class="ViewDatalist">
<!-- <div class="ViewDataTop" v-for="item in data.ViewData.name">
<div class="ViewDataTopimg">
{{ item }}
<div
class="ViewDataTop"
v-for="(item, index) in data.ViewData"
:key="item.name"
@click="onViewData(item.name, index)"
>
<div
class="ViewDataTopimg"
:class="{ ViewDataBottomimg: item.show }"
>
{{ item.value }}
</div>
<div class="ViewDataTopimg_1"></div>
<span>{{ item }}</span>
<div
class="ViewDataTopimg_1"
:class="{ ViewDataBottomimg_1: item.show }"
></div>
<span> {{ item.name }}</span>
</div>
<div class="ViewDataBottom" v-for="item in 5">
<div class="ViewDataBottomimg"></div>
<div class="ViewDataBottomimg_1"></div>
</div> -->
</div>
<eP2
:list1="data.leftCenter1"
:list2="data.leftCenter2"
:list="data.DataViewing"
:list1="data.leftCenter3"
:list2="data.leftCenter4"
:year="data.leftCenterYear"
></eP2>
</div>
@ -63,9 +71,11 @@
{{ item }}
</div>
</div>
<div style="overflow:hidden;margin-top: 20px;">
<div style="overflow: hidden; margin-top: 20px">
<div class="minPie">
<div class="minPieImg" style="letter-spacing: 1px;">集聚类型分布</div>
<div class="minPieImg" style="letter-spacing: 1px">
集聚类型分布
</div>
<Pie3dMt :list="minData.minPieData1"></Pie3dMt>
</div>
<div class="minPie">
@ -74,12 +84,12 @@
</div>
</div>
<div style="width:100%;height:200px;margin: 20px 0;">
<div style="width: 100%; height: 200px; margin: 20px 0">
<img
src="../assets/images/sjfx/minImg.jpg"
style="width:100%;height:100%;"
style="width: 100%; height: 100%"
alt=""
>
/>
</div>
</div>
<div class="flex1">
@ -109,11 +119,7 @@
<i></i>
</div>
</div>
<img
src="@/assets/images/sjfx/right3D.png"
alt=""
class="right3d"
/>
<img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" />
<!-- <right2></right2> -->
</div>
<div class="flex1">
@ -123,11 +129,7 @@
<i></i>
</div>
</div>
<img
src="@/assets/images/sjfx/map.png"
alt=""
class="map"
/>
<img src="@/assets/images/sjfx/map.png" alt="" class="map" />
</div>
</div>
</div>
@ -145,8 +147,16 @@ import edxs from "./echart_analyze/edXS.vue";
import eP2 from "./echart_analyze/eP2.vue";
import ylXZZC from "./echart_analyze/ylXZZC.vue";
import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
import ViewDataimg3 from "@/assets/images/sjfx/sjfx3.png";
const showR = ref(false); //loading
const data = reactive({
datashow: null,
backgroundImageUrl: ViewDataimg,
backgroundImageUrl1: ViewDataimg1,
leftTop1: [],
gxy: [], //高血压
whistleblower: {
@ -155,37 +165,77 @@ const data = reactive({
time: ["61-70", "71-80", "81-90", "91-100", "100以上"],
},
}, //高血压柱状图
leftCenter1: ["100", "80", "199", "133", "210"], //大病住院
leftCenter2: ["100", "120", "199", "133", "210"], //糖尿病
ViewData: [
{
name: "医保支出万元以上",
value: "11112",
show: false,
data: ["100", "120", "199", "133", "210"], //医保支出万元以上
},
{
name: "大病住院",
value: "120",
show: false,
data: ["100", "120", "199", "133", "210"], //大病住院
},
{
name: "高血压",
value: "2345",
show: false,
data: ["100", "120", "199", "133", "210"], //高血压
},
{
name: "糖尿病",
value: "1241",
show: false,
data: ["100", "120", "199", "133", "210"], //糖尿病
},
{
name: "高血脂",
value: "1414",
show: false,
data: ["100", "120", "199", "133", "210"], //高血脂
},
{
name: "高血糖",
value: "2355",
show: false,
data: ["100", "120", "199", "133", "210"], //高血糖
},
{
name: "残疾",
value: "455",
show: false,
data: ["100", "120", "199", "133", "210"], //残疾
},
{
name: "低保",
value: "142",
show: false,
data: ["100", "120", "199", "133", "210"], //低保
},
{
name: "特困",
value: "98",
show: false,
data: ["100", "120", "199", "133", "210"], //特困
},
{
name: "其他疾病",
value: "144",
show: false,
data: ["100", "120", "199", "133", "210"], //其他疾病
},
],
DataViewing: {}, //数据查看
leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
ViewData: {
data: [
"11112",
"120",
"2345",
"1241",
"1414",
"2355",
"455",
"142",
"98",
"144",
],
name: [
"医保支出万元以上",
"大病住院",
"高血压",
"高血压",
"高血脂",
"高血糖",
"残疾",
"低保",
"特困",
"其他疾病",
],
},
zccs1: [ "图书馆","交通出行","景区",],//一码通
zccs2: [ "100","130","220",],//一码通
zccs1: ["图书馆", "交通出行", "景区"], //一码通
zccs2: ["100", "130", "220"], //一码通
});
const minData = reactive({
minTop: ["4", "9", "1", "6", "2", "人"],
@ -200,13 +250,56 @@ const minData = reactive({
minPieData2: {
wfgz: "1500",
xstp: "1610",
skym: "1610"
skym: "1610",
},
});
// 数据查看
const onViewData = (value, i) => {
data.ViewData[i].show = !data.ViewData[i].show;
data.DataViewing = data.ViewData.filter((item) => item.show).map((item) => ({
name: item.name,
data: item.data,
}));
// console.log(data.DataViewing, 666);
onMounted(() => { });
// switch (value) {
// case "医保支出万元以上":
// data.ViewData[i].show = !data.ViewData[i].show;
// break;
// case "大病住院":
// data.ViewData[i].show = true;
// break;
// case "高血压":
// data.ViewData[i].show = true;
// break;
// case "糖尿病":
// data.ViewData[i].show = true;
// break;
// case "高血脂":
// data.ViewData[i].show = true;
// break;
// case "高血糖":
// data.ViewData[i].show = true;
// break;
// case "残疾":
// data.ViewData[i].show = true;
// break;
// case "低保":
// data.ViewData[i].show = true;
// break;
// case "特困":
// data.ViewData[i].show = true;
// break;
// case "其他疾病":
// data.ViewData[i].show = true;
// break;
// default:
// break;
// }
};
onMounted(() => {});
onBeforeMount(() => { });
onBeforeMount(() => {});
</script>
<style lang="scss" scoped>
@ -473,53 +566,47 @@ onBeforeMount(() => { });
}
.ViewData {
.ViewDatalist {
// display: flex;
// flex-wrap: wrap;
background-image: url(@/assets/images/sjfx/sjfx11.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 550px;
height: 300px;
display: flex;
flex-wrap: wrap;
color: #ffffff;
.ViewDataTop {
width: 114px;
display: flex;
align-items: center;
flex-direction: column;
}
.ViewDataBottom {
display: flex;
align-items: center;
flex-direction: column;
}
.ViewDataTopimg {
background-image: url(@/assets/images/sjfx/sjfx.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 80px;
height: 80px;
margin-bottom: -24px;
}
.ViewDataTopimg_1 {
background-image: url(@/assets/images/sjfx/sjfx1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 105px;
height: 57px;
}
.ViewDataBottomimg {
background-image: url(@/assets/images/sjfx/sjfx2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 80px;
height: 80px;
margin-bottom: -24px;
}
.ViewDataBottomimg_1 {
background-image: url(@/assets/images/sjfx/sjfx3.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 105px;
height: 57px;
.ViewDataTopimg {
background-image: url(@/assets/images/sjfx/sjfx.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 80px;
height: 80px;
margin-bottom: -24px;
text-align: center;
line-height: 100px;
}
.ViewDataTopimg_1 {
background-image: url(@/assets/images/sjfx/sjfx1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 105px;
height: 57px;
}
.ViewDataBottomimg {
background-image: url(@/assets/images/sjfx/sjfx2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 80px;
height: 80px;
margin-bottom: -24px;
}
.ViewDataBottomimg_1 {
background-image: url(@/assets/images/sjfx/sjfx3.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 105px;
height: 57px;
}
}
}
}

111
src/view/echart_analyze/eP2.vue
View File

@ -3,13 +3,19 @@
</template>
<script setup>
import { onBeforeMount, reactive, ref } from "vue";
import { onBeforeMount, reactive, ref, watch } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
list1: {
type: Array,
default: () => {
@ -31,11 +37,13 @@ const props = defineProps({
});
const data = reactive({
list: [],
list1: [],
list2: [],
year: [],
option: {},
bg: [],
name: [],
});
const getOption = () => {
@ -46,7 +54,7 @@ const getOption = () => {
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
},
legend: {
data: ["大病住院", "糖尿病"],
data: data.name,
top: "5%",
right: "10%",
textStyle: {
@ -56,12 +64,11 @@ const getOption = () => {
},
grid: {
top: "25%",
left: "10%",
right: "10%",
left: "6%",
right: "6%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: data.year,
@ -76,7 +83,7 @@ const getOption = () => {
yAxis: [
{
type: "value",
name: "大病住院",
name: "人数/人",
splitLine: {
show: true,
lineStyle: {
@ -133,11 +140,8 @@ const getOption = () => {
fontSize: 14, // 这里设置字体大小为20
},
axisLabel: {
show: false,
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
@ -151,7 +155,6 @@ const getOption = () => {
},
},
],
series: [
{
name: "背景",
@ -175,7 +178,7 @@ const getOption = () => {
},
label: {
show: true,
color: "#ffffff",
color: "#2468FF",
formatter: function (data) {
return data.value;
},
@ -197,7 +200,7 @@ const getOption = () => {
},
label: {
show: true,
color: "#ffffff",
color: "#00FCFF",
formatter: function (data) {
return data.value;
},
@ -209,23 +212,97 @@ const getOption = () => {
};
const setChart = () => {
// Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option);
};
// const setChart1 = () => {
// if (Object.keys(data.list).length !== 0) {
// data.list1 = [];
// data.list2 = [];
// data.list.data.forEach((item) => {
// // data.list1.push(item.jzrs); //救助人数
// // data.list2.push(item.jzje); //救助金额
// data.option.series.push();
// });
// data.name = [];
// data.list.forEach((item) => {
// data.name.push(item.name); //数据名
// });
// console.log(data.list, data.name, "数据名");
// }
// };
const setChart1 = () => {
data.name = [];
if (Object.keys(data.list).length !== 0) {
data.list1 = [];
data.list2 = [];
// data.name = [];
data.option.series = [];
// Define background series
data.option.series.push({
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
});
data.list.forEach((item) => {
// console.log(item, "数据名111");
data.option.series.push({
yAxisIndex: 0,
name: item.name,
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
label: {
show: true,
color: "#2468FF",
formatter: function (data) {
return data.value;
},
},
data: [item.data],
});
});
data.list.forEach((item) => {
data.name.push(item.name); //数据名
});
// 使用生命钩子
console.log(data.list, data.name, "数据名");
}
};
// 监听数据
watch(
() => props.list,
(newVal, oldVal) => {
setTimeout(() => {
data.list = newVal;
// console.log("救助人1", data.list);
getOption();
setChart1();
setChart();
}, 600);
}
);
// 使用生命钩子
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.list1 = props.list1;
data.list2 = props.list2;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
setChart1();
getOption();
setChart();
}, 600);