@@ -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); // 地点
From abea3bc3afbfdf9d11a752fa9271b4b27089f302 Mon Sep 17 00:00:00 2001
From: yaoyuhao
Date: Tue, 4 Jun 2024 14:18:03 +0800
Subject: [PATCH 2/3] gx
---
src/view/echarts_education/edCSR.vue | 136 +++++++++++++++------------
src/view/echarts_work/eP1.vue | 38 ++++++--
src/view/echarts_work/eP2.vue | 45 +++++----
src/view/echarts_work/eP4.vue | 38 ++++++--
4 files changed, 161 insertions(+), 96 deletions(-)
diff --git a/src/view/echarts_education/edCSR.vue b/src/view/echarts_education/edCSR.vue
index d151157..b0514bb 100644
--- a/src/view/echarts_education/edCSR.vue
+++ b/src/view/echarts_education/edCSR.vue
@@ -1,5 +1,5 @@
-
+
-
-
diff --git a/src/view/echarts_yl/ylSMFW.vue b/src/view/echarts_yl/ylSMFW.vue
index 218deb6..1d06b5f 100644
--- a/src/view/echarts_yl/ylSMFW.vue
+++ b/src/view/echarts_yl/ylSMFW.vue
@@ -35,9 +35,11 @@ const data = reactive({
initialLegendData: ["上门服务时长", "上门服务次数"],
});
-const data1 = [120, 200, 150, 80, 70, 110, 130];
-const lineData = [150, 230, 224, 218, 135, 147, 260];
-const max = data.list1.concat(data.list2).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+// const data1 = [120, 200, 150, 80, 70];
+// const lineData = [150, 230, 224, 218, 135];
+// const max = data
+// .concat(lineData)
+// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// 背景颜色
const color = [
{
@@ -68,12 +70,7 @@ const getOption = () => {
tooltip: {
trigger: "axis",
formatter: "{b0}
{a0}:{c0}
{a1}:{c1}",
- axisPointer: {
- type: "cross",
- label: {
- backgroundColor: "#3F82F7", //提示文字标题颜色
- },
- },
+ axisPointer: {},
},
legend: {
data: data.initialLegendData,
@@ -120,7 +117,6 @@ const getOption = () => {
type: "value",
scale: true,
name: "时长/小时",
- max: max,
splitLine: {
show: false,
lineStyle: {
@@ -152,7 +148,6 @@ const getOption = () => {
scale: true,
name: "次数/次",
min: 0,
- max: max,
splitLine: {
//分割线配置
show: false,
@@ -180,13 +175,54 @@ const getOption = () => {
},
},
},
+ {
+ type: "value",
+ max: 100,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ type: "solid",
+ color: "rgba(255, 255, 255, 0.3)",
+ },
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ type: "dotted",
+ },
+ },
+ axisLabel: {
+ show: false,
+ fontSize: 16,
+ color: "#ffffff",
+ lineHeight: 19,
+ fontFamily: "MicrosoftYaHei",
+ },
+ },
],
series: [
{
+ z: 1,
+ yAxisIndex: 0,
name: "上门服务时长",
data: data.list1,
barWidth: 20,
type: "bar",
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ x2: 1,
+ y: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: "rgba(142, 187, 255, .7)" },
+ { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+ { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+ { offset: 1, color: "rgba(142, 187, 255, .5)" },
+ ],
+ },
+ },
label: {
show: true,
color: "#ffffff",
@@ -196,6 +232,7 @@ const getOption = () => {
},
},
{
+ yAxisIndex: 1,
name: "上门服务次数",
data: data.list2,
type: "line", //线状图
@@ -215,10 +252,11 @@ const getOption = () => {
},
{
xAxisIndex: 1,
+ yAxisIndex: 2,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
- data: data.list1.map(() => max),
+ data: data.list1.map(() => 100),
barWidth: 40, //外阴影背景宽
emphasis: {
itemStyle: {
@@ -243,10 +281,41 @@ const getOption = () => {
},
type: "bar",
},
+ //顶部四边形
+ {
+ z: 1,
+ name: "上部1",
+ type: "pictorialBar",
+ symbolPosition: "end",
+ data: data.list1,
+ symbol: "diamond",
+ symbolOffset: ["0%", "-50%"],
+ symbolSize: [22, 15],
+ itemStyle: {
+ borderColor: "#2fffa4",
+ color: "rgba(142, 187, 255, 1)",
+ },
+ },
],
};
};
+// // 使用生命钩子
+// 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();
+// // });
+// });
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
@@ -259,7 +328,6 @@ const setChart1 = () => {
data.list1.push(item.sc); //服务时长
data.list2.push(item.fwcs); //服务次数
});
- console.log(data.list1,data.list2, "助老服务");
};
// 使用生命钩子
@@ -273,7 +341,6 @@ onBeforeMount(() => {
setChart();
}, 600);
});
-
-