This commit is contained in:
parent
ea4bb0bd30
commit
8fedef4eb4
|
@ -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: {//分割线配置
|
||||
|
|
|
@ -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在这里
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue