修改ui

2024-07-19 08:37:54 +08:00
parent 5444ff92f7
commit 7d6a0e228f
16 changed files with 467 additions and 325 deletions
--- a/src/views/copilot/components/BarChartBase.vue
+++ b/src/views/copilot/components/BarChartBase.vue
@@ -70,22 +70,26 @@ export default {
              color: "rgba(237,237,237,0.5)",
            },
          },
-          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
-          backgroundColor: '#001829',
-          borderColor: '#001829',
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
          formatter: params => {
-            console.log('params', params)
-            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
            for (var i = 0, l = params.length; i < l; i++) {
              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
              // console.log(item.color, color);
              res +=
                "<br/>" +
-                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
-                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
-                `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+                `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
+                `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`;
            }
-            return res;
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
          },
        },
        xAxis: {
@@ -98,24 +102,24 @@ export default {
            },
          },
          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
          },
          data: this.xAxis,
        },
        yAxis: {
          name: "单位/片",
          nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
            align: "right",
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
          },
          axisLine: {
            show: true,
@@ -133,7 +137,7 @@ export default {
          {
            name: "", // this.series[0].name,
            type: "bar",
-            barWidth: 12,
+            barWidth: 16,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: {
@@ -168,7 +172,7 @@ export default {
          {
            name: "", // this.series[1].name,
            type: "bar",
-            barWidth: 12,
+            barWidth: 16,
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + " ml";
@@ -214,18 +218,18 @@ export default {
    },
    isFullscreen(val) {
      this.options.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
+        item.barWidth = val ? 18 : 16;
      });
-      this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
      this.initChart(this.options);
      // this.actualOptions.series.map((item) => {
-      //   item.barWidth = val ? 18 : 12;
+      //   item.barWidth = val ? 18 : 16;
      // });
-      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
      // this.initChart(this.actualOptions);
      this.canvasReset()
    },
--- a/src/views/copilot/components/ftoBarChartBase.vue
+++ b/src/views/copilot/components/ftoBarChartBase.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-05-23 15:49:14
- * @LastEditTime: 2024-07-03 14:08:52
+ * @LastEditTime: 2024-07-18 15:43:56
 * @LastEditors: zhp
 * @Description:
 -->
@@ -71,22 +71,26 @@ export default {
              color: "rgba(237,237,237,0.5)",
            },
          },
-          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
-          backgroundColor: '#001829',
-          borderColor: '#001829',
+          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
+          extraCssText: 'padding:0;border-width:0',
          formatter: params => {
-            console.log('params', params)
-            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
            for (var i = 0, l = params.length; i < l; i++) {
              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
              // console.log(item.color, color);
              res +=
                "<br/>" +
-                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
-                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
-              `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+                `<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
+                `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`;
            }
-            return res;
+            const htmlContent = `
+              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
+                ${res}
+              </div>
+              `;
+
+            return htmlContent;
          },
        },
        xAxis: {
@@ -99,24 +103,24 @@ export default {
            },
          },
          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
          },
          data: this.xAxis,
        },
        yAxis: {
          name: "单位/片",
          nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
            align: "right",
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
+            color: "rgba(223,241,254,.8)",
+            fontSize: 16,
          },
          axisLine: {
            show: true,
@@ -134,7 +138,7 @@ export default {
          {
            name: "", // this.series[0].name,
            type: "bar",
-            barWidth: 12,
+            barWidth: 16,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: {
@@ -169,7 +173,7 @@ export default {
          {
            name: "", // this.series[1].name,
            type: "bar",
-            barWidth: 12,
+            barWidth: 16,
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + " ml";
@@ -215,18 +219,18 @@ export default {
    },
    isFullscreen(val) {
      this.options.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
+        item.barWidth = val ? 18 : 16;
      });
-      this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
      this.initChart(this.options);
      // this.actualOptions.series.map((item) => {
-      //   item.barWidth = val ? 18 : 12;
+      //   item.barWidth = val ? 18 : 16;
      // });
-      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
+      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
      // this.initChart(this.actualOptions);
      this.canvasReset()
    },