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

1

This commit is contained in:
姚宇浩 2024-04-17 15:25:25 +08:00
parent 1f54cd7010
commit c5296e984c
5 changed files with 339 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/view/echarts_hygiene/eP3.vue
View File

@ -90,28 +90,94 @@ let option = {
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: "职工医疗保险发放人次", name: "职工医疗保险发放人次",
type: "bar", type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6], data: [2.0, 4.9, 7.0, 23.2, 25.6,7,8],
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
let colorList = [ let colorList = [
"#FA897B", ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
"#FFDD94", ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
"#D0E6A5", ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
"#FFDD94",
"#4675C0",
"#B8BFD6",
"#FFA876",
]; ];
let colorItem = colorList[params.dataIndex]; if (params.dataIndex == 0) {
return colorItem; return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 3 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
],
false
);
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
false
);
}
}, },
}, },
}, },

149
src/view/echarts_hygiene/eP4.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<div ref="chart" style="width: 100%; height:100%;"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const datas = {
value: 92.96,
text: "留 守 儿 童"
}
let option = {
series: [
// 外圈背景
{
type: "pie",
center: ["60%", "55%"],
radius: ["50%", "82%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图，展示整体数据概览*/
{
name: 'pie',
type: 'pie',
roundCap: true,
clockWise: true,
startAngle: 180,
labelLine: {
show: false
},
radius: ['50%', '70%'],
hoverAnimation: false,
center: ['60%', '55%'],
data: [
{
value: datas.value,
label: {
normal: {
position: 'center',
show: true,
textStyle: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
lineHeight: 30,
rich: {
cell: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
},
text: {
fontSize: 16,
fontFamily: 'FZLanTingHeiS-L-GB',
color: '#fff',
}
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
offset: 0,
color: 'rgba(0, 255, 250, 0.29)'
},
{
offset: 0.5,
color: 'rgba(0, 255, 250, 0.8)'
}, {
offset: 1,
color: 'rgba(0, 255, 250, 1)'
}]),
shadowColor: 'rgba(1,1,1,0.5)',
shadowBlur: 1
}
}
},
{
value: 100 - datas.value,
name: '',
itemStyle: {
normal: {
color: '#095b9b', // 未完成的圆环的颜色
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#095b9b' // 未完成的圆环的颜色
}
}
}]
}
]
};
// 使用生命钩子
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>

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

@ -108,22 +108,17 @@ let option = {
type: "bar", type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6], data: [2.0, 4.9, 7.0, 23.2, 25.6],
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: function (params) { {
let colorList = [ offset: 0,
"#FA897B", color: "rgba(23, 237, 255, 1)",
"#FFDD94",
"#D0E6A5",
"#FFDD94",
"#4675C0",
"#B8BFD6",
"#FFA876",
];
let colorItem = colorList[params.dataIndex];
return colorItem;
}, },
}, {
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
}, },
}, },
], ],

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

@ -96,22 +96,89 @@ let option = {
{ {
name: "职工医疗保险发放人次", name: "职工医疗保险发放人次",
type: "bar", type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6], data: [2.0, 4.9, 7.0, 23.2, 25.6,9,9],
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
let colorList = [ let colorList = [
"#FA897B", ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
"#FFDD94", ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
"#D0E6A5", ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
"#FFDD94",
"#4675C0",
"#B8BFD6",
"#FFA876",
]; ];
let colorItem = colorList[params.dataIndex]; if (params.dataIndex == 0) {
return colorItem; return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 3 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
],
false
);
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
false
);
}
}, },
}, },
}, },

53
src/view/hygiene.vue
View File

@ -50,7 +50,8 @@
</div> </div>
<div class="minTopPart2"> <div class="minTopPart2">
<div class="left"> <div class="left">
<div class="leftImg"></div> <div class="leftImg"><eP4></eP4></div>
<div class="left_me"> <div class="left_me">
<div>建档率</div> <div>建档率</div>
<div>92.96%</div> <div>92.96%</div>
@ -74,23 +75,22 @@
</div> </div>
</div> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
<div class="flex1" style="flex: 0.9"> <div class="flex1" style="flex:0.9">
<div class="yd_title mechanism"></div> <div class="yd_title mechanism"></div>
<eP6></eP6> <eP6></eP6>
</div> </div>
<div class="flex1" style="flex:0.5"> <div class="flex1" style="flex:1.1;">
<div class="yd_title service"></div> <div class="yd_title service"></div>
<eP7></eP7> <eP7></eP7>
</div> </div>
<div class="flex1" style="flex:0.5"> <div >
<div class="yd_title last"></div> <div class="yd_title last"></div>
<div class="table"> <div class="table">
<div class="item">3月2日健康日，在龙中公园进行健康活动宣</div> <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
<div class="item">3月2日健康日，在龙中公园进行健康活动宣</div> <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
<div class="item">3月2日健康日，在龙中公园进行健康活动宣</div> <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
<div class="item">3月2日健康日，在龙中公园进行健康活动宣</div> <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
<div class="item">3月2日健康日，在龙中公园进行健康活动宣</div> <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
<div class="item">3月2日健康日，在龙中公园进行健康活动宣</div>
</div> </div>
</div> </div>
</div> </div>
@ -105,8 +105,7 @@ import eP3 from "./echarts_hygiene/eP3.vue";
import eP7 from "./echarts_hygiene/eP7.vue"; import eP7 from "./echarts_hygiene/eP7.vue";
import eP6 from "./echarts_hygiene/eP6.vue"; import eP6 from "./echarts_hygiene/eP6.vue";
import eP5 from "./echarts_hygiene/eP5.vue"; import eP5 from "./echarts_hygiene/eP5.vue";
import ylSMFW from "./echarts_yl/ylSMFW.vue"; import eP4 from "./echarts_hygiene/eP4.vue";
import ylXZZC from "./echarts_yl/ylXZZC.vue";
import { ref, onMounted, onBeforeMount } from "vue"; import { ref, onMounted, onBeforeMount } from "vue";
const leftchoose = ref({ const leftchoose = ref({
first: "1", first: "1",
@ -618,12 +617,10 @@ const change = (name, index) => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 60px; margin-left: 60px;
margin-top: -10px;
.leftImg { .leftImg {
width: 81px; width: 105px;
height: 81px; height: 105px;
background-image: url(@/assets/images/hygiene/xia_right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
} }
.left_me { .left_me {
margin-left: 10px; margin-left: 10px;
@ -636,7 +633,7 @@ const change = (name, index) => {
display: flex; display: flex;
align-items: center; align-items: center;
// justify-content: center; // justify-content: center;
margin-left: 60px; margin-left: 40px;
.rightImg { .rightImg {
width: 81px; width: 81px;
height: 81px; height: 81px;
@ -654,17 +651,17 @@ const change = (name, index) => {
} }
.table { .table {
width: 95%; width: 95%;
min-height: 200px; height: 200px;
height: calc(100% - 75px); height: calc(100% - 75px);
background: red; // background: red;
overflow-y: auto; overflow-y: auto;
// .item { .item {
// margin-top: 10px; margin-top: 10px;
// padding: 16px 20px; padding: 16px 20px;
// background-image: url(@/assets/images/hygiene/table_bg.png); background-image: url(@/assets/images/hygiene/table_bg.png);
// background-repeat: no-repeat; background-repeat: no-repeat;
// background-size: 100% 100%; background-size: 100% 100%;
// color: #ffffff; color: #ffffff;
// } }
} }
</style> </style>