k-line/MACD.html
2024-12-11 09:52:47 +08:00

86 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<title>MACD in Echarts</title>
<!-- 引入Echarts库 -->
<script src="/echarts.min.js"></script>
<style>
#id{
color: rgb(38, 224, 233);
}
</style>
</head>
<body>
<!-- 为Echarts图表准备一个DOM容器 -->
<div id="macdChart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化Echarts实例
var myChart = echarts.init(document.getElementById('macdChart'));
// 模拟的MACD数据
var data = {
"dates": ["2024 - 01 - 01", "2024 - 01 - 02", "2024 - 01 - 03", "2024 - 01 - 04", "2024 - 01 - 05"],
"macd": [0.5, 0.3, - 0.1, - 0.3, 0.2],
"signal": [0.4, 0.35, - 0.05, - 0.25, 0.15],
"histogram": [0.1, - 0.05, - 0.05, - 0.05, 0.05]
};
var option = {
title: {
text: 'MACD Chart'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: data.dates,
alignTicks: true
},
yAxis: {
type: 'value'
},
series: [
{
name: 'MACD',
type: 'line',
data: data.macd,
itemStyle: {
normal: {
color: 'rgb(38, 224, 233)'
}
}
},
{
name: 'Signal Line',
type: 'line',
data: data.signal,
itemStyle: {
normal: {
color: 'Orange'
}
}
},
{
name: 'Histogram',
type: 'bar',
data: data.histogram,
itemStyle: {
normal: {
color: function (params) {
return params.value < 0? 'green' :'red';
}
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>