86 lines
2.3 KiB
HTML
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> |