Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/echarts_education/edCSR.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%;height: 250px"></div>
+  <div ref="chart" style="width: 100%; height: 250px"></div>
 </template>
 
 <script setup>
@@ -9,12 +9,7 @@ import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
-const data = [20, 20, 50, 80, 70, 10, 30];
+const data = [200, 120, 150, 110, 70];
-// const lineData = [150, 230, 224, 218, 135, 147, 260];
-// const max = data
-//   .concat(lineData)
-//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-// // 背景颜色
 const color = [
   {
     type: "linear",
@@ -82,12 +77,12 @@ const option = {
       axisTick: {
         show: false, // 设置轴刻度不显示
       },
-      data:  ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
+      data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
     },
     {
       type: "category",
       show: false,
-      data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
+      data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
     },
   ],
   yAxis: [
@@ -122,74 +117,95 @@ const option = {
         },
       },
     },
-    // {
+    {
-    //   type: "value",
+      type: "value",
-    //   scale: true,
+      min: 0,
-    //   // name: "次数/次",
+      max: 100,
-    //   min: 0,
+      splitLine: {
-    //   max: max,
+        show: false,
-    //   splitLine: {//分割线配置
+        lineStyle: {
-    //     show: false,
+          type: "solid",
-    //     lineStyle: {
+          color: "rgb(221, 242, 255,0.1)",
-    //       color: "#ffffff",
+        },
-    //       width: 1,
+      },
-    //     },
+      axisLine: {
-    //   },
+        show: false,
-    //   axisLabel: {//y轴文字的配置
+        lineStyle: {
-    //     textStyle: {
+          type: "dotted",
-    //       color: "#ffffff",
+        },
-    //     },
+      },
-    //   },
+      axisLabel: {
-    //   axisLine: {
+        show: false,
-    //     //y轴线的颜色以及宽度
+        fontSize: 16,
-    //     show: false,
+        fontFamily: "MicrosoftYaHei",
-    //     lineStyle: {
+        color: "#ffffff",
-    //       color: "#ffffff",
+        fontSize: 16,
-    //       width: 1,
+        lineHeight: 19,
-    //       type: "solid",
+      },
-    //     },
+    },
-    //   },
-    // },
   ],
   series: [
     {
+      z: 1,
       // name: "上门服务时长",
       data: data,
       barWidth: 20,
       type: "bar",
-      label:{
+      itemStyle: {
-        show:true,
+        color: {
-        position:'top',
+          type: "linear",
-        color:'#ffffff',
+          x: 0,
-        formatter:function(data){
+          x2: 1,
-          return data.value
+          y: 0,
-        }
+          y2: 0,
+          colorStops: [
+            { offset: 0, color: "rgba(47, 168, 215, .7)" },
+            { offset: 0.5, color: "rgba(47, 168, 215, .7)" },
+            { offset: 0.5, color: "rgba(47, 168, 215, .3)" },
+            { offset: 1, color: "rgba(47, 168, 215, .5)" },
+          ],
         },
       },
-    // {
+      label: {
-    //   // name: "上门服务次数",
+        show: true,
-    //   data: lineData,
+        position: "top",
-    //   type: "line", //线状图
+        color: "#ffffff",
-    //   itemStyle: {
+        formatter: function (data) {
-    //     borderColor: "#00FCFF",
+          return data.value;
-    //     borderWidth: 1,
+        },
-    //     color: "#00FCFF",
+      },
-    //   },
+    },
-    // },
+    //外阴影
     {
       xAxisIndex: 1,
+      yAxisIndex: 1,
       showBackground: true,
       itemStyle: {
         normal: {
           color: "rgba(180, 180, 180, 0)", //外阴影背景
-        }
+        },
       },
       // data: data.map(() => max),
-      data: data.map(() => Math.max(...data) * 1.02),
+      data: data.map(() => 100),
       barWidth: 40, //外阴影背景宽
 
       type: "bar",
     },
+    //头部
+    {
+      z: 1,
+      type: "pictorialBar",
+      symbolPosition: "end",
+      data: data,
+      symbol: "diamond",
+      symbolOffset: ["0%", "-50%"],
+      symbolSize: [21, 15],
+
+      itemStyle: {
+        borderColor: "#2fffa4",
+        color: "rgba(47, 168, 215, 1)",
+      },
+    },
   ],
 };
 

