ECharts 是一个由百度开发的开源 JavaScript
数据可视化库，它提供了丰富的图表类型和交互功能。要绘制 K 线图（K-Line Chart），你可以使用
ECharts 中的「Candlestick Chart」（蜡烛图）类型。
下面是一个使用
ECharts 绘制 K 线图的示例
代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
ECharts K 线图示例</title>
<!-- 引入
ECharts -->
<script src="https://cdn.jsdelivr.net/npm/
echarts/dist/
echarts.min.js"></script>
</head>
<body>
<!-- 创建一个具有指定宽度和高度的 DOM 容器 -->
<div id="chart" style="width: 800px; height: 600px;"></div>
<script>
// 初始化
ECharts 实例
var myChart =
echarts.init(document.getElementById('chart'));
// 构造假数据
var data = [
// [时间, 开盘价, 收盘价, 最低价, 最高价]
['2021-01-01', 100, 120, 80, 130],
['2021-01-02', 110, 115, 90, 120],
// ...
];
// 格式化数据
var formattedData = data.map(function (item) {
return [item[0], item[1], item[2], item[3], item[4]];
});
// 配置图表选项
var option = {
title: {
text: 'K 线图示例'
},
xAxis: {
type: 'category',
data: formattedData.map(function (item) {
return item[0];
})
},
yAxis: {},
series: [{
type: 'candlestick',
data: formattedData
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
你可以将上述
代码保存为一个 HTML 文件并在浏览器中打开，即可看到绘制的 K 线图。要显示实际的
股票数据，你需要替换示例中的假数据为真实的
股票数据，并通过适当的数据源或 API 来获取它们。
扫一扫
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
