This commit is contained in:
duanxiaohai
parent
1386572720
commit
c2df36a341
|
|
@ -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,7 +62,8 @@ const color = [
|
|||
],
|
||||
},
|
||||
];
|
||||
const option = {
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
color,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -51,7 +76,7 @@ const option = {
|
|||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["上门服务时长", "上门服务次数"],
|
||||
data: data.initialLegendData,
|
||||
// top: "8%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
|
|
@ -82,12 +107,12 @@ const option = {
|
|||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
|
||||
data: data.day,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
show: false,
|
||||
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
|
||||
data: data.day,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -128,7 +153,8 @@ const option = {
|
|||
name: "次数/次",
|
||||
min: 0,
|
||||
max: max,
|
||||
splitLine: {//分割线配置
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
|
|
@ -136,7 +162,8 @@ const option = {
|
|||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
axisLabel: {
|
||||
//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
|
|
@ -157,28 +184,28 @@ const option = {
|
|||
series: [
|
||||
{
|
||||
name: "上门服务时长",
|
||||
data: data,
|
||||
data: data.list1,
|
||||
barWidth: 20,
|
||||
type: "bar",
|
||||
label:{
|
||||
show:true,
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "上门服务次数",
|
||||
data: lineData,
|
||||
data: data.list2,
|
||||
type: "line", //线状图
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
|
|
@ -191,7 +218,7 @@ const option = {
|
|||
itemStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
|
||||
},
|
||||
data: data.map(() => max),
|
||||
data: data.list1.map(() => max),
|
||||
barWidth: 40, //外阴影背景宽
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
|
|
@ -217,24 +244,36 @@ const option = {
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@
|
|||
<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); // 地点
|
||||
|
|
|
|||
Loading…
Reference in New Issue