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

gx

This commit is contained in:
duanxiaohai 2024-06-04 13:58:49 +08:00
parent 1386572720
commit c2df36a341
2 changed files with 247 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

413
src/view/echarts_yl/ylSMFW.vue
View File

@ -1,19 +1,43 @@
<template>
<div ref="chart" style="width: 340px;height:250px"></div>
<div ref="chart" style="width: 340px; height: 250px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {
onBeforeMount,
onMounted,
ref,
reactive,
defineProps,
watch,
nextTick,
} from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // 创建DOM引用
const data = [120, 200, 150, 80, 70, 110, 130];
const data = reactive({
list: [],
list1: [],
list2: [],
day: [],
option: {},
initialLegendData: ["上门服务时长", "上门服务次数"],
});
const data1 = [120, 200, 150, 80, 70, 110, 130];
const lineData = [150, 230, 224, 218, 135, 147, 260];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
const max = data.list1.concat(data.list2).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// 背景颜色
const color = [
{
@ -38,203 +62,218 @@ const color = [
],
},
];
const option = {
color,
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
const getOption = () => {
data.option = {
color,
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
},
},
legend: {
data: ["上门服务时长", "上门服务次数"],
// top: "8%",
textStyle: {
fontSize: 16,
legend: {
data: data.initialLegendData,
// top: "8%",
textStyle: {
fontSize: 16,
color: "#ffffff",
},
},
grid: {
top: "18%",
left: "3%",
right: "6%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
fontSize: 16,
},
},
grid: {
top: "18%",
left: "3%",
right: "6%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
fontSize: 16,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: data.day,
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
{
type: "category",
show: false,
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "时长/小时",
max: max,
splitLine: {
{
type: "category",
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
fontSize: 16,
width: 1,
data: data.day,
},
],
yAxis: [
{
type: "value",
scale: true,
name: "时长/小时",
max: max,
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
fontSize: 16,
width: 1,
},
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
name: "次数/次",
min: 0,
max: max,
splitLine: {//分割线配置
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
width: 1,
fontSize: 16,
},
},
axisLabel: {//y轴文字的配置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "上门服务时长",
data: data,
barWidth: 20,
type: "bar",
label:{
show:true,
color:'#ffffff',
formatter:function(data){
return data.value
}
},
},
{
name: "上门服务次数",
data: lineData,
type: "line", //线状图
label:{
show:true,
position:'top',
color:'#ffffff',
formatter:function(data){
return data.value
}
},
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
data: data.map(() => max),
barWidth: 40, //外阴影背景宽
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
type: "bar",
},
],
{
type: "value",
scale: true,
name: "次数/次",
min: 0,
max: max,
splitLine: {
//分割线配置
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
width: 1,
fontSize: 16,
},
},
axisLabel: {
//y轴文字的配置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "上门服务时长",
data: data.list1,
barWidth: 20,
type: "bar",
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
},
{
name: "上门服务次数",
data: data.list2,
type: "line", //线状图
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
data: data.list1.map(() => max),
barWidth: 40, //外阴影背景宽
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
type: "bar",
},
],
};
};
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
const setChart1 = () => {
data.list1 = [];
data.list2 = [];
data.list.data.forEach((item) => {
data.list1.push(item.sc); //服务时长
data.list2.push(item.fwcs); //服务次数
});
console.log(data.list1,data.list2, "助老服务");
};
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.day = props.list.day;
// console.log(data.list, "助老服务");
setChart1();
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>

40
src/view/yl.vue
View File

@ -51,9 +51,9 @@
<div class="flex1" style="margin-top: 10px">
<div class="yd_title left_2">
<div class="animate-border">
<i></i>
<i></i>
</div>
<i></i>
<i></i>
</div>
<span class="text">
<img
v-if="leftchoose.second == '1'"
@ -97,9 +97,9 @@
<div class="flex1" style="margin-top: 10px">
<div class="yd_title left_3">
<div class="animate-border">
<i></i>
<i></i>
</div>
<i></i>
<i></i>
</div>
<span class="text">
<img
v-if="leftchoose.third == '1'"
@ -145,9 +145,9 @@
<div class="flex1">
<div class="yd_title center_1">
<div class="animate-border">
<i></i>
<i></i>
</div>
<i></i>
<i></i>
</div>
</div>
<div class="minTopPart">
<div class="mtpImg1"></div>
@ -161,9 +161,9 @@
<div class="flex1">
<div class="yd_title familyPlanning">
<div class="animate-border">
<i></i>
<i></i>
</div>
<i></i>
<i></i>
</div>
</div>
<ylJHSY
:list1="data.centerBottom1"
@ -176,9 +176,9 @@
<div class="flex1">
<div class="yd_title mechanism">
<div class="animate-border">
<i></i>
<i></i>
</div>
<i></i>
<i></i>
</div>
</div>
<div class="history">
<div class="history1">
@ -207,15 +207,15 @@
<div class="flex1">
<div class="yd_title service">
<div class="animate-border">
<i></i>
<i></i>
</div>
<i></i>
<i></i>
</div>
</div>
<div class="serviceBox">
<div class="serviceTop">
<div class="visit">
<img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
<ylSMFW></ylSMFW>
<ylSMFW :list="data.smfwcs"></ylSMFW>
</div>
<div class="medicalService">
<img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
@ -392,6 +392,7 @@ const data = reactive({
yljgzlzx: { yljg: "", zlzx: "" },
zccs1: [],
zccs2: [],
smfwcs: [],
});
onBeforeMount(async () => {
getData();
@ -454,6 +455,7 @@ const getData = async () => {
data.yljgzlzx.yljg = res.data.yljgzlzx.yljg;
data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx;
// 助老服务
data.smfwcs = res.data.zlfw.smfwcs;
// 乡镇助餐次数
res.data.zlfw.xzzccs.forEach((element) => {
data.zccs1.push(element.xzjd); // 地点