修改ui

2024-07-03 16:28:41 +08:00
parent aa6ae82607
commit 81c4af0cc8
19 changed files with 290 additions and 146 deletions
--- a/src/views/dashboard/charts/ChipYieldChart.vue
+++ b/src/views/dashboard/charts/ChipYieldChart.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-06-14 09:03:26
+ * @LastEditTime: 2024-07-03 15:56:48
 * @LastEditors: zhp
 * @Description:
 -->
@@ -53,7 +53,32 @@ export default {
          top: 0,
          containLabel: true,
        },
-        tooltip: {},
+        tooltip: {
+          trigger: "item",
+          // axisPointer: {
+          //   // type: "cross",
+          //   crossStyle: {
+          //     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',
+          formatter: params => {
+            console.log('params', params)
+            var res = ``;
+            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 +=
+                // `<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,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
+                `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+            }
+            console.log('res',res)
+            return res;
+          },
+        },
        title: {
          text: "0%",
          left: "48%",
@@ -223,40 +248,49 @@ export default {
    actualOptions() {
      console.log('this.output.current / this.output.target', this.output.current/this.output.target);
      const year = new Date().getFullYear()
-      const options = JSON.parse(JSON.stringify(this.options));
+      const options = this.options
      // console.log('options', options);
      // 标题
-      if (!this.output.target) options.title.text = "0%";
-      else
-        options.title.text =
-          ((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
+      if (!this.output.target && !this.output.current) options.title.text = "0%";
+      else if (!this.output.target && this.output.current) options.title.text = "100%";
+      else options.title.text =
+        ((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
      // 外环
      if (
        this.output.current == this.output.target &&
        this.output.current == 0
      ) {
-        options.series[1].data[0].value = 0;
-        options.series[1].data[1].value = 1;
-        options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
-        options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
+        this.options.series[1].data[0].value = 0;
+        this.options.series[1].data[1].value = 1;
+        this.options.series[1].data[0].tooltip.formatter =
+          `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
+        this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
      } else {
-        options.series[1].data[0].value = this.output.current;
-        options.series[1].data[1].value =
+        this.options.series[1].data[0].value = this.output.current;
+        this.options.series[1].data[1].value =
          this.output.target - this.output.current;
-        options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
-        options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
+        this.options.series[1].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
+        this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
      }
      // 内环
      if (this.output.previous == 0) {
-        options.series[2].data[0].value = 0;
-        options.series[2].data[1].value = 1;
-        options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
-        options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
+        this.options.series[2].data[0].value = 0;
+        this.options.series[2].data[1].value = 1;
+        this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
+        this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
      } else {
-        options.series[2].data[0].value = this.output.previous;
-        options.series[2].data[1].value = 0;
-        options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
-        options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
+        this.options.series[2].data[0].value = this.output.previous;
+        this.options.series[2].data[1].value = 0;
+        this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
+        this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
      }
      console.log('options', options);
      return options;
@@ -274,6 +308,9 @@ export default {
    factory(val) {
      this.initOptions(this.actualOptions);
    },
+    actualOptions() {
+      this.initOptions(this.actualOptions);
+    }
  },
  mounted() {
    console.log("mounted", this.actualOptions);
--- a/src/views/dashboard/charts/LeftChartBase.vue
+++ b/src/views/dashboard/charts/LeftChartBase.vue
@@ -73,27 +73,23 @@ export default {
              color: "rgba(237,237,237,0.5)",
            },
          },
-          // backgroundColor: '#000000',
-          // textStyle: {
-          //   color: '#ffff'
-          // }
+          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',
          formatter: params => {
-            // console.log(params);
-            // 获取xAxis data中的数据
-            let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
-            params.forEach(item => {
-              let color = item.color.colorStops ? item.color.colorStops[0].color : ''
-              console.log(item.color, color);
-              dataStr += `<div>
-          <div style="margin: 0 8px;">
-            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span>
-            <span>${item.seriesName}</span>
-            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
-          </div>
-        </div>`
-            })
-            return dataStr
-          }
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${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>`;
+            }
+            return res;
+          },
        },
        xAxis: {
          axisTick: {
--- a/src/views/dashboard/charts/RightChartBase.vue
+++ b/src/views/dashboard/charts/RightChartBase.vue
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-06-28 09:28:56
+ * @LastEditTime: 2024-07-03 14:13:59
 * @LastEditors: zhp
 * @Description:
 -->
@@ -79,22 +79,23 @@ 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',
          formatter: params => {
-            // 获取xAxis data中的数据
-            let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
-            params.forEach(item => {
-              let color = Object.prototype.toString.call(item.color) == "[object String]" ? item.color : item.color.colorStops ? item.color.colorStops[0].color : ''
-              console.log(item.color, color);
-              dataStr += `<div>
-          <div style="margin: 0 8px;">
-            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>
-            <span>${item.seriesName}</span>
-            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
-          </div>
-        </div>`
-            })
-            return dataStr
-          }
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${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>`;
+            }
+            return res;
+          },
        },
        xAxis: {
          axisTick: {