This commit is contained in:
parent
e3e7c4e775
commit
39b380fc56
|
@ -18,8 +18,8 @@ let option = {
|
||||||
// 外圈背景
|
// 外圈背景
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
center: ["60%", "55%"],
|
center: ["55%", "55%"],
|
||||||
radius: ["50%", "82%"],
|
radius: ["70%", "90%"],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
clockWise: false,
|
clockWise: false,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
@ -58,7 +58,7 @@ let option = {
|
||||||
},
|
},
|
||||||
radius: ['50%', '70%'],
|
radius: ['50%', '70%'],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
center: ['60%', '55%'],
|
center: ['55%', '55%'],
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: datas.value,
|
value: datas.value,
|
||||||
|
|
|
@ -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>
|
|
@ -79,14 +79,14 @@
|
||||||
<div class="leftImg"><eP4></eP4></div>
|
<div class="leftImg"><eP4></eP4></div>
|
||||||
<div class="left_me">
|
<div class="left_me">
|
||||||
<div>建档率</div>
|
<div>建档率</div>
|
||||||
<div style="margin-top: 5px">92.96%</div>
|
<div class="bo">92.96%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="rightImg"></div>
|
<div class="rightImg"><eP4_1></eP4_1></div>
|
||||||
<div class="right_me">
|
<div class="right_me">
|
||||||
<div>家庭医生</div>
|
<div>家庭医生签约率</div>
|
||||||
<div style="margin-top: 5px">2000</div>
|
<div class="bo">62.16%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -141,6 +141,7 @@ 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 eP4 from "./echarts_hygiene/eP4.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 tnb from "./echarts_hygiene/tnb.vue";
|
||||||
import gxy from "./echarts_hygiene/gxy.vue";
|
import gxy from "./echarts_hygiene/gxy.vue";
|
||||||
import { ref, onMounted, onBeforeMount } from "vue";
|
import { ref, onMounted, onBeforeMount } from "vue";
|
||||||
|
@ -209,6 +210,7 @@ const change = (name, index) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.familyPlanning {
|
.familyPlanning {
|
||||||
|
width: 96%;
|
||||||
background-image: url(@/assets/images/hygiene/center_title_2.png);
|
background-image: url(@/assets/images/hygiene/center_title_2.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
@ -311,11 +313,13 @@ const change = (name, index) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.center_1 {
|
.center_1 {
|
||||||
|
width: 96%;
|
||||||
background-image: url(@/assets/images/hygiene/center_title_1.png);
|
background-image: url(@/assets/images/hygiene/center_title_1.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.center_2 {
|
.center_2 {
|
||||||
|
width: 96%;
|
||||||
background-image: url(@/assets/images/hygiene/new_center.png);
|
background-image: url(@/assets/images/hygiene/new_center.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
@ -545,48 +549,7 @@ const change = (name, index) => {
|
||||||
border-bottom: 13px solid rgba(57, 59, 109, 1);
|
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 {
|
.concernLabel {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -705,11 +668,54 @@ const change = (name, index) => {
|
||||||
height: 250px;
|
height: 250px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
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 {
|
.minTopPart2 {
|
||||||
width: 368px;
|
margin-left: 5px;
|
||||||
height: 145px;
|
width: 420px;
|
||||||
|
height: 136px;
|
||||||
background-image: url(@/assets/images/hygiene/xia_1.png);
|
background-image: url(@/assets/images/hygiene/xia_1.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
@ -717,50 +723,69 @@ const change = (name, index) => {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
|
padding: 0 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
.left {
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-left: 10px;
|
margin-left: 13px;
|
||||||
margin-top: -10px;
|
|
||||||
.leftImg {
|
.leftImg {
|
||||||
width: 100px;
|
width: 90px;
|
||||||
height: 100px;
|
height: 90px;
|
||||||
}
|
}
|
||||||
.left_me {
|
.left_me {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 22px;
|
line-height: 20px;
|
||||||
letter-spacing: 2px;
|
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 {
|
.right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// justify-content: center;
|
// justify-content: center;
|
||||||
margin-left: 10px;
|
|
||||||
.rightImg {
|
.rightImg {
|
||||||
width: 78px;
|
width: 90px;
|
||||||
height: 78px;
|
height: 90px;
|
||||||
background-image: url(@/assets/images/hygiene/xia_right.png);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
}
|
||||||
.right_me {
|
.right_me {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 22px;
|
line-height: 20px;
|
||||||
letter-spacing: 2px;
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue