<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Candlestick Chart Example</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 用于显示图表的容器 -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));
// 模拟 K 线图数据
var data = [
[2320.26, 2320.26, 2287.3, 2362.94],
[2300, 2291.3, 2288.26, 2308.38],
[2295.35, 2346.5, 2295.35, 2345.92],
[2347.22, 2358.98, 2337.35, 2363.8],
[2360.75, 2382.48, 2347.89, 2383.76],
// ... more data points
];
// 配置项
var option = {
xAxis: {
type: 'category',
data: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
axisLabel: {
rotate: 45,
textStyle: {
fontSize: 12
}
}
},
yAxis: {
type: 'value'
},
series: [{
type: 'candlestick',
data: data,
itemStyle: {
color: '#ef232a', // 阳线颜色
color0: '#14b143', // 阴线颜色
borderColor: '#ef232a', // 阳线边框颜色
borderColor0: '#14b143' // 阴线边框颜色
}
}]
};
// 使用配置项设置图表
myChart.setOption(option);
</script>
</body>
</html>
在这个例子中，type: 'candlestick' 表示这是一个 K线图。data 属性包含了 K线图的数据，每个数据项是一个包含四个值的数组，分别代表开盘价、收盘价、最低价、最高价。itemStyle 可以用来配置阳线和阴线的颜色，以及边框颜色。
需要注意的是，实际的 K线图数据可能包含更多的属性和配置，具体的配置会根据实际需求进行调整。这个示例只是演示了基本的配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5428/ECharts