单独构建大屏ui库,避免引入混乱

2024-04-12 10:22:47 +08:00
parent a4d4e3cea5
commit b5523f5f40
191 changed files with 374 additions and 355 deletions
--- a/ui/dv/AiEchart/template/pie.js
+++ b/ui/dv/AiEchart/template/pie.js
@@ -0,0 +1,225 @@
+export const pieChart1 = {
+  legend: {
+    right: 20,
+    top: 'middle',
+    orient: 'vertical',
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    top: '0%',
+    left: '0%',
+    right: '0px',
+    bottom: '0%'
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {},
+  series: {
+    type: "pie",
+    radius: ['60%', '70%'],
+    minShowLabelAngle: 10,
+    itemStyle: {
+      borderColor: 'rgba(128, 128, 128, 0.1)',
+    },
+    label: {
+      show: false
+    }
+  }
+}
+export const pieChart2 = {
+  legend: {
+    bottom: 0,
+    itemGap: 14,
+    itemWidth: 16,
+    itemHeight: 5,
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    height: 260
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {
+    backgroundColor: "rgba(14, 51, 111, 0.9)",
+    borderColor: "#1A6ABC",
+    textStyle: {color: "#fff"}
+  },
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: [70, 81],
+    itemStyle: {
+      borderColor: "#fff",
+      borderWidth: 2
+    },
+    label: {
+      color: "#A8D7F3",
+      fontSize: 14,
+      formatter: "{name|{b}}\n{v|{d}%}",
+      minMargin: 5,
+      edgeDistance: 10,
+      lineHeight: 22,
+      rich: {
+        v: {
+          color: "#fff"
+        }
+      }
+    },
+    labelLine: {},
+    labelLayout: function (params) {
+      let points = params.labelLinePoints
+      if (points) {
+        const isLeft = points[2][0] < points[1][0]
+        points[2][0] += (params.labelRect.width + 4) * (isLeft ? -1 : 1)
+      }
+      return {
+        labelLinePoints: points
+      }
+    }
+  },
+  render: (h, params) => {
+    const formatNum = num => {
+      if (num >= 10000000) {
+        return num / 10000000 + "千万"
+      }
+
+      if (num >= 100000) {
+        return num / 10000 + "万"
+      }
+
+      return parseFloat(num.toFixed(2))
+    }
+
+    let total = params.data.reduce((t, e) => {
+      return t + Number(Object.values(e)?.[1] || 0)
+    }, 0)
+    return h(
+        "div",
+        {
+          style: {
+            height: "162px",
+            width: "162px",
+            color: "#8BCCFF",
+            left: "50%",
+            top: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            position: "absolute",
+            transform: "translate(-50%,-50%)",
+            backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
+            backgroundPosition: "center"
+          }
+        },
+        [
+          h(
+              "span",
+              {style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
+              formatNum(total)
+          ),
+          h("span", null, "总量")
+        ]
+    )
+  }
+}
+export const pieChart3 = {
+  legend: {
+    right: 20,
+    top: 'middle',
+    orient: 'vertical',
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    top: '0%',
+    left: '0%',
+    right: '0px',
+    bottom: '0%'
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {},
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: [50, 71],
+    itemStyle: {
+      borderColor: "#8d1419",
+      borderWidth: 2
+    },
+    label: {
+      show: false
+    },
+    labelLine: {}
+  },
+  render: (h, params) => {
+    const formatNum = num => {
+      if (num >= 10000000) {
+        return num / 10000000 + "千万"
+      }
+
+      if (num >= 10000) {
+        return num / 10000 + "万"
+      }
+
+      return parseFloat(num.toFixed(2))
+    }
+
+    let total = params.data.reduce((t, e) => {
+      return t + Number(Object.values(e)?.[1] || 0)
+    }, 0)
+    return h(
+        "div",
+        {
+          style: {
+            height: "162px",
+            width: "162px",
+            color: "#8BCCFF",
+            left: "50%",
+            top: "50%",
+            zIndex: '-1',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            position: "absolute",
+            transform: "translate(-50%,-50%)",
+            backgroundPosition: "center"
+          }
+        },
+        [
+          h(
+              'span',
+              {
+                style: {
+                  'font-size': '32px',
+                  'font-weight': 'bold',
+                  'margin-bottom': '3px',
+                  'color': '#CEE1FF',
+                  'line-height': '28px',
+                  'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)',
+                  'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
+                  '-webkit-background-clip': 'text',
+                  '-webkit-text-fill-color': 'transparent'
+                }
+              },
+              formatNum(total)
+          ),
+          h('span', {
+            style: {
+              'font-size': '16px',
+              'color': '#CEE1FF',
+              'line-height': '16px',
+              'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.5)',
+              'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
+              '-webkit-background-clip': 'text',
+              '-webkit-text-fill-color': 'transparent'
+            }
+          }, "总量")
+        ]
+    )
+  }
+}
+export default {
+  pieChart1, pieChart2, pieChart3
+}