This commit is contained in:
lnn19986213
parent
9c3fb010a9
commit
3582909fa2
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -14,33 +14,25 @@ const colorList = ['#FFE35F','#0081FF','#8ABEDB','#25B9C8','#30EB92','rgba(69, 2
|
|||
|
||||
const pieData = [
|
||||
{
|
||||
name: "A", //名称
|
||||
value: 10, //值
|
||||
name: "60-70岁", //名称
|
||||
value: 1012431431, //值
|
||||
},
|
||||
{
|
||||
name: "B",
|
||||
value: 8,
|
||||
name: "70-80岁",
|
||||
value: 85425345,
|
||||
},
|
||||
{
|
||||
name: "C",
|
||||
value: 2,
|
||||
name: "80-90岁",
|
||||
value: 2543256,
|
||||
},
|
||||
{
|
||||
name: "D",
|
||||
value: 6,
|
||||
name: "90-100岁",
|
||||
value: 5432535,
|
||||
},
|
||||
{
|
||||
name: "E",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: "F",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: "G",
|
||||
value: 5
|
||||
},
|
||||
name: "100岁以上",
|
||||
value: 56,
|
||||
}
|
||||
]
|
||||
|
||||
const serData = pieData.map((dItem, index) => {
|
||||
|
|
@ -152,40 +144,7 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
|
||||
// },
|
||||
// z: function (u, v) {
|
||||
// return Math.cos(v) > 0 ? -4 : -4;
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// series.push({
|
||||
// name: 'mouseoutSeries',
|
||||
// type: 'surface',
|
||||
// parametric: true,
|
||||
// wireframe: {
|
||||
// show: false,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// opacity: 0.5,
|
||||
// color: '#fff',
|
||||
// },
|
||||
// parametricEquation: {
|
||||
// u: {
|
||||
// min: 0,
|
||||
// max: Math.PI * 2,
|
||||
// step: Math.PI / 20,
|
||||
// },
|
||||
// v: {
|
||||
// min: 1.5,
|
||||
// max: 3,
|
||||
// step: Math.PI / 20,
|
||||
// },
|
||||
// x: function (u, v) {
|
||||
// return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) *1;
|
||||
// },
|
||||
// y: function (u, v) {
|
||||
// return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI)*1;
|
||||
// },
|
||||
// z: function (u, v) {
|
||||
// return Math.cos(v) > 0 ? -4 : -4;
|
||||
// return Math.cos(v) > 0 ? -6 : -7;
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
|
|
@ -206,19 +165,19 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||
"#F4BB29",
|
||||
"#49C384",
|
||||
],
|
||||
width: '30%',
|
||||
width: '40%',
|
||||
//图例列表的布局朝向。
|
||||
// orient: "vertical",
|
||||
right: 0,
|
||||
orient: "vertical",
|
||||
right: 20,
|
||||
// bottom: 20,
|
||||
top: 'center',
|
||||
// left: '10px',
|
||||
//图例文字每项之间的间隔
|
||||
itemGap: 20,
|
||||
itemGap: 10,
|
||||
show: true,
|
||||
icon: "rect",
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
itemWidth: 25,
|
||||
textStyle: {
|
||||
//图例字体大小
|
||||
fontSize: 14,
|
||||
|
|
@ -227,15 +186,21 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||
},
|
||||
|
||||
//格式化图例文本
|
||||
// formatter: function (name) {
|
||||
// var target;
|
||||
// for (var i = 0, l = pieData.length; i < l; i++) {
|
||||
// if (pieData[i].name == name) {
|
||||
// target = pieData[i].value;
|
||||
// }
|
||||
// }
|
||||
// return `${name} ${target}`;
|
||||
// },
|
||||
formatter: function (name) {
|
||||
var target;
|
||||
for (var i = 0, l = pieData.length; i < l; i++) {
|
||||
if (pieData[i].name == name) {
|
||||
target = pieData[i].value;
|
||||
}
|
||||
}
|
||||
if(name == '90-100岁'){
|
||||
return ` ${name} ${target} 人`;
|
||||
}else if(name == '100岁以上'){
|
||||
return ` ${name} ${target} 人`;
|
||||
}else{
|
||||
return ` ${name} ${target} 人`;
|
||||
}
|
||||
},
|
||||
},
|
||||
//移动上去提示的文本内容
|
||||
tooltip: {
|
||||
|
|
@ -256,7 +221,7 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||
`<div style='color:rgba(214, 243, 255, 0.9);'>` +
|
||||
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
|
||||
`${params.seriesName}<br/>` +
|
||||
`<span style='margin-right:20px'>${value}</span>` +
|
||||
`<span style='margin-right:20px'>${value}人</span>` +
|
||||
`<span >${bfb}%</span>` +
|
||||
`</div>`
|
||||
);
|
||||
|
|
@ -269,14 +234,14 @@ function getPie3D(pieData, internalDiameterRatio) {
|
|||
grid3D: {
|
||||
viewControl: {
|
||||
autoRotate: true,
|
||||
rotateSensitivity: 1, //设置为0无法旋转
|
||||
zoomSensitivity: 1, //设置为0无法缩放
|
||||
rotateSensitivity: 0, //设置为0无法旋转
|
||||
zoomSensitivity: 0, //设置为0无法缩放
|
||||
panSensitivity: 0, //设置为0无法平移
|
||||
alpha: 25, //角度(这个很重要 调节角度的)
|
||||
distance: 120, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
distance: 90, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||
},
|
||||
top: '0',
|
||||
left: '-100',
|
||||
top: '-30',
|
||||
left: '-120',
|
||||
width: '100%',
|
||||
show: false,
|
||||
boxHeight: 20,
|
||||
|
|
|
|||
147
src/view/yl.vue
147
src/view/yl.vue
|
|
@ -4,14 +4,8 @@
|
|||
<div class="flex1">
|
||||
<div class="yd_title left_1">
|
||||
<span class="text">
|
||||
<img
|
||||
src="@/assets/images/ylbx_1.png"
|
||||
style="width: 130px; height: 30px"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/ylbx_2.png"
|
||||
style="width: 130px; height: 30px"
|
||||
/>
|
||||
<img src="@/assets/images/ylbx_1.png" style="width: 130px; height: 30px" />
|
||||
<img src="@/assets/images/ylbx_2.png" style="width: 130px; height: 30px" />
|
||||
</span>
|
||||
</div>
|
||||
<ePie></ePie>
|
||||
|
|
@ -31,10 +25,15 @@
|
|||
</div>
|
||||
<div class="displayFlex">
|
||||
<div class="flex1">
|
||||
<div class="yd_title">
|
||||
<span class="text">活动数据分析</span>
|
||||
<div class="yd_title center_1">
|
||||
</div>
|
||||
<div class="minTopPart">
|
||||
<div class="mtpImg1"></div>
|
||||
<div class="mtpImg2"></div>
|
||||
<div class="mtpImg3"></div>
|
||||
<div class="mtpText1">5888811</div>
|
||||
<div class="mtpText2">18%</div>
|
||||
</div>
|
||||
<waterBall></waterBall>
|
||||
<ePie3d></ePie3d>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
|
|
@ -131,11 +130,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mealAssistance">
|
||||
<img
|
||||
class="mealAssistanceimg"
|
||||
src="@/assets/YLimg/ylimg7.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="mealAssistanceimg" src="@/assets/YLimg/ylimg7.png" alt="" />
|
||||
<div style="width: 490px">
|
||||
<ylXZZC></ylXZZC>
|
||||
</div>
|
||||
|
|
@ -166,16 +161,19 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.flex2 {
|
||||
// flex: 1;
|
||||
padding: 0 38px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.module {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -188,6 +186,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
width: 100%;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
|
|
@ -200,15 +199,19 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.familyPlanning {
|
||||
background-image: url(@/assets/YLTitle/titleImg9.png);
|
||||
}
|
||||
|
||||
.mechanism {
|
||||
background-image: url(@/assets/YLTitle/titleImg10.png);
|
||||
}
|
||||
|
||||
.service {
|
||||
background-image: url(@/assets/YLTitle/titleImg11.png);
|
||||
}
|
||||
|
||||
.serviceBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -217,13 +220,16 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
width: 182px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.serviceTop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.medicalService {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.ylimg {
|
||||
width: 205px;
|
||||
height: 239px;
|
||||
|
|
@ -231,6 +237,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
|
||||
.medicalServiceTop {
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 38px;
|
||||
|
|
@ -247,11 +254,13 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mealAssistance {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.mealAssistanceimg {
|
||||
width: 495px;
|
||||
height: 35px;
|
||||
|
|
@ -264,16 +273,25 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_2 {
|
||||
background-image: url(@/assets/images/gllrbt.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_3 {
|
||||
background-image: url(@/assets/images/tkjz.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.center_1 {
|
||||
background-image: url(@/assets/YLTitle/titleImg8.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.text_1_left {
|
||||
// background-image: url(@/assets/images/ylbx_1.png);
|
||||
// background-repeat: no-repeat;
|
||||
|
|
@ -281,11 +299,13 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.basicInformation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 22px;
|
||||
|
||||
.basicInformation_item {
|
||||
flex: 0 0 50%;
|
||||
padding: 0 2px;
|
||||
|
|
@ -294,10 +314,12 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 79px;
|
||||
height: 47px;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 4px;
|
||||
|
||||
|
|
@ -307,6 +329,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
margin-bottom: 4px;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
|
|
@ -315,6 +338,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
|
@ -334,12 +358,15 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
margin-top: 16px;
|
||||
padding: 15px 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.visitLog_item_box {
|
||||
flex: auto;
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei;
|
||||
|
|
@ -347,6 +374,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
color: #0096ff;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-family: SourceHanSansCN;
|
||||
|
|
@ -355,6 +383,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
font-size: 12px;
|
||||
font-family: SourceHanSansCN;
|
||||
|
|
@ -368,6 +397,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
.history {
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
|
||||
.history1 {
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
|
|
@ -380,6 +410,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.unit {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
|
|
@ -389,15 +420,18 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
font-style: normal;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
}
|
||||
|
||||
.historyimg {
|
||||
width: 182px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 154px;
|
||||
height: 136px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
|
|
@ -413,6 +447,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 12px 0 20px;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
background: rgba(0, 89, 130, 0.73);
|
||||
|
|
@ -426,9 +461,11 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.property {
|
||||
display: flex;
|
||||
padding: 14px 0 10px;
|
||||
|
||||
.property_box {
|
||||
background-image: url(@/assets/img_05.png);
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -437,12 +474,14 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
height: 91px;
|
||||
margin: 0 12px;
|
||||
text-align: center;
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin: 9px 0 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
|
|
@ -450,6 +489,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity {
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
|
|
@ -459,9 +499,11 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
border-bottom: 2px solid rgba(0, 164, 250, 1);
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.activity_content {
|
||||
margin: 0 -6px 12px;
|
||||
display: flex;
|
||||
|
||||
.activity_box {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
|
|
@ -469,6 +511,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
box-sizing: border-box;
|
||||
background-color: rgba(15, 28, 54, 1);
|
||||
padding: 12px 12px 19px;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
|
@ -479,26 +522,31 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.monitor {
|
||||
.monitor_box {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.67);
|
||||
|
||||
img {
|
||||
width: 115px;
|
||||
height: 84px;
|
||||
margin-right: 21px;
|
||||
}
|
||||
|
||||
.monitor_box_text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
|
@ -508,4 +556,71 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minTopPart {
|
||||
width: 530px;
|
||||
height: 174px;
|
||||
background-image: url(@/assets/minTopBg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 4px auto;
|
||||
position: relative;
|
||||
|
||||
.mtpImg1 {
|
||||
width: 140px;
|
||||
height: 24px;
|
||||
background-image: url(@/assets/minTop1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 49px;
|
||||
left: 23px;
|
||||
}
|
||||
|
||||
.mtpImg2 {
|
||||
width: 140px;
|
||||
height: 24px;
|
||||
background-image: url(@/assets/minTop2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 49px;
|
||||
right: 23px;
|
||||
}
|
||||
.mtpImg3 {
|
||||
width: 125px;
|
||||
height: 36px;
|
||||
background-image: url(@/assets/minTop3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 316px;
|
||||
left: 84px;
|
||||
}
|
||||
|
||||
.mtpText1 {
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 94px;
|
||||
left: 23px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.mtpText2 {
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 94px;
|
||||
right: 23px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue