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

BIN
dist.zip

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -67,7 +67,7 @@
</div> --> </div> -->
<FlipClock :list="minData.minTop"></FlipClock> <FlipClock :list="minData.minTop"></FlipClock>
</div> </div>
<div style="overflow: hidden; margin-top: 20px"> <div style="overflow: hidden">
<div class="minPie"> <div class="minPie">
<div class="minPieImg" style="letter-spacing: 1px"> <div class="minPieImg" style="letter-spacing: 1px">
集聚类型分布 集聚类型分布
@ -101,7 +101,60 @@
<i></i> <i></i>
</div> </div>
</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> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
@ -157,6 +210,7 @@ import edxs from "./echart_analyze/edXS.vue";
import eP2 from "./echart_analyze/eP2.vue"; import eP2 from "./echart_analyze/eP2.vue";
import ylXZZC from "./echart_analyze/ylXZZC.vue"; import ylXZZC from "./echart_analyze/ylXZZC.vue";
import FlipClock from "./echart_analyze/FlipClock.vue"; import FlipClock from "./echart_analyze/FlipClock.vue";
import ePie4 from "./echart_analyze/pie4.vue";
import ViewDataimg from "@/assets/images/sjfx/sjfx.png"; import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png"; import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
@ -179,8 +233,48 @@ const jypxList = reactive([
img: jypx2, img: jypx2,
}, },
]); ]);
// tap
const jz = ref("1");
const jzChange = (value) => {
jz.value = value;
data.list = data.dataAnalysis[value -1];
};
const showEchart = ref(false); const showEchart = ref(false);
const data = reactive({ 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, datashow: null,
backgroundImageUrl: ViewDataimg, backgroundImageUrl: ViewDataimg,
backgroundImageUrl1: ViewDataimg1, backgroundImageUrl1: ViewDataimg1,
@ -493,6 +587,11 @@ onBeforeUnmount(() => {
} }
.center_1 { .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-image: url(@/assets/images/sjfx/ymt.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -812,11 +911,44 @@ onBeforeUnmount(() => {
.jypx { .jypx {
width: 100%; width: 100%;
height: 200px; height: 200px;
margin: 20px 0; // margin: 20px 0;
margin-bottom: 10px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; 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 { .minPieImg2 {
position: absolute; position: absolute;
width: 137px; width: 137px;

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: {
// //线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,
},
{
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>