1

src/view/echarts_work/eP2.vue

@@ -44,7 +44,6 @@ const option = {
   tooltip: {
     trigger: "axis",
     formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-
   },
   legend: {
     data: ["救助金额", "救助人数"],
@@ -89,7 +88,7 @@ const option = {
       type: "value",
       scale: true,
       name: "救助人数",
-      max: maxRs+50,
+
       splitLine: {
         //分割线配置
         show: false,
@@ -118,7 +117,7 @@ const option = {
       type: "value",
       scale: true,
       min: 0,
-      max: maxJe+50,
+
       name: "救助金额/万",
       splitLine: {
         show: false,
@@ -143,6 +142,31 @@ const option = {
         },
       },
     },
+    {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
+    },
   ],
   series: [
     {
@@ -160,6 +184,7 @@ const option = {
       },
     },
     {
+      yAxisIndex: 0,
       name: "救助人数",
       data: data,
       barWidth: 20,
@@ -178,12 +203,9 @@ const option = {
       },
     },
     {
+      type: "bar",
       xAxisIndex: 1,
-      itemStyle: {
+      yAxisIndex: 2,
-        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
-      },
-      data: data.map(() => max+50),
-      barWidth: 40, //外阴影背景宽
       emphasis: {
         itemStyle: {
           color: {
@@ -205,7 +227,11 @@ const option = {
           },
         },
       },
-      type: "bar",
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      barWidth: 50,
     },
   ],
 };

src/view/echarts_work/eP3.vue

@@ -94,7 +94,7 @@ const option = {
       type: "value",
       scale: true,
       name: "救助人数",
-      max: maxRs+50,
+
       splitLine: {
         //分割线配置
         show: false,
@@ -123,7 +123,7 @@ const option = {
       type: "value",
       scale: true,
       min: 0,
-      max: maxJe+50,
+
       name: "救助金额/万",
       splitLine: {
         show: false,
@@ -148,7 +148,31 @@ const option = {
         },
       },
     },
-    
+         {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
+    },
   ],
   series: [
     {
@@ -174,6 +198,7 @@ const option = {
       },
     },
     {
+      yAxisIndex: 0,
       name: "特困救助人次",
       data: data,
       barWidth: 10,
@@ -192,6 +217,7 @@ const option = {
       },
     },
     {
+      yAxisIndex: 0,
       name: "低保救助人次",
       data: data2,
       barWidth: 10,
@@ -210,6 +236,7 @@ const option = {
       },
     },
     {
+      yAxisIndex: 0,
       name: "低边救助人次",
       data: data3,
       barWidth: 10,
@@ -228,11 +255,12 @@ const option = {
       },
     },
     {
+      yAxisIndex: 2,
       xAxisIndex: 1,
       itemStyle: {
         color: "rgba(180, 180, 180, 0.2)", //外阴影背景
       },
-      data: data.map(() => max),
+      data: data.map(() => 100),
       barWidth: 60, //外阴影背景宽
       emphasis: {
         itemStyle: {

src/view/echarts_work/eP4.vue

@@ -29,8 +29,7 @@ const color = [
 const option = {
   tooltip: {
     trigger: "axis",
-    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
+    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}",
-
   },
 
   legend: {
@@ -83,7 +82,7 @@ const option = {
       type: "value",
       scale: true,
       name: "补贴人数",
-      max: max,
+
       splitLine: {
         //分割线配置
         show: false,
@@ -112,7 +111,7 @@ const option = {
       type: "value",
       scale: true,
       min: 0,
-      max: max,
+
       name: "救助金额/元",
       splitLine: {
         show: false,
@@ -137,29 +136,35 @@ const option = {
         },
       },
     },
+    {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
+    },
   ],
   series: [
     {
-      name: "困难残疾人生活补贴金额",
+      yAxisIndex: 0,
-      data: lineData,
-      type: "line", //线状图
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#00FCFF",
-      },
-    },
-    {
-      name: "护理补贴金额",
-      data: lineData2,
-      type: "line", //线状图
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#2468FF",
-      },
-    },
-    {
       name: "困难残疾人生活补贴人数",
       data: data,
       barWidth: 10,
@@ -179,6 +184,7 @@ const option = {
     },
 
     {
+      yAxisIndex: 0,
       name: "护理补贴人数",
       data: data2,
       barWidth: 10,
@@ -197,11 +203,34 @@ const option = {
       },
     },
     {
+      yAxisIndex: 1,
+      name: "困难残疾人生活补贴金额",
+      data: lineData,
+      type: "line", //线状图
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },
+    },
+    {
+      yAxisIndex: 1,
+      name: "护理补贴金额",
+      data: lineData2,
+      type: "line", //线状图
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#2468FF",
+      },
+    },
+    {
+      yAxisIndex: 2,
       xAxisIndex: 1,
       itemStyle: {
         color: "rgba(180, 180, 180, 0.2)", //外阴影背景
       },
-      data: data.map(() => max),
+      data: data.map(() => 100),
       barWidth: 60, //外阴影背景宽
       emphasis: {
         itemStyle: {

src/view/echarts_work/ePjz.vue

@@ -8,7 +8,7 @@ import { onMounted, reactive, ref } from "vue";
 import * as echarts from "echarts";
 const chart = ref(); // 创建DOM引用
 
-const data = [120, 200, 50, 80, 70];
+const data = [120, 150, 250, 255, 170];
 const lineData = [150, 230, 24, 218, 135];
 const max = data
   .concat(lineData)
@@ -51,13 +51,13 @@ const option = {
   },
   tooltip: {
     trigger: "axis",
-    formatter: "{b0}<br/> {a1}:{c0}<br/>{a2}:{c1}",
+    formatter: "{b0}<br/> {a1}:{c1}<br/>{a2}:{c2}",
-    axisPointer: {
+    // axisPointer: {
-      type: "cross",
+    //   type: "cross",
-      label: {
+    //   label: {
-        backgroundColor: "#3F82F7", //提示文字标题颜色
+    //     backgroundColor: "#3F82F7", //提示文字标题颜色
-      },
+    //   },
-    },
+    // },
   },
   grid: {
     left: "6%",
@@ -92,7 +92,6 @@ const option = {
       type: "value",
       scale: true,
       name: "救助人数",
-      max: max,
       splitLine: {
         //分割线配置
         show: false,
@@ -121,7 +120,7 @@ const option = {
       type: "value",
       scale: true,
       min: 0,
-      max: max,
+
       name: "救助金额/万",
       splitLine: {
         show: false,
@@ -146,24 +145,51 @@ const option = {
         },
       },
     },
+    {
+      type: "value",
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "solid",
+          color: "rgb(221, 242, 255,0.1)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          type: "dotted",
+        },
+      },
+      axisLabel: {
+        show: false,
+        fontSize: 14,
+        fontFamily: "MicrosoftYaHei",
+        color: "#DEF1FF",
+        lineHeight: 19,
+      },
+    },
   ],
   series: [
     //  数据低下的圆片
     {
+      yAxisIndex: 0,
       name: "",
       type: "pictorialBar",
-      symbolSize: [20, 5], // 宽，高
+      symbolSize: [30, 5], // 宽，高
-      symbolOffset: [0, 2], // 左 上
+      symbolOffset: [0, 1], // 左 上
       z: 12,
-      symbol: 'circle',  // 图形形状为圆
+      symbol: "circle", // 图形形状为圆
       itemStyle: {
         color: "rgba(38, 191, 254, 1)",
         // color: "red",
       },
-      data: data,
+      data: data.map(()=>0),
     },
     // 数据的条形图
     {
+      yAxisIndex: 1,
       name: "总救助金额",
       data: lineData,
       type: "line", //线状图
@@ -178,9 +204,10 @@ const option = {
     },
     // 数据的柱状图
     {
+      yAxisIndex: 0,
       name: "总救助人数",
       data: data,
-      barWidth: 20,
+      barWidth: 30,
       type: "bar",
       itemStyle: {
         // borderColor: "#00FCFF",
@@ -201,11 +228,18 @@ const option = {
     //外阴影背景
     {
       xAxisIndex: 1,
+      yAxisIndex: 2,
       itemStyle: {
-        color: "rgba(180, 180, 180, 0.2)", //背景颜色
+        normal: {
+          // borderColor: "rgba(0, 183, 255, 1)",
+          borderRadius: [10, 10, 0, 0], //圆角边框
+          // color: "rgba(94, 178, 188, 0.3)", //外阴影背景
+
+          color: "rgba(180, 180, 180, 0.2)", //背景颜色
+        },
       },
-      data: data.map(() => max),
+      data: data.map(() => 100),
-      barWidth: 40, //外阴影背景宽
+      barWidth: 30, //外阴影背景宽
       emphasis: {
         itemStyle: {
           color: {
@@ -231,10 +265,11 @@ const option = {
     },
     // 数据顶部的样式
     {
+      yAxisIndex: 0,
       name: "",
       type: "pictorialBar",
       symbol: "circle",
-      symbolSize: [20, 8],
+      symbolSize: [30, 8],
       symbolOffset: [0, -4],
       z: 3,
       itemStyle: {
@@ -312,8 +347,6 @@ const option = {
   //     ]
 };
 
-
-
 onMounted(() => {
   var myChart = echarts.init(chart.value);
   myChart.setOption(option);