feat: 建立批处理也能输出图表的套路

2025-10-30 17:48:30 +08:00
parent 83574e1229
commit 53a6d33fd5
4 changed files with 233 additions and 292 deletions
--- a/leopard-strategy/src/main/resources/templates/report.html
+++ b/leopard-strategy/src/main/resources/templates/report.html
@@ -0,0 +1,191 @@
+<html lang='zh'>
+<head>
+  <meta charset='utf-8'/>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
+  <title>Strategy</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.13.0/antd.min.css"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.13.0/helper.min.css"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.13.0/iconfont.min.css"/>
+  <style>
+    html, body, #root {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+<div id='root'></div>
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/amis/6.13.0/sdk.min.js"></script>
+<script type='text/javascript' th:inline="javascript">
+  function candleChart(title, data) {
+    return {
+      type: 'service',
+      data: data,
+      body: {
+        className: 'mt-2',
+        type: 'chart',
+        height: 500,
+        config: {
+          title: {
+            text: title,
+          },
+          backgroundColor: '#fff',
+          animation: true,
+          animationDuration: 1000,
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+            },
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            borderColor: '#333',
+            borderWidth: 1,
+            textStyle: {
+              color: '#fff',
+              fontSize: 12,
+            },
+            padding: 12,
+            formatter: function (params) {
+              const param = params[0]
+              const open = parseFloat(param.data[1]).toFixed(2)
+              const close = parseFloat(param.data[2]).toFixed(2)
+              const lowest = parseFloat(param.data[3]).toFixed(2)
+              const highest = parseFloat(param.data[4]).toFixed(2)
+
+              return `<div class="text-center font-bold mb-2">${param.name}</div>
+                        <div class="text-center">
+                          <span>开盘:</span>
+                          <span class="font-bold ml-4">${open}</span>
+                        </div>
+                        <div class="text-center">
+                          <span>收盘:</span>
+                          <span class="font-bold ml-4">${close}</span>
+                        </div>
+                        <div class="text-center">
+                          <span>最低:</span>
+                          <span class="font-bold ml-4">${lowest}</span>
+                        </div>
+                        <div class="text-center">
+                          <span>最高:</span>
+                          <span class="font-bold ml-4">${highest}</span>
+                        </div>`
+            },
+          },
+          grid: {
+            left: '2%',
+            right: '2%',
+            top: '15%',
+            bottom: '15%',
+            containLabel: true,
+          },
+          xAxis: {
+            data: '${xList || []}',
+            axisLine: {
+              lineStyle: {
+                color: '#e0e0e0',
+              },
+            },
+            axisLabel: {
+              color: '#666',
+              fontWeight: 'bold',
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          yAxis: [
+            {
+              scale: true,
+              axisLine: {
+                lineStyle: {
+                  color: '#e0e0e0',
+                },
+              },
+              axisLabel: {
+                color: '#666',
+                fontWeight: 'bold',
+                formatter: function (value) {
+                  return value.toFixed(2)
+                },
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#f0f0f0',
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+            },
+            {
+              scale: true,
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                show: false,
+              },
+              splitLine: {
+                show: false,
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside',
+              start: 0,
+              end: 100,
+            },
+            {
+              show: true,
+              type: 'slider',
+              top: '90%',
+              start: 0,
+              end: 100,
+            },
+          ],
+          series: [
+            {
+              type: 'candlestick',
+              data: '${yList || []}',
+              yAxisIndex: 0,
+              itemStyle: {
+                color: '#eb5454',
+                color0: '#4aaa93',
+                borderColor: '#eb5454',
+                borderColor0: '#4aaa93',
+                borderWidth: 1,
+              },
+            },
+          ],
+        },
+      },
+    }
+  }
+
+  const data = /*[[${charts}]]*/ {};
+
+  (function () {
+    const amis = amisRequire('amis/embed')
+    const amisJson = {
+      type: 'page',
+      title: 'Strategy',
+      body: Object.keys(data)
+        .map(key => candleChart(key, data[key])),
+    }
+    amis.embed('#root', amisJson, {}, {theme: 'antd'})
+  })()
+</script>
+</html>