Compare commits
4 Commits
9a31b8cae4
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 6179137e0d | |||
| 958bc459b2 | |||
| 7eec44f21c | |||
| 5f42d36436 |
54
.idea/compiler.xml
generated
54
.idea/compiler.xml
generated
@@ -17,13 +17,11 @@
|
||||
<entry name="$MAVEN_REPOSITORY$/org/projectlombok/lombok/1.18.38/lombok-1.18.38.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/hibernate/orm/hibernate-jpamodelgen/6.6.8.Final/hibernate-jpamodelgen-6.6.8.Final.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/hibernate/orm/hibernate-core/6.6.8.Final/hibernate-core-6.6.8.Final.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/persistence/jakarta.persistence-api/3.2.0/jakarta.persistence-api-3.2.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/transaction/jakarta.transaction-api/2.0.1/jakarta.transaction-api-2.0.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/jboss/logging/jboss-logging/3.5.0.Final/jboss-logging-3.5.0.Final.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/com/fasterxml/classmate/1.5.1/classmate-1.5.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/inject/jakarta.inject-api/2.0.1/jakarta.inject-api-2.0.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/hibernate/common/hibernate-commons-annotations/7.0.3.Final/hibernate-commons-annotations-7.0.3.Final.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/jandex/3.2.0/jandex-3.2.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/com/fasterxml/classmate/1.5.1/classmate-1.5.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/net/bytebuddy/byte-buddy/1.15.11/byte-buddy-1.15.11.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/xml/bind/jakarta.xml.bind-api/4.0.0/jakarta.xml.bind-api-4.0.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/activation/jakarta.activation-api/2.1.0/jakarta.activation-api-2.1.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/glassfish/jaxb/jaxb-runtime/4.0.2/jaxb-runtime-4.0.2.jar" />
|
||||
@@ -31,10 +29,11 @@
|
||||
<entry name="$MAVEN_REPOSITORY$/org/eclipse/angus/angus-activation/2.0.0/angus-activation-2.0.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/glassfish/jaxb/txw2/4.0.2/txw2-4.0.2.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/com/sun/istack/istack-commons-runtime/4.1.1/istack-commons-runtime-4.1.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/inject/jakarta.inject-api/2.0.1/jakarta.inject-api-2.0.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/antlr/antlr4-runtime/4.13.0/antlr4-runtime-4.13.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/validation/jakarta.validation-api/3.0.2/jakarta.validation-api-3.0.2.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/annotation/jakarta.annotation-api/2.1.1/jakarta.annotation-api-2.1.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/antlr/antlr4-runtime/4.13.0/antlr4-runtime-4.13.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/net/bytebuddy/byte-buddy/1.15.11/byte-buddy-1.15.11.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/jboss/logging/jboss-logging/3.5.0.Final/jboss-logging-3.5.0.Final.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/github/openfeign/querydsl/querydsl-apt/7.0/querydsl-apt-7.0-jpa.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/github/openfeign/querydsl/querydsl-codegen/7.0/querydsl-codegen-7.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/github/openfeign/querydsl/querydsl-core/7.0/querydsl-core-7.0.jar" />
|
||||
@@ -43,48 +42,7 @@
|
||||
<entry name="$MAVEN_REPOSITORY$/io/github/openfeign/querydsl/querydsl-codegen-utils/7.0/querydsl-codegen-utils-7.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/eclipse/jdt/ecj/3.40.0/ecj-3.40.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/github/classgraph/classgraph/4.8.179/classgraph-4.8.179.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/jetbrains/annotations/26.0.2/annotations-26.0.2.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/dev/morphia/morphia/morphia-core/2.5.0/morphia-core-2.5.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/config/smallrye-config/3.10.1/smallrye-config-3.10.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/config/smallrye-config-core/3.10.1/smallrye-config-core-3.10.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/eclipse/microprofile/config/microprofile-config-api/3.1/microprofile-config-api-3.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/common/smallrye-common-annotation/2.8.0/smallrye-common-annotation-2.8.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/common/smallrye-common-expression/2.8.0/smallrye-common-expression-2.8.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/common/smallrye-common-function/2.8.0/smallrye-common-function-2.8.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/common/smallrye-common-constraint/2.8.0/smallrye-common-constraint-2.8.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/common/smallrye-common-classloader/2.8.0/smallrye-common-classloader-2.8.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/ow2/asm/asm/9.8/asm-9.8.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/smallrye/config/smallrye-config-common/3.10.1/smallrye-config-common-3.10.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/mongodb/mongodb-driver-sync/5.4.0/mongodb-driver-sync-5.4.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/mongodb/bson/5.4.0/bson-5.4.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/mongodb/mongodb-driver-core/5.4.0/mongodb-driver-core-5.4.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/mongodb/bson-record-codec/5.4.0/bson-record-codec-5.4.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/mongodb/mongodb-driver-legacy/5.4.0/mongodb-driver-legacy-5.4.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/slf4j/slf4j-api/2.0.17/slf4j-api-2.0.17.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/com/github/spotbugs/spotbugs-annotations/4.8.6/spotbugs-annotations-4.8.6.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/com/google/code/findbugs/jsr305/3.0.2/jsr305-3.0.2.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/semver4j/semver4j/5.6.0/semver4j-5.6.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/jspecify/jspecify/1.0.0/jspecify-1.0.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/jsoup/jsoup/1.18.3/jsoup-1.18.3.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/hibernate/orm/hibernate-envers/7.0.0.Beta1/hibernate-envers-7.0.0.Beta1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/hibernate/models/hibernate-models/0.8.6/hibernate-models-0.8.6.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/io/github/openfeign/querydsl/querydsl-core/7.0/querydsl-core-7.0-tests.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/joda/joda-money/2.0.2/joda-money-2.0.2.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/junit/jupiter/junit-jupiter/5.13.1/junit-jupiter-5.13.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/junit/jupiter/junit-jupiter-api/5.13.1/junit-jupiter-api-5.13.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/opentest4j/opentest4j/1.3.0/opentest4j-1.3.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/junit/platform/junit-platform-commons/1.13.1/junit-platform-commons-1.13.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/apiguardian/apiguardian-api/1.1.2/apiguardian-api-1.1.2.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/junit/jupiter/junit-jupiter-params/5.13.1/junit-jupiter-params-5.13.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/junit/jupiter/junit-jupiter-engine/5.13.1/junit-jupiter-engine-5.13.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/junit/platform/junit-platform-engine/1.13.1/junit-platform-engine-1.13.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/assertj/assertj-core/3.27.3/assertj-core-3.27.3.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/junit/vintage/junit-vintage-engine/5.13.1/junit-vintage-engine-5.13.1.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/junit/junit/4.13.2/junit-4.13.2.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/hamcrest/hamcrest-core/1.3/hamcrest-core-1.3.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/easymock/easymock/5.6.0/easymock-5.6.0.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/objenesis/objenesis/3.4/objenesis-3.4.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/org/javassist/javassist/3.30.2-GA/javassist-3.30.2-GA.jar" />
|
||||
<entry name="$MAVEN_REPOSITORY$/jakarta/persistence/jakarta.persistence-api/3.2.0/jakarta.persistence-api-3.2.0.jar" />
|
||||
</processorPath>
|
||||
<module name="leopard-core" />
|
||||
</profile>
|
||||
|
||||
@@ -101,12 +101,13 @@ public class StrategyApplication {
|
||||
.filter(daily -> daily.getTradeDate().isAfter(startDate) && daily.getTradeDate().isBefore(endDate))
|
||||
.sorted(Comparator.comparing(Daily::getTradeDate))
|
||||
.toList();
|
||||
var dailyXList = new ArrayList<String>();
|
||||
var dailyYList = new ArrayList<List<Double>>();
|
||||
var oclhList = new HashMap<>();
|
||||
var dailyCloseMapping = new HashMap<String, Double>();
|
||||
for (var daily : dailies) {
|
||||
dailyXList.add(daily.getTradeDate().toString());
|
||||
dailyYList.add(List.of(daily.getHfqOpen(), daily.getHfqClose(), daily.getHfqLow(), daily.getHfqHigh()));
|
||||
oclhList.put(
|
||||
daily.getTradeDate().toString(),
|
||||
List.of(daily.getHfqOpen(), daily.getHfqClose(), daily.getHfqLow(), daily.getHfqHigh())
|
||||
);
|
||||
dailyCloseMapping.put(daily.getTradeDate().toString(), daily.getHfqClose());
|
||||
}
|
||||
charts.add(
|
||||
@@ -120,8 +121,7 @@ public class StrategyApplication {
|
||||
"日线",
|
||||
Dict.create()
|
||||
.set("type", "candle")
|
||||
.set("xList", dailyXList)
|
||||
.set("yList", dailyYList)
|
||||
.set("oclh", oclhList)
|
||||
.set(
|
||||
"points",
|
||||
asset.getTrades()
|
||||
|
||||
@@ -22,6 +22,163 @@
|
||||
</body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/amis/6.13.0/sdk.min.js"></script>
|
||||
<script th:inline="javascript" type='text/javascript'>
|
||||
// 全局配置（颜色、尺寸、间距等），集中管理，便于统一调整
|
||||
const CONFIG = {
|
||||
colors: {up: '#000000FF', down: '#00000045'},
|
||||
grid: {left: '2%', right: '2%', top: 40, bottom: 110},
|
||||
zoom: {bottom: 16, height: 50},
|
||||
linewidth: {stem: 1.5, openTick: 1.2, closeTick: 1.6, closeLine: 1.5},
|
||||
tick: {min: 4, max: 10, scale: 0.4},
|
||||
}
|
||||
|
||||
// 通用 tooltip 格式化（按索引回读原始 O/H/L/C）
|
||||
function makeTooltipFormatter(dataMap, dates) {
|
||||
return function (params) {
|
||||
let p = Array.isArray(params) ? params[0] : params
|
||||
let idx = p.dataIndex
|
||||
let d = dates[idx]
|
||||
let ohlc = dataMap[d] || []
|
||||
let o = ohlc[0], c = ohlc[1], l = ohlc[2], h = ohlc[3]
|
||||
let chg = (c - o)
|
||||
let chgPct = o ? (chg / o * 100) : 0
|
||||
let sign = chg >= 0 ? '+' : ''
|
||||
return [
|
||||
d,
|
||||
'O: ' + o,
|
||||
'C: ' + c,
|
||||
'H: ' + h,
|
||||
'L: ' + l,
|
||||
'Chg: ' + sign + chg.toFixed(2) + ' (' + sign + chgPct.toFixed(2) + '%)',
|
||||
].join('<br/>')
|
||||
}
|
||||
}
|
||||
|
||||
// 通用基础配置构建（legend/tooltip/grid/xAxis/yAxis/dataZoom）
|
||||
function buildBaseOption(dates, series, formatter) {
|
||||
return {
|
||||
animation: false,
|
||||
legend: {show: false},
|
||||
tooltip: {trigger: 'axis', axisPointer: {type: 'cross'}, formatter},
|
||||
grid: CONFIG.grid,
|
||||
xAxis: {type: 'category', data: dates, boundaryGap: true, axisLine: {onZero: false}},
|
||||
yAxis: {scale: true},
|
||||
dataZoom: [
|
||||
{type: 'inside', xAxisIndex: 0, start: 0, end: 100},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
xAxisIndex: 0,
|
||||
bottom: CONFIG.zoom.bottom,
|
||||
height: CONFIG.zoom.height,
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series,
|
||||
}
|
||||
}
|
||||
|
||||
// Range Band + Close Line（高低区间带 + 收盘线）：趋势与波动范围直观
|
||||
function buildRangeCloseOption(dataMap) {
|
||||
const dates = Object.keys(dataMap).sort()
|
||||
const lowArr = dates.map(d => dataMap[d][2])
|
||||
const highArr = dates.map(d => dataMap[d][3])
|
||||
const closeArr = dates.map(d => dataMap[d][1])
|
||||
const rangeArr = highArr.map((h, i) => h - lowArr[i])
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Low',
|
||||
type: 'line',
|
||||
data: lowArr,
|
||||
stack: 'range',
|
||||
symbol: 'none',
|
||||
lineStyle: {width: 0},
|
||||
emphasis: {disabled: true},
|
||||
},
|
||||
{
|
||||
name: 'Range',
|
||||
type: 'line',
|
||||
data: rangeArr,
|
||||
stack: 'range',
|
||||
symbol: 'none',
|
||||
lineStyle: {width: 0},
|
||||
areaStyle: {color: CONFIG.colors.down, opacity: 0.6},
|
||||
z: 2,
|
||||
},
|
||||
{
|
||||
name: 'Close',
|
||||
type: 'line',
|
||||
data: closeArr,
|
||||
symbol: 'none',
|
||||
lineStyle: {color: CONFIG.colors.up, width: CONFIG.linewidth.closeLine},
|
||||
z: 3,
|
||||
},
|
||||
]
|
||||
|
||||
return buildBaseOption(dates, series, makeTooltipFormatter(dataMap, dates))
|
||||
}
|
||||
|
||||
// Minimal OHLC（竖线 + 左/右短横）：信息等价于K线但形态简洁
|
||||
function buildOHLCMinimalOption(dataMap) {
|
||||
const dates = Object.keys(dataMap).sort()
|
||||
const ohlcData = dates.map((d, i) => [i, ...dataMap[d]])
|
||||
|
||||
// 自定义渲染：竖线=高低区间；左短横=开盘；右短横=收盘；颜色=涨跌
|
||||
function renderOHLCMinimal(params, api) {
|
||||
let idx = api.value(0)
|
||||
let open = api.value(1)
|
||||
let close = api.value(2)
|
||||
let low = api.value(3)
|
||||
let high = api.value(4)
|
||||
let up = close >= open
|
||||
|
||||
let x = api.coord([idx, 0])[0]
|
||||
let highPoint = api.coord([idx, high])
|
||||
let lowPoint = api.coord([idx, low])
|
||||
let openPoint = api.coord([idx, open])
|
||||
let closePoint = api.coord([idx, close])
|
||||
|
||||
let band = api.size([1, 0])[0]
|
||||
let tick = Math.max(CONFIG.tick.min, Math.min(CONFIG.tick.max, band * CONFIG.tick.scale))
|
||||
let color = up ? CONFIG.colors.up : CONFIG.colors.down
|
||||
|
||||
return {
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
type: 'line',
|
||||
shape: {x1: x, y1: highPoint[1], x2: x, y2: lowPoint[1]},
|
||||
style: {stroke: color, lineWidth: CONFIG.linewidth.stem, opacity: 0.9},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
shape: {x1: x - tick, y1: openPoint[1], x2: x, y2: openPoint[1]},
|
||||
style: {stroke: color, lineWidth: CONFIG.linewidth.openTick, opacity: 0.95},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
shape: {x1: x, y1: closePoint[1], x2: x + tick, y2: closePoint[1]},
|
||||
style: {stroke: color, lineWidth: CONFIG.linewidth.closeTick, opacity: 0.95},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'ohlc',
|
||||
type: 'custom',
|
||||
renderItem: renderOHLCMinimal,
|
||||
encode: {x: 0, y: [1, 2, 3, 4]},
|
||||
data: ohlcData,
|
||||
z: 10,
|
||||
},
|
||||
]
|
||||
|
||||
return buildBaseOption(dates, series, makeTooltipFormatter(dataMap, dates))
|
||||
}
|
||||
|
||||
function candleChart(title, data) {
|
||||
return {
|
||||
type: 'service',
|
||||
@@ -34,201 +191,7 @@
|
||||
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: [
|
||||
{
|
||||
position: 'left',
|
||||
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,
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
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,
|
||||
},
|
||||
markPoint: {
|
||||
data: '${points || []}',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: '${sma30 || []}',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: 'rgba(0,111,255,0.5)',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: '${sma60 || []}',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: 'rgba(115,0,255,0.5)',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: '${sma30Slopes || []}',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: 'rgba(0,255,81,0.5)',
|
||||
},
|
||||
},
|
||||
],
|
||||
...buildRangeCloseOption(data['oclh']),
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<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'/>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
|
||||
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
|
||||
<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"/>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.13.0/antd.min.css" rel="stylesheet"/>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.13.0/helper.min.css" rel="stylesheet"/>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/amis/6.13.0/iconfont.min.css" rel="stylesheet"/>
|
||||
<style>
|
||||
html, body, #root {
|
||||
position: relative;
|
||||
@@ -21,226 +21,207 @@
|
||||
<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: 800,
|
||||
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)
|
||||
<script th:inline="javascript" type='text/javascript'>
|
||||
// Market data as KV: { 'YYYY-MM-DD': [open, close, low, high], ... }
|
||||
const data = {
|
||||
'2025-01-01': [100, 105, 98, 108],
|
||||
'2025-01-02': [105, 102, 100, 107],
|
||||
'2025-01-03': [102, 110, 101, 112],
|
||||
'2025-01-04': [110, 108, 106, 113],
|
||||
'2025-01-05': [108, 115, 107, 116],
|
||||
'2025-01-06': [115, 117, 114, 120],
|
||||
'2025-01-07': [117, 112, 111, 119],
|
||||
'2025-01-08': [112, 118, 110, 121],
|
||||
'2025-01-09': [118, 121, 117, 123],
|
||||
'2025-01-10': [121, 119, 118, 122],
|
||||
}
|
||||
|
||||
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: [
|
||||
{
|
||||
position: 'left',
|
||||
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,
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
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,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: '${sma30 || []}',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: 'rgba(0,111,255,0.5)',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: '${sma60 || []}',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: 'rgba(115,0,255,0.5)',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: '${sma30Slopes || []}',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: 'rgba(0,255,81,0.5)',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
// 全局配置（颜色、尺寸、间距等），集中管理，便于统一调整
|
||||
const CONFIG = {
|
||||
colors: {up: '#000000FF', down: '#00000045'},
|
||||
grid: {left: '2%', right: '2%', top: 40, bottom: 110},
|
||||
zoom: {bottom: 16, height: 50},
|
||||
linewidth: {stem: 1.5, openTick: 1.2, closeTick: 1.6, closeLine: 1.5},
|
||||
tick: {min: 4, max: 10, scale: 0.4},
|
||||
}
|
||||
|
||||
// 通用 tooltip 格式化（按索引回读原始 O/H/L/C）
|
||||
function makeTooltipFormatter(dataMap, dates) {
|
||||
return function (params) {
|
||||
let p = Array.isArray(params) ? params[0] : params
|
||||
let idx = p.dataIndex
|
||||
let d = dates[idx]
|
||||
let ohlc = dataMap[d] || []
|
||||
let o = ohlc[0], c = ohlc[1], l = ohlc[2], h = ohlc[3]
|
||||
let chg = (c - o)
|
||||
let chgPct = o ? (chg / o * 100) : 0
|
||||
let sign = chg >= 0 ? '+' : ''
|
||||
return [
|
||||
d,
|
||||
'O: ' + o,
|
||||
'C: ' + c,
|
||||
'H: ' + h,
|
||||
'L: ' + l,
|
||||
'Chg: ' + sign + chg.toFixed(2) + ' (' + sign + chgPct.toFixed(2) + '%)',
|
||||
].join('<br/>')
|
||||
}
|
||||
}
|
||||
|
||||
const data = /*[[${charts}]]*/ {};
|
||||
// 通用基础配置构建（legend/tooltip/grid/xAxis/yAxis/dataZoom）
|
||||
function buildBaseOption(dates, series, formatter) {
|
||||
return {
|
||||
animation: false,
|
||||
legend: {show: false},
|
||||
tooltip: {trigger: 'axis', axisPointer: {type: 'cross'}, formatter},
|
||||
grid: CONFIG.grid,
|
||||
xAxis: {type: 'category', data: dates, boundaryGap: true, axisLine: {onZero: false}},
|
||||
yAxis: {scale: true},
|
||||
dataZoom: [
|
||||
{type: 'inside', xAxisIndex: 0, start: 0, end: 100},
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
xAxisIndex: 0,
|
||||
bottom: CONFIG.zoom.bottom,
|
||||
height: CONFIG.zoom.height,
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series,
|
||||
}
|
||||
}
|
||||
|
||||
// Range Band + Close Line（高低区间带 + 收盘线）：趋势与波动范围直观
|
||||
function buildRangeCloseOption(dataMap) {
|
||||
const dates = Object.keys(dataMap).sort()
|
||||
const lowArr = dates.map(d => dataMap[d][2])
|
||||
const highArr = dates.map(d => dataMap[d][3])
|
||||
const closeArr = dates.map(d => dataMap[d][1])
|
||||
const rangeArr = highArr.map((h, i) => h - lowArr[i])
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Low',
|
||||
type: 'line',
|
||||
data: lowArr,
|
||||
stack: 'range',
|
||||
symbol: 'none',
|
||||
lineStyle: {width: 0},
|
||||
emphasis: {disabled: true},
|
||||
},
|
||||
{
|
||||
name: 'Range',
|
||||
type: 'line',
|
||||
data: rangeArr,
|
||||
stack: 'range',
|
||||
symbol: 'none',
|
||||
lineStyle: {width: 0},
|
||||
areaStyle: {color: CONFIG.colors.down, opacity: 0.6},
|
||||
z: 2,
|
||||
},
|
||||
{
|
||||
name: 'Close',
|
||||
type: 'line',
|
||||
data: closeArr,
|
||||
symbol: 'none',
|
||||
lineStyle: {color: CONFIG.colors.up, width: CONFIG.linewidth.closeLine},
|
||||
z: 3,
|
||||
},
|
||||
]
|
||||
|
||||
return buildBaseOption(dates, series, makeTooltipFormatter(dataMap, dates))
|
||||
}
|
||||
|
||||
// Minimal OHLC（竖线 + 左/右短横）：信息等价于K线但形态简洁
|
||||
function buildOHLCMinimalOption(dataMap) {
|
||||
const dates = Object.keys(dataMap).sort()
|
||||
const ohlcData = dates.map((d, i) => [i, ...dataMap[d]])
|
||||
|
||||
// 自定义渲染：竖线=高低区间；左短横=开盘；右短横=收盘；颜色=涨跌
|
||||
function renderOHLCMinimal(params, api) {
|
||||
let idx = api.value(0)
|
||||
let open = api.value(1)
|
||||
let close = api.value(2)
|
||||
let low = api.value(3)
|
||||
let high = api.value(4)
|
||||
let up = close >= open
|
||||
|
||||
let x = api.coord([idx, 0])[0]
|
||||
let highPoint = api.coord([idx, high])
|
||||
let lowPoint = api.coord([idx, low])
|
||||
let openPoint = api.coord([idx, open])
|
||||
let closePoint = api.coord([idx, close])
|
||||
|
||||
let band = api.size([1, 0])[0]
|
||||
let tick = Math.max(CONFIG.tick.min, Math.min(CONFIG.tick.max, band * CONFIG.tick.scale))
|
||||
let color = up ? CONFIG.colors.up : CONFIG.colors.down
|
||||
|
||||
return {
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
type: 'line',
|
||||
shape: {x1: x, y1: highPoint[1], x2: x, y2: lowPoint[1]},
|
||||
style: {stroke: color, lineWidth: CONFIG.linewidth.stem, opacity: 0.9},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
shape: {x1: x - tick, y1: openPoint[1], x2: x, y2: openPoint[1]},
|
||||
style: {stroke: color, lineWidth: CONFIG.linewidth.openTick, opacity: 0.95},
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
shape: {x1: x, y1: closePoint[1], x2: x + tick, y2: closePoint[1]},
|
||||
style: {stroke: color, lineWidth: CONFIG.linewidth.closeTick, opacity: 0.95},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'ohlc',
|
||||
type: 'custom',
|
||||
renderItem: renderOHLCMinimal,
|
||||
encode: {x: 0, y: [1, 2, 3, 4]},
|
||||
data: ohlcData,
|
||||
z: 10,
|
||||
},
|
||||
]
|
||||
|
||||
return buildBaseOption(dates, series, makeTooltipFormatter(dataMap, dates))
|
||||
}
|
||||
|
||||
(function () {
|
||||
const amis = amisRequire('amis/embed')
|
||||
const amisJson = {
|
||||
type: 'page',
|
||||
title: 'Strategy',
|
||||
body: Object.keys(data)
|
||||
.map(key => candleChart(key, data[key])),
|
||||
body: {
|
||||
type: 'tabs',
|
||||
tabsMode: 'vertical',
|
||||
tabs: [
|
||||
{
|
||||
title: 'Charts',
|
||||
// 在一个 Tab 中展示两张图，便于同屏对比
|
||||
body: [
|
||||
{
|
||||
type: 'chart',
|
||||
height: 500,
|
||||
config: buildRangeCloseOption(data),
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
height: 500,
|
||||
config: buildOHLCMinimalOption(data),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
// `dates` 已直接在图表配置中使用，这里无需通过 amis data 传递
|
||||
amis.embed('#root', amisJson, {}, {theme: 'antd'})
|
||||
})()
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user