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