src/view/echarts_work/eP1.vue

@@ -213,6 +213,7 @@ const getOption = () => {
         },
       },
       {
+        z: 1,
         yAxisIndex: 0,
         name: "救助人数",
         data: data.list1,
@@ -227,16 +228,19 @@ const getOption = () => {
           },
         },
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          color: {
-            {
+            type: "linear",
-              offset: 0,
+            x: 0,
-              color: "rgba(255, 243, 119, 1)",
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(255, 242, 142, .7)" },
+              { offset: 0.5, color: "rgba(255, 242, 142, .7)" },
+              { offset: 0.5, color: "rgba(255, 242, 142, .3)" },
+              { offset: 1, color: "rgba(255, 242, 142, .5)" },
+            ],
           },
-            {
-              offset: 1,
-              color: "rgba(255, 242, 142, 0.20)",
-            },
-          ]),
         },
       },
       {
@@ -270,6 +274,20 @@ const getOption = () => {
         data: data.list.year.map(() => 100),
         barWidth: 50,
       },
+      {
+        z: 1,
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.list1,
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [21, 15],
+
+        itemStyle: {
+          borderColor: "#2fffa4",
+          color: "rgba(255, 242, 142, 1)",
+        },
+      },
     ],
   };
 };

src/view/echarts_work/eP2.vue

@@ -47,12 +47,6 @@ const data = reactive({
   // max: null,
 });
 
-// const data1 = [120, 200, 50, 80, 70];
-// const lineData = [1500, 2300, 204, 2018, 1305];
-// const max = data1
-//   .concat(lineData)
-//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-
 const getOption = () => {
   data.option = {
     tooltip: {
@@ -213,6 +207,7 @@ const getOption = () => {
         },
       },
       {
+        z: 1,
         yAxisIndex: 0,
         name: "救助人数",
         data: data.list1,
@@ -227,16 +222,19 @@ const getOption = () => {
           },
         },
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          color: {
-            {
+            type: "linear",
-              offset: 0,
+            x: 0,
-              color: "rgba(23, 237, 255, 1)",
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+              { offset: 1, color: "rgba(23, 237, 255, .5)" },
+            ],
           },
-            {
-              offset: 1,
-              color: "rgba(23, 237, 255, 0.20)",
-            },
-          ]),
         },
       },
       {
@@ -271,6 +269,21 @@ const getOption = () => {
         // data: 100,
         barWidth: 50,
       },
+      //顶部圆片
+      {
+        z: 1,
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.list1,
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [21, 15],
+
+        itemStyle: {
+          borderColor: "#2fffa4",
+          color: "rgba(23, 237, 255, 1)",
+        },
+      },
     ],
   };
 };

src/view/echarts_work/eP4.vue

@@ -209,6 +209,7 @@ const getOption = () => {
         },
       },
       {
+        z: 1,
         yAxisIndex: 0,
         name: "生活补贴人数",
         data: data.list1,
@@ -223,16 +224,19 @@ const getOption = () => {
           },
         },
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          color: {
-            {
+            type: "linear",
-              offset: 0,
+            x: 0,
-              color: "rgba(23, 237, 255, 1)",
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+              { offset: 1, color: "rgba(23, 237, 255, .5)" },
+            ],
           },
-            {
-              offset: 1,
-              color: "rgba(23, 237, 255, 0.20)",
-            },
-          ]),
         },
       },
       {
@@ -266,6 +270,20 @@ const getOption = () => {
         data: data.list.year.map(() => 100),
         barWidth: 50,
       },
+      {
+        z: 1,
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.list1,
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [21, 15],
+
+        itemStyle: {
+          borderColor: "#2fffa4",
+          color: "rgba(23, 237, 255, 1)",
+        },
+      },
     ],
   };
 };

src/view/echarts_yl/pie3d.vue

