修改图表、input输入框手机端样式

src/views/centerairC/sysMonitor/components/hostChart.vue

@@ -273,6 +273,7 @@ export default {
       if (chartRef) {
         // 初始化图表的代码
         this.chartInstance = echarts.init(this.$refs.chart_ref);
+        const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
         this.option = {
           tooltip: {
             trigger: "axis",
@@ -312,12 +313,16 @@ export default {
               }
               return res;
             },
+            textStyle: {
+              fontSize: titleFontSize * 1.5,
+            },
           },
           legend: {
             show: true,
             top: 0,
             textStyle: {
               color: "white",
+              fontSize: titleFontSize * 1.5,
             },
           },
           grid: {
@@ -336,6 +341,9 @@ export default {
               // interval: 0, //强制显示所有x轴数据
               // rotate: 30, //x轴坐标字体倾斜30度
               color: "rgba(255, 255, 255, 1)",
+              textStyle: {
+                fontSize: titleFontSize * 1.5,
+              },
             },
             axisTick: {
               show: false, // 不显示坐标轴刻度线
@@ -363,13 +371,16 @@ export default {
               // 设置 name 的样式
               nameTextStyle: {
                 color: "rgba(255, 255, 255, 1)",
-                fontSize: 12,
+                fontSize: titleFontSize * 2,
               },
               miniInterval: 5,
               type: "value",
               // 修饰刻度标签的颜色即y坐标数据
               axisLabel: {
                 color: "rgba(255, 255, 255, 1)",
+                textStyle: {
+                  fontSize: titleFontSize * 1.5,
+                },
               },
               // 显示y坐标轴
               axisLine: {
@@ -396,18 +407,17 @@ export default {
               // 设置 name 的样式
               nameTextStyle: {
                 color: "rgba(255, 255, 255, 1)",
-                fontSize: 12,
+                fontSize: titleFontSize * 1.5,
               },
               miniInterval: 5,
               type: "value",
               name: "负载", // y 轴的单位描述
               // 修饰刻度标签的颜色即y坐标数据
-              axisLabel: {
-                color: "#ffffff",
-              },
-              // 修饰刻度标签的颜色即y坐标数据
               axisLabel: {
                 color: "rgba(255, 255, 255, 1)",
+                textStyle: {
+                  fontSize: titleFontSize * 1.5,
+                },
               },
               // 显示y坐标轴
               axisLine: {

src/views/centerairC/sysMonitor/components/loadData.vue

@@ -6,9 +6,6 @@
 
 <script>
 import * as echarts from "echarts";
-import { eventBus } from "@/utils/evenBus";
-import { overView } from "@/api/bigScreen";
-import { getDay, getMonth, getYear } from "@/utils/datetime";
 export default {
   props: {
     hostData: {
@@ -99,6 +96,7 @@ export default {
       // 初始化数据
       const dataArr = this.loadPercent; //负载数据
       const dataX = 100;
+      const titleFontSize = this.$refs.sys_charts.offsetWidth / 20;
       this.chartInstance = echarts.init(this.$refs.sys_charts);
       this.option = {
         backgroundStyle: {
@@ -108,10 +106,10 @@ export default {
         title: [
           {
             text: `${dataArr} %`,
-            bottom: "8%",
+            bottom: titleFontSize,
             left: "center",
             textStyle: {
-              fontSize: "16", //标记
+              fontSize: titleFontSize * 1.5, //标记
               color: "#ffff",
               fontWeight: 800,
             },

src/views/centerairC/sysMonitor/hostDetails.vue

@@ -1815,6 +1815,10 @@ export default {
 .goodData>>>.el-input {
   width: 1rem !important;
 }
+.goodData>>>.el-input--suffix .el-input__inner{
+  padding-right: 0.3rem !important;
+}
+
 
 .goodData>>>.el-input--mini .el-input__inner {
   height: 0.28rem !important;