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: [
{
name: "职工医疗保险发放人次",
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,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
"#FA897B",
"#FFDD94",
"#D0E6A5",
"#FFDD94",
"#4675C0",
"#B8BFD6",
"#FFA876",
["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
];
let colorItem = colorList[params.dataIndex];
return colorItem;
if (params.dataIndex == 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 % 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>

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

@ -109,21 +109,16 @@ let option = {
data: [2.0, 4.9, 7.0, 23.2, 25.6],
barWidth: 20,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
"#FA897B",
"#FFDD94",
"#D0E6A5",
"#FFDD94",
"#4675C0",
"#B8BFD6",
"#FFA876",
];
let colorItem = colorList[params.dataIndex];
return colorItem;
color: 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)",
},
]),
},
},
],

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

@ -96,22 +96,89 @@ let option = {
{
name: "职工医疗保险发放人次",
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,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
"#FA897B",
"#FFDD94",
"#D0E6A5",
"#FFDD94",
"#4675C0",
"#B8BFD6",
"#FFA876",
["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
];
let colorItem = colorList[params.dataIndex];
return colorItem;
if (params.dataIndex == 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 % 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
);
}
},
},
},

41
src/view/hygiene.vue
View File

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