260 lines
7.1 KiB
HTML
260 lines
7.1 KiB
HTML
<html lang='zh'>
|
|
<head>
|
|
<meta charset='utf-8'/>
|
|
<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 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;
|
|
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 th:inline="javascript" type='text/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)
|
|
|
|
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)',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
|
|
const data = /*[[${charts}]]*/ [];
|
|
|
|
(function () {
|
|
const amis = amisRequire('amis/embed')
|
|
const amisJson = {
|
|
type: 'page',
|
|
title: 'Strategy',
|
|
body: {
|
|
type: 'tabs',
|
|
tabsMode: 'vertical',
|
|
tabs: data.map(item => {
|
|
return {
|
|
title: item?.title,
|
|
body: Object.keys(item?.data ?? {})
|
|
.map(key => candleChart(key, item.data[key])),
|
|
}
|
|
}),
|
|
},
|
|
}
|
|
amis.embed('#root', amisJson, {}, {theme: 'antd'})
|
|
})()
|
|
</script>
|
|
</html>
|