K线图 (Candlestick Chart)

 前端   小卒子   2024-10-10 14:57   391
  从零开始学习ECharts

ECharts K线图：绘制 K 线图及金融数据展示

K线图是一种常用于金融市场的图表类型，主要用于展示某一时间段内的价格波动。它通过开盘价、收盘价、最高价和最低价来反映价格变化，是技术分析中不可或缺的工具。在本文中，我们将深入了解如何使用 ECharts 绘制 K 线图，并解析其数据结构和相关配置。

一、K线图的基础知识

K线图（Candlestick Chart）通过绘制一系列“K线”来展示价格波动。每根 K 线由实体（蜡烛）和影线组成：

  • 开盘价（Open）：某一时间段开始时的价格。
  • 收盘价（Close）：某一时间段结束时的价格。
  • 最高价（High）：某一时间段内的最高价格。
  • 最低价（Low）：某一时间段内的最低价格。

如果收盘价高于开盘价，则 K 线通常用一种颜色（如绿色）表示上涨；反之则用另一种颜色（如红色）表示下跌。

二、安装 ECharts

在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

三、绘制 K 线图

1. 定义 HTML 结构

首先，定义一个用于展示 K 线图的 <div> 容器：

<div id="candlestickChart" style="width: 800px; height: 400px;"></div>

2. 配置 K 线图的 option

以下是一个 K 线图的基本配置示例：

var candlestickChart = echarts.init(document.getElementById('candlestickChart'));

var data = [
    ['2023-01-01', 820, 932, 901, 934],
    ['2023-01-02', 820, 932, 801, 934],
    ['2023-01-03', 920, 932, 901, 934],
    ['2023-01-04', 820, 932, 701, 934],
    ['2023-01-05', 820, 932, 801, 934],
    ['2023-01-06', 820, 932, 901, 934],
    ['2023-01-07', 820, 932, 801, 934]
];

var candlestickOption = {
    title: {
        text: 'K线图示例',
        left: 'center',
        textStyle: {
            color: '#333',
            fontSize: 20
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            var date = params[0].name;
            var open = params[0].data[1];
            var close = params[0].data[2];
            var low = params[0].data[3];
            var high = params[0].data[4];
            return `${date}<br/>开盘价: ${open}<br/>收盘价: ${close}<br/>最低价: ${low}<br/>最高价: ${high}`;
        }
    },
    xAxis: {
        type: 'category',
        data: data.map(item => item[0]),
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        name: '价格',
        nameLocation: 'middle',
        nameGap: 30
    },
    series: [
        {
            name: 'K线',
            type: 'candlestick',
            data: data.map(item => [item[0], item[1], item[2], item[3], item[4]]),
            itemStyle: {
                color: '#06B800', // 收盘价高于开盘价颜色
                color0: '#FA0000' // 收盘价低于开盘价颜色
            },
            markLine: {
                data: [
                    { type: 'average', name: '平均线' }
                ]
            }
        }
    ]
};

candlestickChart.setOption(candlestickOption);

3. 完整的 HTML 代码示例

以下是完整的 HTML 文件代码，包含 K 线图的创建和渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts K线图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <h1>使用 ECharts 绘制 K线图</h1>
    <div id="candlestickChart" style="width: 800px; height: 400px;"></div>

    <script>
        var candlestickChart = echarts.init(document.getElementById('candlestickChart'));

        var data = [
            ['2023-01-01', 820, 932, 901, 934],
            ['2023-01-02', 820, 932, 801, 934],
            ['2023-01-03', 920, 932, 901, 934],
            ['2023-01-04', 820, 932, 701, 934],
            ['2023-01-05', 820, 932, 801, 934],
            ['2023-01-06', 820, 932, 901, 934],
            ['2023-01-07', 820, 932, 801, 934]
        ];

        var candlestickOption = {
            title: {
                text: 'K线图示例',
                left: 'center',
                textStyle: {
                    color: '#333',
                    fontSize: 20
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var date = params[0].name;
                    var open = params[0].data[1];
                    var close = params[0].data[2];
                    var low = params[0].data[3];
                    var high = params[0].data[4];
                    return `${date}<br/>开盘价: ${open}<br/>收盘价: ${close}<br/>最低价: ${low}<br/>最高价: ${high}`;
                }
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item[0]),
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                name: '价格',
                nameLocation: 'middle',
                nameGap: 30
            },
            series: [
                {
                    name: 'K线',
                    type: 'candlestick',
                    data: data.map(item => [item[0], item[1], item[2], item[3], item[4]]),
                    itemStyle: {
                        color: '#06B800', // 收盘价高于开盘价颜色
                        color0: '#FA0000' // 收盘价低于开盘价颜色
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均线' }
                        ]
                    }
                }
            ]
        };

        candlestickChart.setOption(candlestickOption);
    </script>
</body>
</html>

四、数据结构解析

在 K 线图中，数据的结构通常是一个包含时间、开盘价、收盘价、最低价和最高价的数组。每条 K 线对应一个数组元素，格式如下：

[
    ['日期', 开盘价, 收盘价, 最低价, 最高价],
    ...
]

例如：

['2023-01-01', 820, 932, 901, 934]
  • 日期：对应 K 线的时间轴。
  • 开盘价：时间段开始时的价格。
  • 收盘价：时间段结束时的价格。
  • 最低价：时间段内的最低价格。
  • 最高价：时间段内的最高价格。

五、添加辅助线

您可以通过 markLine 属性为 K 线图添加辅助线，例如平均线。以下是如何在 K 线图中添加一条平均线：

markLine: {
    data: [
        { type: 'average', name: '平均线' }
    ]
}

这会在 K 线图中绘制一条表示价格平均值的水平线。

六、总结

本文详细介绍了如何使用 ECharts 绘制 K 线图，包括数据结构的解析和相关配置的使用。K 线图是金融数据可视化的强大工具，通过它可以有效地分析价格趋势。希望这篇博客能帮助您更好地理解和使用 ECharts 绘制 K 线图！