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

gx

This commit is contained in:
姚宇浩 2024-04-22 13:46:46 +08:00
parent e3e7c4e775
commit 39b380fc56
3 changed files with 236 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/view/echarts_hygiene/eP4.vue
View File

@ -18,8 +18,8 @@ let option = {
// 外圈背景
{
type: "pie",
center: ["60%", "55%"],
radius: ["50%", "82%"],
center: ["55%", "55%"],
radius: ["70%", "90%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
@ -58,7 +58,7 @@ let option = {
},
radius: ['50%', '70%'],
hoverAnimation: false,
center: ['60%', '55%'],
center: ['55%', '55%'],
data: [
{
value: datas.value,

144
src/view/echarts_hygiene/eP4_1.vue Normal file
View File

@ -0,0 +1,144 @@
<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: 62.16,
}
let option = {
series: [
// 外圈背景
{
type: "pie",
center: ["55%", "55%"],
radius: ["70%", "90%"],
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: ['55%', '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(255, 224, 0, 0.29)'
}, {
offset: 1,
color: 'rgba(255, 224, 0, 1)'
}]),
shadowColor: 'rgba(1,1,1,0.5)',
shadowBlur: 1
}
}
},
{
value: 100 - datas.value,
name: '',
itemStyle: {
normal: {
color: 'rgba(255, 224, 0, 0.1)', // 未完成的圆环的颜色
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(255, 224, 0, 0.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>

153
src/view/hygiene.vue
View File

@ -79,14 +79,14 @@
<div class="leftImg"><eP4></eP4></div>
<div class="left_me">
<div>建档率</div>
<div style="margin-top: 5px">92.96%</div>
<div class="bo">92.96%</div>
</div>
</div>
<div class="right">
<div class="rightImg"></div>
<div class="rightImg"><eP4_1></eP4_1></div>
<div class="right_me">
<div>家庭医生</div>
<div style="margin-top: 5px">2000</div>
<div>家庭医生签约率</div>
<div class="bo">62.16%</div>
</div>
</div>
</div>
@ -141,6 +141,7 @@ import eP7 from "./echarts_hygiene/eP7.vue";
import eP6 from "./echarts_hygiene/eP6.vue";
import eP5 from "./echarts_hygiene/eP5.vue";
import eP4 from "./echarts_hygiene/eP4.vue";
import eP4_1 from "./echarts_hygiene/eP4_1.vue";
import tnb from "./echarts_hygiene/tnb.vue";
import gxy from "./echarts_hygiene/gxy.vue";
import { ref, onMounted, onBeforeMount } from "vue";
@ -209,6 +210,7 @@ const change = (name, index) => {
}
.familyPlanning {
width: 96%;
background-image: url(@/assets/images/hygiene/center_title_2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
@ -311,11 +313,13 @@ const change = (name, index) => {
}
.center_1 {
width: 96%;
background-image: url(@/assets/images/hygiene/center_title_1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.center_2 {
width: 96%;
background-image: url(@/assets/images/hygiene/new_center.png);
background-repeat: no-repeat;
background-size: 100% 100%;
@ -545,48 +549,7 @@ const change = (name, index) => {
border-bottom: 13px solid rgba(57, 59, 109, 1);
}
}
.history2 {
font-size: 26px;
color: #ffffff;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
font-style: normal;
font-family: PangMenZhengDao;
display: flex;
flex-direction: column;
align-items: center;
.va {
margin-top: 27px;
margin-bottom: 20px;
font-family: DINAlternate, DINAlternate;
font-size: 26px;
color: #ffffff;
line-height: 30px;
letter-spacing: 1px;
text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
text-align: right;
font-style: normal;
}
img {
width: 113px;
height: 121px;
}
.historyimg {
margin-top: 10px;
padding: 0 25px;
background-image: url(@/assets/images/hygiene/xtgl_1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 15px;
color: #ffffff;
line-height: 21px;
letter-spacing: 2px;
}
}
.concernLabel {
display: flex;
align-items: center;
@ -705,11 +668,54 @@ const change = (name, index) => {
height: 250px;
display: flex;
align-items: center;
justify-content: space-around;
}
.history2 {
font-size: 26px;
color: #ffffff;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
font-style: normal;
font-family: PangMenZhengDao;
display: flex;
flex-direction: column;
align-items: center;
.va {
margin-top: 27px;
margin-bottom: 20px;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 20px;
color: #ffffff;
line-height: 24px;
letter-spacing: 1px;
text-shadow: 0px 0px 23px rgba(0, 252, 255, 0.5);
text-align: center;
font-style: normal;
}
img {
width: 113px;
height: 121px;
}
.historyimg {
margin-top: 10px;
padding: 0 25px;
background-image: url(@/assets/images/hygiene/xtgl_1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 15px;
color: #ffffff;
line-height: 21px;
letter-spacing: 2px;
}
}
.minTopPart2 {
width: 368px;
height: 145px;
margin-left: 5px;
width: 420px;
height: 136px;
background-image: url(@/assets/images/hygiene/xia_1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
@ -717,50 +723,69 @@ const change = (name, index) => {
position: relative;
display: flex;
margin-top: 35px;
padding: 0 5px;
box-sizing: border-box;
.left {
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-top: -10px;
margin-left: 13px;
.leftImg {
width: 100px;
height: 100px;
width: 90px;
height: 90px;
}
.left_me {
margin-left: 10px;
display: flex;
flex-direction: column;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
font-size: 14px;
color: #ffffff;
line-height: 22px;
line-height: 20px;
letter-spacing: 2px;
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
.bo {
margin-top: 5px;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 18px;
color: #00fffc;
line-height: 21px;
text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
}
}
}
.right {
display: flex;
align-items: center;
// justify-content: center;
margin-left: 10px;
.rightImg {
width: 78px;
height: 78px;
background-image: url(@/assets/images/hygiene/xia_right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 90px;
height: 90px;
}
.right_me {
margin-left: 10px;
display: flex;
flex-direction: column;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
font-size: 14px;
color: #ffffff;
line-height: 22px;
line-height: 20px;
letter-spacing: 2px;
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
.bo {
margin-top: 5px;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 18px;
color: #ffe92c;
line-height: 21px;
text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
}
}
}
}