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

gx

This commit is contained in:
duanxiaohai 2024-06-04 14:07:22 +08:00
parent c2df36a341 e373f23594
commit a07a4a2efe
13 changed files with 780 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/sy/jyfw.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
src/assets/images/sy/jyfwM.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/images/sy/主页人口.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/ylMove.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

1
src/components/header.vue
View File

@ -164,6 +164,7 @@ onMounted(() => {
display: flex;
position: absolute;
align-items: center;
z-index: 2;
}
&-left {

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

@ -44,32 +44,6 @@ const getOption = () => {
{
type: "category",
axisLabel: {
// formatter: function (params) {
// var str = ""; // 最终拼接成的字符串
// var paramsLen = params.length; // 获取每项文字的个数
// var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
// var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
// if (paramsLen > len) {
// //大于设定的len就换行，不大于就不变化
// for (var i = 0; i < rowNumber; i++) {
// var temp = ""; // 表示每一次截取的字符串
// var start = i * len; // 开始截取的位置
// var end = start + len; // 结束截取的位置
// if (i == rowNumber - 1) {
// // 最后一次不换行
// temp = params.substring(start, paramsLen);
// } else {
// // 每一次拼接字符串并换行
// temp = params.substring(start, end) + "\n";
// }
// str += temp; // 最终拼成的字符串
// }
// } else {
// // 给新的字符串赋值
// str = params;
// }
// return str; //返回字符串
// },
textStyle: {
color: "#ffffff",
fontSize: 15,
@ -116,6 +90,7 @@ const getOption = () => {
],
series: [
{
z: 1,
name: "精神病健康居家在册管理人数",
type: "bar",
data: data.rs,
@ -131,65 +106,143 @@ const getOption = () => {
itemStyle: {
normal: {
color: function (params) {
// var colorList = [
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(23, 237, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(23, 237, 255, 0.20)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(255, 243, 119, 1)",
// },
// {
// offset: 1,
// color: "rgba(255, 242, 142, 0.20)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(142, 187, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(142, 187, 255, 0.20)",
// },
// ],
// false
// ),
// ];
var colorList = [
new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
false
),
new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(255, 242, 142, .7)" },
{ offset: 0.5, color: "rgba(255, 242, 142, .7)" },
{ offset: 0.5, color: "rgba(255, 242, 142, .3)" },
{ offset: 1, color: "rgba(255, 242, 142, .5)" },
],
false
),
new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
false
),
},
];
return colorList[params.dataIndex % colorList.length];
},
},
},
},
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.rs,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
normal: {
color: function (params) {
var colorList = [
{
offset: 1,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 1)",
},
];
return colorList[params.dataIndex % colorList.length].color;
},
},
},
// itemStyle: {
// borderColor: "#2fffa4",
// color: "rgba(142, 187, 255, 1)",
// },
},
],
};
};

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

@ -14,14 +14,14 @@ const props = defineProps({
year: {
type: Array,
default: () => [],
}
},
});
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
})
});
const chart = ref(); // 创建DOM引用
const getOption = () => {
@ -66,8 +66,9 @@ data.option = {
{
name: "历年体检人数",
type: "value",
nameTextStyle: { // 设置Y轴名称的样式
fontSize: 14 // 这里设置字体大小为20
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
splitLine: {
show: true,
@ -123,6 +124,7 @@ data.option = {
],
series: [
{
z: 1,
name: "体检人数",
type: "bar",
data: data.list,
@ -130,7 +132,7 @@ data.option = {
label: {
show: true,
color: "#ffffff",
position:'top',
position: "top",
formatter: function (data) {
return data.value;
},
@ -138,42 +140,100 @@ data.option = {
itemStyle: {
normal: {
color: function (params) {
// var colorList = [
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(23, 237, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(23, 237, 255, 0.20)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(255, 243, 119, 1)",
// },
// {
// offset: 1,
// color: "rgba(255, 242, 142, 0.20)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(142, 187, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(142, 187, 255, 0.20)",
// },
// ],
// false
// ),
// ];
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
false),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(255, 242, 142, .7)" },
{ offset: 0.5, color: "rgba(255, 242, 142, .7)" },
{ offset: 0.5, color: "rgba(255, 242, 142, .3)" },
{ offset: 1, color: "rgba(255, 242, 142, .5)" },
],
false),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
false),
},
];
return colorList[params.dataIndex % colorList.length];
},
},
@ -189,29 +249,66 @@ data.option = {
data: data.bg.map(() => 100),
barWidth: 50,
},
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [23, 15],
itemStyle: {
normal: {
color: function (params) {
var colorList = [
{
offset: 1,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 1)",
},
];
return colorList[params.dataIndex % colorList.length].color;
},
},
},
// itemStyle: {
// borderColor: "#2fffa4",
// color: "rgba(142, 187, 255, 1)",
// },
},
],
};
}
};
const setChart = () => {
// Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option);
}
};
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list
data.year = props.year
data.list = props.list;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0)
})
getOption()
setChart()
}, 600)
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>
<style scoped>

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

