gx

src/view/echarts/ylJHSY.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: calc(100% - 36px);"></div>
+  <div ref="chart" style="width: 100%; height: calc(100% - 68px)"></div>
 </template>
 
 <script setup>
@@ -9,8 +9,8 @@ import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
-const data = [120, 200, 150, 80, 70, 110, 130];
+const data = [120, 200, 50, 80, 70, ];
-const lineData = [150, 230, 224, 218, 135, 147, 260];
+const lineData = [150, 230, 24, 218, 135,];
 const max = data
   .concat(lineData)
   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
@@ -54,12 +54,12 @@ const option = {
     top: "8%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff", //上文字标题颜色
     },
   },
   grid: {
-    left: "3%",
+    left: "6%",
-    right: "6%",
+    right: "9%",
     bottom: "0%",
     containLabel: true,
     color: "#ffffff",
@@ -74,7 +74,7 @@ const option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
 
@@ -93,6 +93,7 @@ const option = {
       name: "计划生育人数",
       max: max,
       splitLine: {
+        //分割线配置
         show: false,
         lineStyle: {
           color: "#ffffff",
@@ -100,18 +101,27 @@ const option = {
         },
       },
       axisLabel: {
-        //坐标轴刻度标签的相关设置
+        //y轴文字的配置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
         },
       },
     },
     {
       type: "value",
       scale: true,
-      name: "计划生育补贴金额/元",
       min: 0,
       max: max,
+      name: "计划生育补贴金额/元",
       splitLine: {
         show: false,
         lineStyle: {
@@ -120,14 +130,20 @@ const option = {
         },
       },
       axisLabel: {
-        //坐标轴刻度标签的相关设置
+        //y轴文字的配置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
         },
       },
-      //   max: 300,
-      //   position: "right",
-      //   boundaryGap: [0.2, 0.2]
     },
   ],
   series: [
@@ -141,6 +157,11 @@ const option = {
       name: "计划生育补贴金额",
       data: lineData,
       type: "line", //线状图
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },
     },
     {
       xAxisIndex: 1,

src/view/echarts/ylSMFW.vue

@@ -54,7 +54,7 @@ const option = {
     top: "8%",
     textStyle: {
       fontSize: 12,
-      color: "#ccc",
+      color: "#ffffff",
     },
   },
   grid: {
@@ -74,7 +74,7 @@ const option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
         },
       },
 
@@ -95,14 +95,23 @@ const option = {
       splitLine: {
         show: false,
         lineStyle: {
-          color: "rgba(226, 226, 226, 0.3)",
+          color: "#ffffff",
           width: 1,
         },
       },
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
         },
       },
     },
@@ -112,22 +121,27 @@ const option = {
       name: "上门服务次数",
       min: 0,
       max: max,
-      splitLine: {
+      splitLine: {//分割线配置
         show: false,
         lineStyle: {
-          color: "rgba(226, 226, 226, 0.3)",
+          color: "#ffffff",
           width: 1,
         },
       },
-      axisLabel: {
+      axisLabel: {//y轴文字的配置
-        //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
         },
       },
-      //   max: 300,
-      //   position: "right",
-      //   boundaryGap: [0.2, 0.2]
     },
   ],
   series: [

src/view/echarts/ylXZZC.vue

@@ -86,10 +86,45 @@ let option = {
   //               }
   //             }
   //           },
-  xAxis: {},
+  xAxis: {
+    axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      splitLine: {//分割线配置
+        show: true,
+        lineStyle: {
+          color: "rgba(255, 255, 255, 0.2)",
+          width: 1,
+        },
+      },
+  },
   yAxis: {
     type: "category",
     data: data,
+    splitLine: {//分割线配置
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+        },
+      },
+      axisLabel: {//y轴文字的配置
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
+        },
+      },
   },
   series: [
     {

src/view/yl.vue

@@ -107,9 +107,9 @@
       <div class="flex1">
         <div class="yd_title familyPlanning"></div>
         <!-- 计划生育 -->
-        <div style="width: 100%; ">
+        <!-- <div style="width: 100%; "> -->
           <ylJHSY></ylJHSY>
-        </div>
+        <!-- </div> -->
       </div>
     </div>
     <div class="displayFlex center_bg">