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

gx

This commit is contained in:
duanxiaohai 2024-07-12 15:58:06 +08:00
parent fbb5c0ee53
commit 8c3ca6de19
6 changed files with 353 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

BIN
src/assets/images/sjfx/sjfx6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
src/assets/images/sjfx/sjfx7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
src/assets/images/sjfx/sjfx8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

186
src/view/analyze.vue
View File

@ -67,7 +67,7 @@
</div> -->
<FlipClock :list="minData.minTop"></FlipClock>
</div>
<div style="overflow: hidden; margin-top: 20px">
<div style="overflow: hidden">
<div class="minPie">
<div class="minPieImg" style="letter-spacing: 1px">
集聚类型分布
@ -101,7 +101,60 @@
<i></i>
</div>
</div>
<ylXZZC :list1="data.zccs1" :list2="data.zccs2" v-if="showEchart"></ylXZZC>
<div class="choose">
<div
class="choose_0"
:class="jz == '1' ? 'choose_1' : 'choose_2'"
@click="jzChange('1')"
>
特困
</div>
<div
class="choose_0"
:class="jz == '2' ? 'choose_1' : 'choose_2'"
@click="jzChange('2')"
>
低保
</div>
<div
class="choose_0"
:class="jz == '3' ? 'choose_1' : 'choose_2'"
@click="jzChange('3')"
>
低边
</div>
<div
class="choose_0"
:class="jz == '4' ? 'choose_1' : 'choose_2'"
@click="jzChange('4')"
>
困难残疾人
</div>
<div
class="choose_0"
:class="jz == '5' ? 'choose_1' : 'choose_2'"
@click="jzChange('5')"
>
困难军人
</div>
<div
class="choose_0"
:class="jz == '6' ? 'choose_1' : 'choose_2'"
@click="jzChange('6')"
>
困难职工
</div>
</div>
<ePie4
:list="data.list.data"
:year="data.list.year"
v-if="showEchart"
></ePie4>
<!-- <ylXZZC
:list1="data.zccs1"
:list2="data.zccs2"
v-if="showEchart"
></ylXZZC> -->
</div>
</div>
<div class="displayFlex right_bg">
@ -157,6 +210,7 @@ import edxs from "./echart_analyze/edXS.vue";
import eP2 from "./echart_analyze/eP2.vue";
import ylXZZC from "./echart_analyze/ylXZZC.vue";
import FlipClock from "./echart_analyze/FlipClock.vue";
import ePie4 from "./echart_analyze/pie4.vue";
import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
@ -179,8 +233,48 @@ const jypxList = reactive([
img: jypx2,
},
]);
// 救助分析tap切换
const jz = ref("1");
const jzChange = (value) => {
jz.value = value;
data.list = data.dataAnalysis[value -1];
};
const showEchart = ref(false);
const data = reactive({
list: {
data: ["50", "100", "120", "62", "70"],
year: ["2020", "2021", "2022", "2023", "2024"],
},
list1: {},
list2: {},
dataAnalysis: [
{
data: ["50", "100", "120", "62", "70"],
year: ["2020", "2021", "2022", "2023", "2024"],
},
{
data: ["10", "100", "120", "62", "70"],
year: ["2020", "2021", "2022", "2023", "2024"],
},
{
data: ["60", "100", "120", "62", "70"],
year: ["2020", "2021", "2022", "2023", "2024"],
},
{
data: ["40", "100", "120", "62", "70"],
year: ["2020", "2021", "2022", "2023", "2024"],
},
{
data: ["50", "190", "120", "62", "70"],
year: ["2020", "2021", "2022", "2023", "2024"],
},
{
data: ["50", "100", "120", "82", "70"],
year: ["2020", "2021", "2022", "2023", "2024"],
},
], //数据分析
datashow: null,
backgroundImageUrl: ViewDataimg,
backgroundImageUrl1: ViewDataimg1,
@ -363,42 +457,42 @@ const getData = async () => {
data.whistleblower.culeTotal.data[index] = res.data.lnr.rksj[key];
});
data.wjybrysl = res.data.wjybrysl; //医保
// const mappings = [
// { key: 'ylzzwyrs', dataKey: 'ylzzwy' },
// { key: 'dbzyrs', dataKey: 'dbzyrs' },
// { key: 'gxyrs', dataKey: 'gxyrs' },
// { key: 'tnbrs', dataKey: 'tnbrs' },
// { key: 'gxzrs', dataKey: 'gxzrs' },
// { key: 'gxtrs', dataKey: 'gxtrs' },
// { key: 'cjrs', dataKey: 'cjrs' },
// { key: 'dibao', dataKey: 'dbjzrc' },
// { key: 'tekun', dataKey: 'tkjzrc' },
// { key: 'qtjbrs', dataKey: 'qtjbrs' },
// ];
// const mappings = [
// { key: 'ylzzwyrs', dataKey: 'ylzzwy' },
// { key: 'dbzyrs', dataKey: 'dbzyrs' },
// { key: 'gxyrs', dataKey: 'gxyrs' },
// { key: 'tnbrs', dataKey: 'tnbrs' },
// { key: 'gxzrs', dataKey: 'gxzrs' },
// { key: 'gxtrs', dataKey: 'gxtrs' },
// { key: 'cjrs', dataKey: 'cjrs' },
// { key: 'dibao', dataKey: 'dbjzrc' },
// { key: 'tekun', dataKey: 'tkjzrc' },
// { key: 'qtjbrs', dataKey: 'qtjbrs' },
// ];
// mappings.forEach((mapping, index) => {
// data.ViewData[index].data = res.data.dataShow[mapping.key][mapping.dataKey];
// data.ViewData[index].value = res.data.dataShow[mapping.key].total;
// });
// mappings.forEach((mapping, index) => {
// data.ViewData[index].data = res.data.dataShow[mapping.key][mapping.dataKey];
// data.ViewData[index].value = res.data.dataShow[mapping.key].total;
// });
data.leftCenterYear = res.data.dataShow.year;
// data.ViewData[0].data = res.data.dataShow.ylzzwyrs.ylzzwy; //医保支出万元以上
// data.ViewData[0].value = res.data.dataShow.ylzzwyrs.total; //医保支出万元以上年份
// data.ViewData[1].data = res.data.dataShow.dbzyrs.dbzyrs; //大病住院
// data.ViewData[1].value = res.data.dataShow.dbzyrs.total; //大病住院年份
data.ViewData[2].data = res.data.dataShow.gxyrs.gxyrs; //高血压
data.ViewData[2].value = res.data.dataShow.gxyrs.total; //高血压年份
data.ViewData[3].data = res.data.dataShow.tnbrs.tnbrs; //糖尿病
data.ViewData[3].value = res.data.dataShow.tnbrs.total; //糖尿病年份
data.ViewData[2].data = res.data.dataShow.gxyrs.gxyrs; //高血压
data.ViewData[2].value = res.data.dataShow.gxyrs.total; //高血压年份
data.ViewData[3].data = res.data.dataShow.tnbrs.tnbrs; //糖尿病
data.ViewData[3].value = res.data.dataShow.tnbrs.total; //糖尿病年份
// data.ViewData[4].data = res.data.dataShow.gxzrs.gxzrs; //高血脂
// data.ViewData[4].value = res.data.dataShow.gxzrs.total; //高血脂年份
// data.ViewData[5].data = res.data.dataShow.gxtrs.gxtrs; //高血糖
// data.ViewData[5].value = res.data.dataShow.gxtrs.total; //高血糖年份
// data.ViewData[6].data = res.data.dataShow.cjrs.cjrs; //残疾
// data.ViewData[6].value = res.data.dataShow.cjrs.total; //残疾年份
data.ViewData[7].data = res.data.dataShow.dibao.dbjzrc; //低保
data.ViewData[7].value = res.data.dataShow.dibao.total; //低保年份
data.ViewData[8].data = res.data.dataShow.tekun.tkjzrc; //特困
data.ViewData[8].value = res.data.dataShow.tekun.total; //特困年份
data.ViewData[7].data = res.data.dataShow.dibao.dbjzrc; //低保
data.ViewData[7].value = res.data.dataShow.dibao.total; //低保年份
data.ViewData[8].data = res.data.dataShow.tekun.tkjzrc; //特困
data.ViewData[8].value = res.data.dataShow.tekun.total; //特困年份
// data.ViewData[9].data = res.data.dataShow.qtjbrs.qtjbrs; //其他疾病
// data.ViewData[9].value = res.data.dataShow.qtjbrs.total; //其他疾病年份
showEchart.value = true;
@ -493,6 +587,11 @@ onBeforeUnmount(() => {
}
.center_1 {
background-image: url(@/assets/images/sjfx/sjfx6.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.center_2 {
background-image: url(@/assets/images/sjfx/ymt.png);
background-repeat: no-repeat;
background-size: 100% 100%;
@ -812,11 +911,44 @@ onBeforeUnmount(() => {
.jypx {
width: 100%;
height: 200px;
margin: 20px 0;
// margin: 20px 0;
margin-bottom: 10px;
position: relative;
display: flex;
align-items: center;
}
.choose {
display: flex;
justify-content: center;
margin: 8px 0;
.choose_0 {
cursor: pointer;
width: 110px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 15px;
color: #ffffff;
margin-right: 10px;
}
// .choose_0:last-child {
// margin-right: 0px;
// }
.choose_1 {
background-image: url(@/assets/images/sjfx/sjfx7.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.choose_2 {
background-image: url(@/assets/images/sjfx/sjfx8.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.minPieImg2 {
position: absolute;
width: 137px;

194
src/view/echart_analyze/pie4.vue Normal file
View File

@ -0,0 +1,194 @@
<template>
<div ref="chart" style="width: 100%; height: 200px"></div>
</template>
<script setup>
import { onMounted, reactive, ref, onBeforeMount, defineProps,watch } 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: [6280, 6280, 6280, 5924, 1824],
year: [2020, 2021, 2022, 2023, 2024],
bg: [0, 0, 0, 0, 0],
option: {},
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a0}:{c0} ",
},
grid: {
top: "15%",
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
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",
fontSize: 16,
},
},
},
yAxis: {
name: "人数/次",
type: "value",
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
series: [
{
name: "手工零星报销人数",
type: "line",
stack: "Total",
symbol: "emptyCircle",
smooth: true,
symbolSize: 10,
label: {
show: true,
color: "#ffffff",
position: "top",
fontSize: 14,
formatter: function (data) {
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
// areaStyle: {
// color: "#F4F65B",
// normal: {
// //线性渐变，前4个参数分别是x0,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, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// },
// },
data: data.list,
},
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
};
};
const setChart = () => {
// Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option);
};
watch(
() => props.list,
(newVal, oldVal) => {
data.list = newVal;
// data.year = props.year;
console.log(data.list,data.year,newVal,'数据分析');
getOption();
setChart();
}
);
watch(
() => props.year,
(newVal, oldVal) => {
data.year = newVal;
getOption();
setChart();
}
);
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.year = props.year;
// console.log(data.list,data.year,'数据分析');
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>