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

gx

This commit is contained in:
duanxiaohai 2024-04-16 09:59:35 +08:00
parent ea4bb0bd30
commit 8fedef4eb4
3 changed files with 65 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/view/echarts/ylSMFW.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%; height: 220px"></div> <div ref="chart" style="width: 340px;height: calc(100% - 38px)"></div>
</template> </template>
<script setup> <script setup>
@ -51,13 +51,14 @@ const option = {
}, },
legend: { legend: {
data: ["上门服务时长", "上门服务次数"], data: ["上门服务时长", "上门服务次数"],
top: "8%", // top: "8%",
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: "#ffffff", color: "#ffffff",
}, },
}, },
grid: { grid: {
top: "18%",
left: "3%", left: "3%",
right: "6%", right: "6%",
bottom: "0%", bottom: "0%",
@ -70,7 +71,6 @@ const option = {
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
// name: "上门服务次数/元",
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
@ -90,7 +90,7 @@ const option = {
{ {
type: "value", type: "value",
scale: true, scale: true,
name: "上门服务时长", name: "时长/小时",
max: max, max: max,
splitLine: { splitLine: {
show: false, show: false,
@ -118,7 +118,7 @@ const option = {
{ {
type: "value", type: "value",
scale: true, scale: true,
name: "上门服务次数", name: "次数/次",
min: 0, min: 0,
max: max, max: max,
splitLine: {//分割线配置 splitLine: {//分割线配置

72
src/view/echarts/ylXZZC.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%; height: 20vh"></div> <div ref="chart" style="width: 490px; height: calc(100% - 38px)"></div>
</template> </template>
<script setup> <script setup>
@ -9,14 +9,7 @@ import * as echarts from "echarts";
const chart = ref(null); // 创建DOM引用 const chart = ref(null); // 创建DOM引用
const data = [ const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
"大街乡",
"社阳乡",
"沐尘畲族乡",
"庙下乡",
"溪口镇",
"罗家乡",
];
let zoomShow = false; let zoomShow = false;
if (data.length > 7) { if (data.length > 7) {
zoomShow = true; zoomShow = true;
@ -88,49 +81,52 @@ let option = {
// }, // },
xAxis: { xAxis: {
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
},
}, },
splitLine: {//分割线配置 },
show: true, splitLine: {
lineStyle: { //分割线配置
color: "rgba(255, 255, 255, 0.2)", show: true,
width: 1, lineStyle: {
}, color: "rgba(255, 255, 255, 0.2)",
width: 1,
}, },
},
}, },
yAxis: { yAxis: {
type: "category", type: "category",
data: data, data: data,
splitLine: {//分割线配置 splitLine: {
show: false, //分割线配置
lineStyle: { show: false,
color: "#ffffff", lineStyle: {
width: 1, color: "#ffffff",
}, width: 1,
}, },
axisLabel: {//y轴文字的配置 },
textStyle: { axisLabel: {
color: "#ffffff", //y轴文字的配置
}, textStyle: {
color: "#ffffff",
}, },
axisLine: { },
//y轴线的颜色以及宽度 axisLine: {
show: false, //y轴线的颜色以及宽度
lineStyle: { show: false,
color: "#ffffff", lineStyle: {
width: 1, color: "#ffffff",
type: "solid", width: 1,
}, type: "solid",
}, },
},
}, },
series: [ series: [
{ {
type: "bar", type: "bar",
data: [2, 4, 7, 23, 25, 250], data: [2, 4, 7, 23, 25, 250],
barWidth: 15,//柱宽 barWidth: 15, //柱宽
itemStyle: { itemStyle: {
// barBorderRadius: [0, 20, 20, 0], // barBorderRadius: [0, 20, 20, 0],
// color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // color在这里 // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // color在这里

56
src/view/yl.vue
View File

@ -31,7 +31,7 @@
<ePie v-if="leftchoose.first == '1'"></ePie> <ePie v-if="leftchoose.first == '1'"></ePie>
<ePie2 v-else></ePie2> <ePie2 v-else></ePie2>
</div> </div>
<div class="flex1" > <div class="flex1">
<div class="yd_title left_2"> <div class="yd_title left_2">
<span class="text"> <span class="text">
<img <img
@ -61,7 +61,7 @@
<eP2 v-if="leftchoose.second == '1'"></eP2> <eP2 v-if="leftchoose.second == '1'"></eP2>
<eP2_2 v-else /> <eP2_2 v-else />
</div> </div>
<div class="flex1" > <div class="flex1">
<div class="yd_title left_3"> <div class="yd_title left_3">
<span class="text"> <span class="text">
<img <img
@ -108,12 +108,12 @@
<div class="yd_title familyPlanning"></div> <div class="yd_title familyPlanning"></div>
<!-- 计划生育 --> <!-- 计划生育 -->
<!-- <div style="width: 100%; "> --> <!-- <div style="width: 100%; "> -->
<ylJHSY></ylJHSY> <ylJHSY></ylJHSY>
<!-- </div> --> <!-- </div> -->
</div> </div>
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
<div class="flex2"> <div class="flex1">
<div class="yd_title mechanism"> <div class="yd_title mechanism">
<!-- <span class="text">养老机构</span> --> <!-- <span class="text">养老机构</span> -->
</div> </div>
@ -142,16 +142,12 @@
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title service"> <div class="yd_title service"></div>
<!-- <span class="text">助老服务</span> -->
</div>
<div class="serviceBox"> <div class="serviceBox">
<div class="serviceTop"> <div class="serviceTop">
<div class="visit"> <div class="visit">
<img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" /> <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
<div style="width: 340px;"> <ylSMFW></ylSMFW>
<ylSMFW></ylSMFW>
</div>
</div> </div>
<div class="medicalService"> <div class="medicalService">
<img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" /> <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
@ -161,16 +157,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mealAssistance"> </div>
<img </div>
class="mealAssistanceimg" <div class="flex1">
src="@/assets/YLimg/ylimg7.png" <div class="mealAssistance">
alt="" <img
/> class="mealAssistanceimg"
<div style="width: 490px; "> src="@/assets/YLimg/ylimg7.png"
<ylXZZC></ylXZZC> alt=""
</div> />
</div> <ePie2 ></ePie2>
<!-- <ylXZZC></ylXZZC> -->
</div> </div>
</div> </div>
</div> </div>
@ -319,17 +316,16 @@ const change = (name, index) => {
} }
} }
} }
}
.mealAssistance {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.mealAssistance { .mealAssistanceimg {
display: flex; width: 495px;
flex-direction: column; height: 35px;
justify-content: center;
align-items: center;
.mealAssistanceimg {
width: 495px;
height: 35px;
}
} }
} }