echart 组件

project/dvui/AppDVDemo.vue

@@ -16,7 +16,7 @@
 <script>
 
 import AiDvWrapper from "./layout/AiDvWrapper/AiDvWrapper";
-import ops from './components/AiEchart/template/pie/pieChart1'
+import ops from './components/AiEchart/template/pie/pieChart3'
 import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
 import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
 import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
@@ -31,11 +31,26 @@ export default {
       ops,
       active: '',
       views: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
+        {
+          "name": "阿斯达",
+          "v1": 23,
+          "v2": 33
+        },
+        {
+          "name": "水电费",
+          "v1": 12,
+          "v2": 34
+        },
+        {
+          "name": "凡哥",
+          "v1": 67,
+          "v2": 25
+        },
+        {
+          "name": "党费",
+          "v1": 98,
+          "v2": 85
+        }
       ],
       list: [
         {name: '阿斯达', v1: 23, v2: 33},

project/dvui/components/AiEchart/template/pie/pieChart3.js

@@ -0,0 +1,107 @@
+export default {
+  legend: {
+    right: 0,
+    top: '30%',
+    orient: 'vertical',
+    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: [50, 71],
+    itemStyle: {
+      borderColor: "#8d1419",
+      borderWidth: 2
+    },
+    label: {
+      show: false
+    },
+    labelLine: {},
+    labelLayout: function (params) {
+      let points = params.labelLinePoints,
+          isLeft = points[2][0] < points[1][0]
+      points[2][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 >= 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: '0',
+            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'
+            }
+          }, "总量")
+        ]
+    )
+  }
+}

project/dvui/layout/AiDvPanel/borders/border5.vue

@@ -30,7 +30,7 @@ export default {
     .slot {
       width: 100%;
       height: calc(100% - 0px);
-      padding: 20px 10px 20px;
+      padding: 40px 10px 20px;
       background: rgba(120, 0, 0, 0.2);
       border: 1px solid rgba(203, 45, 0, 0.5);
     }