Echarts样式调整

src/components/yxgl/EchartsDome.vue

@@ -28,13 +28,28 @@ export default {
       this.chart = echarts.init(this.$refs.chartContainer);
 
       let option = {
+        legend: {
+          data: ["调用次数", "平均响应时间"],
+        },
         tooltip: {
-          trigger: "axis", // 坐标轴触发提示
+          show: true,
+          trigger: "axis",
           axisPointer: { type: "shadow" },
-        },
-        legend: {
-          data: ["tokyo", "london"],
-          textStyle: { color: "#fff" }, // 图例文字颜色
+          // 给不同Y轴的提示文字加对应颜色
+          // formatter: (params) => {
+          //   let html = `<div style="color:#333;z-index:100;">${params[0].axisValue}</div>`;
+          //   params.forEach((item) => {
+          //     // 调用次数
+          //     if (item.yAxisIndex === 0) {
+          //       html += `<div style="color:#42a5f5">${item.seriesName}：${item.value}</div>`;
+          //     }
+          //     // 平均响应时间
+          //     else if (item.yAxisIndex === 1) {
+          //       html += `<div style="color:#4caf50">${item.seriesName}：${item.value}</div>`;
+          //     }
+          //   });
+          //   return html;
+          // },
         },
         xAxis: {
           type: "category",
@@ -51,39 +66,49 @@ export default {
             "Oct",
             "Nov",
           ],
-          axisLine: { lineStyle: { color: "#fff" } }, // 坐标轴颜色
           axisTick: { show: false }, // 隐藏刻度
           splitLine: { show: false }, // 隐藏分割线
         },
-        yAxis: {
-          type: "value",
-          max: 30,
-          axisLine: { lineStyle: { color: "#fff" } },
-          splitLine: {
-            lineStyle: {
-              type: "dashed", // 虚线网格
-              color: "#fff",
-            },
+        yAxis: [
+          {
+            type: "value",
+            name: "调用次数", // 第一个Y轴（左侧）
+            axisLine: { lineStyle: { color: "#42a5f5" } }, // 区分样式
           },
-        },
+          {
+            type: "value",
+            name: "响应时间（ms）", // 第二个Y轴（右侧）
+            position: "right", // 显示在右侧（关键）
+            axisLine: { lineStyle: { color: "#4caf50" } }, // 区分样式
+          },
+        ],
         series: [
           {
             name: "调用次数",
             type: "line",
+            smooth: true,
             data: [7, 7, 15, 19, 21, 22, 25, 26, 23, 19, 12], // 模拟数据
             lineStyle: { color: "#42a5f5" }, // 蓝色线条
             itemStyle: { color: "#42a5f5" }, // 节点颜色
             symbol: "circle", // 节点形状
             symbolSize: 6, // 节点大小
+            yAxisIndex: 0, // 绑定第一个Y轴（调用次数）
           },
           {
             name: "平均响应时间",
             type: "line",
+            smooth: true,
             data: [3, 3, 6, 12, 15, 17, 18, 17, 14, 10, 6], // 模拟数据
-            lineStyle: { color: "#4caf50" }, // 绿色线条
-            itemStyle: { color: "#4caf50" },
+            lineStyle: { color: "#4caf50", type: "dashed" }, // 绿色线条
+            itemStyle: {
+              color: "#4caf50",
+              color: "#FFF",
+              borderWidth: 2,
+              borderColor: "#4caf50",
+            },
             symbol: "circle",
             symbolSize: 6,
+            yAxisIndex: 1, // 绑定第二个Y轴（响应时间）
           },
         ],
       };

src/views/Yxgl.vue

@@ -70,20 +70,22 @@ export default {
 <style lang="less" scoped>
 #yxgl_box {
   width: 100vw;
+  height: calc(100vh - 120px);
   margin: 0;
   display: flex;
+  overflow: hidden;
 }
 
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
-  height: 100vh;
+  height: calc(100vh - 120px);
   margin: 0;
   //   background: #08224a;
 }
 .viewBox {
   width: calc(100vw - 200px);
   margin: 0;
-  height: 100vh;
+  height: calc(100vh - 120px);
   position: relative;
   overflow: hidden;
   overflow-y: auto;