@@ -560,11 +560,11 @@ const setChart = () => {
 onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;
-    pieData[0].value = data.list.nl5160;
+    pieData[0].value = data.list.nl6170;
-    pieData[1].value = data.list.nl6170;
+    pieData[1].value = data.list.nl7180;
-    pieData[2].value = data.list.nl7180;
+    pieData[2].value = data.list.nl8190;
-    pieData[3].value = data.list.nl8190;
+    pieData[3].value = data.list.nl91100;
-    pieData[4].value = data.list.nl91100;
+    pieData[4].value = data.list.nl100;
 
     getOption();
     setChart();

src/view/echarts_yl/ylSMFW.vue

@@ -3,17 +3,43 @@
 </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];
+const data = reactive({
-const lineData = [150, 230, 224, 218, 135];
+  list: [],
-const max = data
+  list1: [],
-  .concat(lineData)
+  list2: [],
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+  day: [],
+  option: {},
+  initialLegendData: ["上门服务时长", "上门服务次数"],
+});
+
+// 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 = [
   {
@@ -38,7 +64,8 @@ const color = [
     ],
   },
 ];
-const option = {
+const getOption = () => {
+  data.option = {
     color,
     tooltip: {
       trigger: "axis",
@@ -46,7 +73,7 @@ const option = {
       axisPointer: {},
     },
     legend: {
-    data: ["上门服务时长", "上门服务次数"],
+      data: data.initialLegendData,
       // top: "8%",
       textStyle: {
         fontSize: 16,
@@ -77,12 +104,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: [
@@ -178,7 +205,7 @@ const option = {
         z: 1,
         yAxisIndex: 0,
         name: "上门服务时长",
-      data: data,
+        data: data.list1,
         barWidth: 20,
         type: "bar",
         itemStyle: {
@@ -207,7 +234,7 @@ const option = {
       {
         yAxisIndex: 1,
         name: "上门服务次数",
-      data: lineData,
+        data: data.list2,
         type: "line", //线状图
         label: {
           show: true,
@@ -229,7 +256,7 @@ const option = {
         itemStyle: {
           color: "rgba(180, 180, 180, 0.2)", //外阴影背景
         },
-      data: data.map(() => 100),
+        data: data.list1.map(() => 100),
         barWidth: 40, //外阴影背景宽
         emphasis: {
           itemStyle: {
@@ -260,7 +287,7 @@ const option = {
         name: "上部1",
         type: "pictorialBar",
         symbolPosition: "end",
-      data: data,
+        data: data.list1,
         symbol: "diamond",
         symbolOffset: ["0%", "-50%"],
         symbolSize: [22, 15],
@@ -270,23 +297,49 @@ const option = {
         },
       },
     ],
+  };
+};
+
+// // 使用生命钩子
+// 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);
+};
+
+const setChart1 = () => {
+  data.list1 = [];
+  data.list2 = [];
+  data.list.data.forEach((item) => {
+    data.list1.push(item.sc); //服务时长
+    data.list2.push(item.fwcs); //服务次数
+  });
 };
 
 // 使用生命钩子
-onMounted(() => {
+onBeforeMount(() => {
-  // 基于准备好的dom，初始化echarts实例
+  setTimeout(() => {
-  // var myChart = echarts.init(document.getElementById('main'));
+    data.list = props.list;
-  // Vue3中： 需要引入
+    data.day = props.list.day;
-  var myChart = echarts.init(chart.value);
+    // console.log(data.list, "助老服务");
-
+    setChart1();
-  // init(); // vue3.2没有this
+    getOption();
-  // 使用刚指定的配置项和数据显示图表。
+    setChart();
-  myChart.setOption(option);
+  }, 600);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
 });
 </script>
 

src/view/yl.vue

@@ -243,12 +243,8 @@
         <div class="serviceBox">
           <div class="serviceTop">
             <div class="visit">
-              <img
+              <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
-                class="serviceimg"
+              <ylSMFW :list="data.smfwcs"></ylSMFW>
-                src="@/assets/YLimg/ylimg8.png"
-                alt=""
-              />
-              <ylSMFW></ylSMFW>
             </div>
             <div class="medicalService">
               <img
@@ -433,6 +429,7 @@ const data = reactive({
   yljgzlzx: { yljg: "", zlzx: "" },
   zccs1: [],
   zccs2: [],
+  smfwcs: [],
 });
 onBeforeMount(async () => {
   getData();
@@ -495,6 +492,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); // 地点