echarts 根据曲线图绘制k线图
时间: 2023-07-05 07:15:14 浏览: 123
ECharts 是一个非常流行的 JavaScript 图表库,可以用来绘制各种类型的图表,包括 K 线图。下面是一个简单的示例,使用 ECharts 绘制 K 线图,数据是从曲线图转换而来:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts K 线图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px;"></div>
<script type="text/javascript">
// 计算 K 线图数据
var data = [10, 15, 20, 25, 20, 15, 10];
var kdata = [];
for (var i = 0; i < data.length; i += 2) {
var open = data[i];
var close = data[i + 1];
var high = Math.max(data[i], data[i + 1]);
var low = Math.min(data[i], data[i + 1]);
kdata.push([open, close, low, high]);
}
// 绘制 K 线图
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
type: 'category',
data: ['T1', 'T2', 'T3']
},
yAxis: {
type: 'value'
},
series: [{
type: 'candlestick',
data: kdata
}]
};
myChart.setOption(option);
</script>
</body>
</html>
```
以上代码将绘制一个包含开盘价、收盘价、最高价和最低价的 K 线图,并使用 "T1" 到 "T3" 作为 X 轴标签。你可以根据自己的需求修改数据和参数。
阅读全文