97 lines
3.0 KiB
HTML
97 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>ECharts KDJ指标示例</title>
|
|||
|
|
<!-- 引入ECharts库 -->
|
|||
|
|
<script src="./echarts.min.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- 创建用于绘制图表的DOM元素 -->
|
|||
|
|
<div id="main" style="width: 100vw;height:600px;"></div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
// 初始化ECharts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
|
|||
|
|
// 示例数据（最高价、最低价、收盘价等）
|
|||
|
|
var stockData = [
|
|||
|
|
{date: '2023-10-01', high: 10.5, low: 9.8, close: 10.0},
|
|||
|
|
{date: '2023-10-02', high: 10.8, low: 9.9, close: 10.4},
|
|||
|
|
// ...（更多数据）
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 计算KDJ值的函数（这里以简单示例，实际计算可能更复杂）
|
|||
|
|
function calculateKDJ(stockData, N=9, M1=3) {
|
|||
|
|
var K = [], D = [], J = [];
|
|||
|
|
var RSV = [], VAR1 = [], prevK = 0, prevD = 50; // 初始化prevK和prevD
|
|||
|
|
|
|||
|
|
stockData.forEach(function(item, index) {
|
|||
|
|
var LLV = Math.min(...stockData.slice(Math.max(0, index - N + 1), index + 1).map(d => d.low));
|
|||
|
|
var HHV = Math.max(...stockData.slice(Math.max(0, index - N + 1), index + 1).map(d => d.high));
|
|||
|
|
|
|||
|
|
RSV.push((item.close - LLV) / (HHV - LLV) * 100);
|
|||
|
|
|
|||
|
|
var Kvalue = (2 / 3) * prevK + (1 / 3) * RSV[RSV.length - 1];
|
|||
|
|
K.push(Kvalue.toFixed(2));
|
|||
|
|
|
|||
|
|
var Dvalue = (2 / 3) * prevD + (1 / 3) * Kvalue;
|
|||
|
|
D.push(Dvalue.toFixed(2));
|
|||
|
|
|
|||
|
|
var Jvalue = 3 * Kvalue - 2 * Dvalue;
|
|||
|
|
J.push(Jvalue.toFixed(2));
|
|||
|
|
|
|||
|
|
prevK = Kvalue;
|
|||
|
|
prevD = Dvalue;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return { K: K, D: D, J: J, dates: stockData.map(d => d.date) };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算KDJ值
|
|||
|
|
var kdjData = calculateKDJ(stockData);
|
|||
|
|
|
|||
|
|
// 配置ECharts
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: 'KDJ指标示例'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: kdjData.dates
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'K值',
|
|||
|
|
type: 'line',
|
|||
|
|
data: kdjData.K,
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle: { color: '#ff3333' }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'D值',
|
|||
|
|
type: 'line',
|
|||
|
|
data: kdjData.D,
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle: { color: '#33ff33' }
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'J值',
|
|||
|
|
type: 'line',
|
|||
|
|
data: kdjData.J,
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle: { color: '#3333ff' }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 绘制图表
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|