192 lines
5.3 KiB
HTML
192 lines
5.3 KiB
HTML
<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>
|