gx

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 copy.vue

@@ -1,293 +0,0 @@
-<template>
-  <div ref="chart" style="width: 340px; height: 250px"></div>
-</template>
-
-<script setup>
-import { onMounted, reactive, ref } from "vue";
-// 局部引入echarts核心模块
-import * as echarts from "echarts";
-
-const chart = ref(); // 创建DOM引用
-
-const data = [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 = [
-  {
-    type: "linear",
-    x: 0,
-    x2: 0,
-    y: 0,
-    y2: 1,
-    colorStops: [
-      {
-        offset: 0,
-        color: "rgba(142, 187, 255, 1)",
-      },
-      {
-        offset: 0.5,
-        color: "rgba(142, 187, 255, 0.5)",
-      },
-      {
-        offset: 1,
-        color: "rgba(142, 187, 255, 0.20)",
-      },
-    ],
-  },
-];
-const option = {
-  color,
-  tooltip: {
-    trigger: "axis",
-    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-    axisPointer: {},
-  },
-  legend: {
-    data: ["上门服务时长", "上门服务次数"],
-    // top: "8%",
-    textStyle: {
-      fontSize: 16,
-      color: "#ffffff",
-    },
-  },
-  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,
-        },
-      },
-      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: "时长/小时",
-      splitLine: {
-        show: false,
-        lineStyle: {
-          color: "rgba(255, 255, 255, 0.3)",
-          fontSize: 16,
-          width: 1,
-        },
-      },
-      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,
-      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",
-        },
-      },
-    },
-    {
-      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,
-      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",
-        formatter: function (data) {
-          return data.value;
-        },
-      },
-    },
-    {
-      yAxisIndex: 1,
-      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,
-      yAxisIndex: 2,
-      itemStyle: {
-        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
-      },
-      data: data.map(() => 100),
-      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",
-    },
-    //顶部四边形
-    {
-      z: 1,
-      name: "上部1",
-      type: "pictorialBar",
-      symbolPosition: "end",
-      data: data,
-      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();
-  //   });
-});
-</script>
-
-<style scoped></style>

src/view/echarts_yl/ylSMFW.vue

@@ -35,9 +35,11 @@ const data = reactive({
   initialLegendData: ["上门服务时长", "上门服务次数"],
 });
 
-const data1 = [120, 200, 150, 80, 70, 110, 130];
+// const data1 = [120, 200, 150, 80, 70];
-const lineData = [150, 230, 224, 218, 135, 147, 260];
+// const lineData = [150, 230, 224, 218, 135];
-const max = data.list1.concat(data.list2).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+// 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}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-      axisPointer: {
+      axisPointer: {},
-        type: "cross",
-        label: {
-          backgroundColor: "#3F82F7", //提示文字标题颜色
-        },
-      },
     },
     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);
 });
-
 </script>
 
 <style scoped></style>