echartsk线图
时间: 2023-08-16 15:17:17 浏览: 63
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 来获取它们。