This commit is contained in:
duanxiaohai 2024-06-14 10:51:23 +08:00
commit c1b6494f2d
4 changed files with 124 additions and 35 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -24,9 +24,7 @@
</div> </div>
</div> </div>
<div class="ViewData"> <div class="ViewData">
<div class="ViewDatalist" > <div class="ViewDatalist"></div>
</div>
<eP2 <eP2
:list1="data.leftCenter1" :list1="data.leftCenter1"
:list2="data.leftCenter2" :list2="data.leftCenter2"
@ -43,6 +41,19 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<div class="minTopTitle"></div>
<div class="minTopNum">
<div
class="numItem"
v-for="(item, inex) in minData.minTop"
:key="index"
>
{{ item }}
</div>
</div>
<!-- <div class="minPie">
<Pie3dMt :list="minData.minPieData1"></Pie3dMt>
</div> -->
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title center_1"> <div class="yd_title center_1">
@ -83,6 +94,7 @@
</template> </template>
<script setup> <script setup>
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue"; import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import pie3dMt1 from "./echart_analyze/pie3dMt1.vue"; import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
@ -100,9 +112,21 @@ const data = reactive({
}, },
}, // }, //
leftCenter1: ["100", "80", "199", "133", "210"], // leftCenter1: ["100", "80", "199", "133", "210"], //
leftCenter2: ["100", "120", "199", "133", "210"],//尿 leftCenter2: ["100", "120", "199", "133", "210"], //尿
leftCenterYear: ["2019", "2020", "2021", "2022", "2023"],// leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //
}); });
const minData = reactive({
minTop: ["4", "9", "1", "6", "2", "人"],
minPieData1: {
wfgz: "1500",
xstp: "1610",
skym: "1610",
xxdc: "1610",
dzzh: "1610",
zq: "1610",
},
});
onMounted(() => {}); onMounted(() => {});
onBeforeMount(() => {}); onBeforeMount(() => {});
@ -326,7 +350,6 @@ onBeforeMount(() => {});
bottom: 100%; bottom: 100%;
} }
} }
.mechanism { .mechanism {
background-image: url(@/assets/YLTitle/titleImg10.png); background-image: url(@/assets/YLTitle/titleImg10.png);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -364,4 +387,55 @@ onBeforeMount(() => {});
// .ViewData{ // .ViewData{
// } // }
.minTopTitle {
width: 100%;
height: 28px;
background-image: url(@/assets/images/sjfx/yjj.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 4px auto;
margin-top: 13px;
}
.minTopNum {
width: 100%;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
.numItem {
width: 72px;
height: 114px;
text-align: center;
line-height: 114px;
font-weight: 400;
font-size: 60px;
margin: 0 3px;
color: #ffffff;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
background-image: url(@/assets/images/sjfx/mtNum.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.numItem:last-child {
width: 72px;
height: 114px;
text-align: center;
line-height: 114px;
font-weight: 400;
font-size: 36px;
margin: 0 3px;
color: #ffffff;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
background-image: url(@/assets/images/sjfx/mtNum2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.minPie {
width: 100%;
position: relative;
margin: -10px 0;
.minPieImg {
}
}
</style> </style>

View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
ref="chart" ref="chart"
style="width: 100%; height: 250px" style="width: 100%; height: 240px"
></div> ></div>
</template> </template>
@ -20,17 +20,14 @@ import "echarts-gl";
const props = defineProps({ const props = defineProps({
list: { list: {
type: Array, type: Object,
default: () => {
return [];
},
}, },
}); });
const chart = ref(); // DOM const chart = ref(); // DOM
const data = reactive({ const data = reactive({
list: [], list: {},
// pieData: [ // pieData: [
// { // {
// name: "61-70", // // name: "61-70", //
@ -71,12 +68,34 @@ const colorList = [
const pieData = reactive([ const pieData = reactive([
{ {
name: "高血压", // name: "危房改造", //
value: 0, // value: 0, //
per: 2,
}, },
{ {
name: "非高血压", name: "下山脱贫",
value: 0, value: 0,
per: 8,
},
{
name: "水库移民",
value: 0,
per: 10,
},
{
name: "小县大城",
value: 0,
per: 43,
},
{
name: "地质灾害",
value: 0,
per: 15,
},
{
name: "征迁",
value: 0,
per: 22,
}, },
]); ]);
@ -226,14 +245,15 @@ function getPie3D(pieData, internalDiameterRatio) {
"#F4BB29", "#F4BB29",
"#49C384", "#49C384",
], ],
width: "40%", // width: "40%",
height: '40%',
// //
orient: "vertical", orient: "vertical",
right: 20, right: 20,
top: "center", top: "center",
// //
itemGap: 10, itemGap: 10,
show: false, show: true,
icon: "rect", icon: "rect",
itemHeight: 10, itemHeight: 10,
itemWidth: 25, itemWidth: 25,
@ -249,16 +269,11 @@ function getPie3D(pieData, internalDiameterRatio) {
var target; var target;
for (var i = 0, l = pieData.length; i < l; i++) { for (var i = 0, l = pieData.length; i < l; i++) {
if (pieData[i].name == name) { if (pieData[i].name == name) {
target = pieData[i].value; target = pieData[i].per;
} }
} }
if (name == "91-100岁") {
return ` ${name} ${target}`; return `${name}${target}%`;
} else if (name == "100岁以上") {
return ` ${name} ${target}`;
} else {
return ` ${name} ${target}`;
}
}, },
}, },
// //
@ -296,14 +311,14 @@ function getPie3D(pieData, internalDiameterRatio) {
rotateSensitivity: 0, //0 rotateSensitivity: 0, //0
zoomSensitivity: 0, //0 zoomSensitivity: 0, //0
panSensitivity: 0, //0 panSensitivity: 0, //0
alpha: 25, //( ) alpha: 20, //( )
distance: 100, //zoom() distance: 100, //zoom()
}, },
top: "-30", top: "-10",
left: "-120", left: "-160",
width: "100%", width: "100%",
show: false, show: false,
boxHeight: 20, boxHeight: 16,
}, },
series: series, series: series,
}; };
@ -550,13 +565,13 @@ const setChart = () => {
// 使 // 使
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
// data.list = props.list; data.list = props.list;
data.list = { pieData[0].value = data.list.wfgz;
gxy:"1500", pieData[1].value = data.list.xstp;
notGxy:"1610", pieData[2].value = data.list.skym;
} pieData[3].value = data.list.xxdc;
pieData[0].value = data.list.gxy; pieData[4].value = data.list.dzzh;
pieData[1].value = data.list.notGxy; pieData[5].value = data.list.zq;
getOption(); getOption();
setChart(); setChart();