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> |