@ -126,7 +126,7 @@ const getOption = () => {
data: data.zgffrc,
symbol: "diamond",
symbolOffset: ["-20%", "-50%"],
symbolSize: [19, 10],
symbolSize: [17, 10],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
@ -183,7 +183,7 @@ const getOption = () => {
data: data.cxffrc,
symbol: "diamond",
symbolOffset: [4, "-50%"],
symbolSize: [19, 10],
symbolSize: [17, 10],
itemStyle: {
borderColor: "#32ffee",
color: "rgba(23, 237, 255, 1)",

16
src/view/echarts_work/eP3.vue
View File

@ -246,7 +246,7 @@ const getOption = () => {
yAxisIndex: 0,
name: "特困救助人次",
data: data.list1,
barWidth: 10,
barWidth: 15,
type: "bar",
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -282,7 +282,7 @@ const getOption = () => {
yAxisIndex: 0,
name: "低保救助人次",
data: data.list2,
barWidth: 10,
barWidth: 15,
type: "bar",
itemStyle: {
color: {
@ -318,7 +318,7 @@ const getOption = () => {
yAxisIndex: 0,
name: "低边救助人次",
data: data.list3,
barWidth: 10,
barWidth: 15,
type: "bar",
itemStyle: {
color: {
@ -386,8 +386,8 @@ const getOption = () => {
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["-20%", "-50%"],
symbolSize: [14, 8],
symbolOffset: ["-45%", "-50%"],
symbolSize: [16, 8],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
@ -401,7 +401,7 @@ const getOption = () => {
data: data.list2,
symbol: "diamond",
symbolOffset: ["0", "-50%"],
symbolSize: [14, 8],
symbolSize: [16, 8],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 136, 255, 1)",
@ -414,8 +414,8 @@ const getOption = () => {
symbolPosition: "end",
data: data.list3,
symbol: "diamond",
symbolOffset: [5, "-50%"],
symbolSize: [14, 8],
symbolOffset: [7.5, "-50%"],
symbolSize: [16, 8],
itemStyle: {
borderColor: "#32ffee",
color: "rgba(23, 237, 255, 1)",

47
src/view/echarts_yl/ylJHSY.vue
View File

@ -210,18 +210,34 @@ const getOption = () => {
],
series: [
{
z: 1,
yAxisIndex: 0,
name: "计划生育人数",
data: data.list1,
barWidth: 20,
type: "bar",
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
label: {
show: true,
position:'inside',
color:'#ffffff',
position: "inside",
color: "#ffffff",
formatter: function (data) {
return data.value
}
return data.value;
},
},
},
{
@ -231,11 +247,11 @@ const getOption = () => {
type: "line", //线状图
label: {
show: true,
position:'top',
color:'#ffffff',
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value
}
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
@ -274,6 +290,21 @@ const getOption = () => {
},
type: "bar",
},
//顶部四边形
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
],
};
};

293
src/view/echarts_yl/ylSMFW copy.vue Normal file
View File

@ -0,0 +1,293 @@
<template>
<div ref="chart" style="width: 340px; height: 250px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const data = [120, 200, 150, 80, 70];
const lineData = [150, 230, 224, 218, 135];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// 背景颜色
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 0.5,
color: "rgba(142, 187, 255, 0.5)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
},
];
const option = {
color,
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {},
},
legend: {
data: ["上门服务时长", "上门服务次数"],
// top: "8%",
textStyle: {
fontSize: 16,
color: "#ffffff",
},
},
grid: {
top: "18%",
left: "3%",
right: "6%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
fontSize: 16,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
{
type: "category",
show: false,
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "时长/小时",
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
fontSize: 16,
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
name: "次数/次",
min: 0,
splitLine: {
//分割线配置
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
width: 1,
fontSize: 16,
},
},
axisLabel: {
//y轴文字的配置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgba(255, 255, 255, 0.3)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16,
color: "#ffffff",
lineHeight: 19,
fontFamily: "MicrosoftYaHei",
},
},
],
series: [
{
z: 1,
yAxisIndex: 0,
name: "上门服务时长",
data: data,
barWidth: 20,
type: "bar",
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
},
{
yAxisIndex: 1,
name: "上门服务次数",
data: lineData,
type: "line", //线状图
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
xAxisIndex: 1,
yAxisIndex: 2,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
data: data.map(() => 100),
barWidth: 40, //外阴影背景宽
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
type: "bar",
},
//顶部四边形
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
],
};
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

27
src/view/sy.vue
View File

@ -177,6 +177,7 @@
>
<div>{{ data.employmentService.jypx }}</div>
<div>就业培训</div>
<div class="moveImg"></div>
</div>
<div
class="left_3_1_item"
@ -184,6 +185,7 @@
>
<div>{{ data.employmentService.jyjxfw }}</div>
<div>就业见习服务</div>
<div class="moveImg"></div>
</div>
<div
class="left_3_1_item"
@ -191,6 +193,7 @@
>
<div>{{ data.employmentService.jyyz }}</div>
<div>就业援助</div>
<div class="moveImg"></div>
</div>
</div>
</div>
@ -198,6 +201,11 @@
<div class="displayFlex center_bg">
<div class="flex1">
<div class="people_total">
<img
src="../assets/images/sy/主页人口.gif"
style="width:70%;height:112%; margin: -2% 15%;"
alt=""
>
<div class="people_total_item left">
<div class="number">{{ data.PopulationData.man }}</div>
<img
@ -2021,20 +2029,29 @@ onBeforeMount(async () => {
//就业服务
.left_3_1 {
width: 94%;
margin-top: 15px;
margin-top: 40px;
display: flex;
justify-content: space-around;
&_item {
box-sizing: border-box;
width: 160px;
height: 133px;
height: 112px;
background-image: url(@/assets/images/sy/jyfw.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
padding-top: 22px;
position: relative;
.moveImg {
position: absolute;
width: 160px;
height: 140px;
bottom: 18px;
background-image: url(@/assets/images/sy/jyfwM.png);
background-repeat: no-repeat;
background-size: 100% 100%;
animation: example 3s infinite linear;
}
@keyframes example {
0% {
@ -2559,7 +2576,7 @@ table {
width: 146px;
height: 104px;
position: absolute;
left: -38px;
left: -40px;
top: -31px;
}
span {
@ -2609,7 +2626,7 @@ table {
width: 146px;
height: 104px;
position: absolute;
left: -38px;
left: -40px;
top: -31px;
}
span {

11
src/view/yl.vue
View File

@ -150,6 +150,7 @@
</div>
</div>
<div class="minTopPart">
<div class="moveImg"></div>
<div class="mtpImg1"></div>
<div class="mtpImg2"></div>
<div class="mtpImg3"></div>
@ -1044,6 +1045,16 @@ const getData = async () => {
margin-top: 10px;
position: relative;
.moveImg{
position: absolute;
background-image: url(@/assets/ylMove.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
left: 170px;
width: 190px;
height: 173px;
}
.mtpImg1 {
width: 140px;
height: 24px;