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

View File

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

View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: 20vh"></div>
<div ref="chart" style="width: 490px; height: calc(100% - 38px)"></div>
</template>
<script setup>
@ -9,14 +9,7 @@ import * as echarts from "echarts";
const chart = ref(null); // DOM
const data = [
"大街乡",
"社阳乡",
"沐尘畲族乡",
"庙下乡",
"溪口镇",
"罗家乡",
];
const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
let zoomShow = false;
if (data.length > 7) {
zoomShow = true;
@ -88,49 +81,52 @@ let option = {
// },
xAxis: {
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
//
textStyle: {
color: "#ffffff",
},
splitLine: {//线
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
width: 1,
},
},
splitLine: {
//线
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
width: 1,
},
},
},
yAxis: {
type: "category",
data: data,
splitLine: {//线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
splitLine: {
//线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
axisLabel: {//y
textStyle: {
color: "#ffffff",
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
series: [
{
type: "bar",
data: [2, 4, 7, 23, 25, 250],
barWidth: 15,//
barWidth: 15, //
itemStyle: {
// barBorderRadius: [0, 20, 20, 0],
// color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // color

View File

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