如何使用 ECharts 绘制 K 线图

在金融数据可视化领域，K 线图（又称蜡烛图）是展示股票、期货等价格走势的核心工具。它通过矩形实体和上下影线直观呈现开盘价、收盘价、最高价和最低价，帮助投资者快速捕捉市场趋势。本文将结合 ECharts 的官方文档和实战案例，详细讲解如何从零开始构建一个专业的 K 线图。

一、K 线图的核心要素

K 线图由四个关键数据点构成：

开盘价（Open）：交易时段开始时的价格
收盘价（Close）：交易时段结束时的价格
最高价（High）：交易时段内的最高价格
最低价（Low）：交易时段内的最低价格

在 ECharts 中，每个 K 线数据点以数组形式表示：[open, close, low, high]。例如，[100, 120, 95, 125] 表示开盘价 100、收盘价 120、最低价 95、最高价 125 的 K 线。

二、基础 K 线图实现步骤

1. 引入 ECharts 库

通过 CDN 或本地文件引入 ECharts：

html 复制代码

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

2. 创建 DOM 容器

在 HTML 中定义一个用于渲染图表的容器：

html 复制代码

<div id="kline-chart" style="width: 800px; height: 600px;"></div>

3. 初始化 ECharts 实例

通过 JavaScript 初始化图表并绑定容器：

javascript 复制代码

const chart = echarts.init(document.getElementById('kline-chart'));

4. 配置 K 线图选项

核心配置项包括坐标轴、数据系列和样式：

javascript 复制代码

const option = {
  xAxis: {
    type: 'category',
    data: ['2024-01-01', '2024-01-02', '2024-01-03'], // 日期数据
    scale: true, // 自动缩放
    boundaryGap: false // 坐标轴两端不留白
  },
  yAxis: {
    type: 'value',
    scale: true // 自动缩放
  },
  series: [{
    type: 'candlestick', // 指定为 K 线图
    data: [
      [100, 120, 95, 125], // 示例数据
      [120, 110, 105, 122],
      [110, 115, 108, 118]
    ],
    itemStyle: {
      color: '#ec0000',    // 下跌颜色（红色）
      color0: '#00da3c',   // 上涨颜色（绿色）
      borderColor: '#8A0000', // 下跌边框色
      borderColor0: '#008F28' // 上涨边框色
    }
  }]
};

5. 渲染图表

将配置项应用到图表实例：

javascript 复制代码

chart.setOption(option);

三、进阶功能实现

1. 数据动态加载

通过 AJAX 或 WebSocket 实时获取数据，并更新图表：

javascript 复制代码

// 模拟异步数据加载
setTimeout(() => {
  const newData = [
    [115, 120, 112, 122],
    [120, 118, 115, 125]
  ];
  chart.setOption({
    series: [{
      data: [...option.series[0].data, ...newData]
    }]
  });
}, 2000);

2. 添加数据缩放（DataZoom）

支持用户通过滑块缩放查看不同时间范围的数据：

javascript 复制代码

option.dataZoom = [
  {
    type: 'inside', // 内置型缩放
    start: 0,       // 初始起始位置（百分比）
    end: 50         // 初始结束位置（百分比）
  },
  {
    type: 'slider', // 滑块型缩放
    bottom: 10,    // 距离底部距离
    start: 0,
    end: 50
  }
];

3. 添加技术指标（如 MA 均线）

通过额外系列叠加均线数据：

javascript 复制代码

// 计算 5 日均线
function calculateMA(data, days) {
  const result = [];
  for (let i = days - 1; i < data.length; i++) {
    let sum = 0;
    for (let j = 0; j < days; j++) {
      sum += data[i - j][1]; // 使用收盘价计算
    }
    result.push(sum / days);
  }
  return result;
}

const ma5 = calculateMA(option.series[0].data, 5);
option.series.push({
  type: 'line',
  name: 'MA5',
  data: Array(4).fill(null).concat(ma5), // 前 4 天无数据
  lineStyle: {
    color: '#FFA500', // 橙色
    width: 2
  }
});

4. 自定义提示框（Tooltip）

优化悬浮提示框的显示内容：

javascript 复制代码

option.tooltip = {
  trigger: 'axis',
  axisPointer: {
    type: 'cross' // 显示十字准星
  },
  formatter: function (params) {
    const klineData = params[0].data;
    return `
      <div>日期: ${params[0].axisValue}</div>
      <div>开盘: ${klineData[0]}</div>
      <div>收盘: ${klineData[1]}</div>
      <div>最低: ${klineData[2]}</div>
      <div>最高: ${klineData[3]}</div>
    `;
  }
};

四、完整示例代码

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts K 线图示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
  <div id="kline-chart" style="width: 800px; height: 600px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('kline-chart'));
    
    // 示例数据
    const klineData = [
      [100, 120, 95, 125],
      [120, 110, 105, 122],
      [110, 115, 108, 118],
      [115, 120, 112, 122],
      [120, 118, 115, 125],
      [118, 125, 117, 128],
      [125, 130, 122, 132]
    ];
    
    // 计算 MA5 均线
    function calculateMA(data, days) {
      const result = [];
      for (let i = days - 1; i < data.length; i++) {
        let sum = 0;
        for (let j = 0; j < days; j++) {
          sum += data[i - j][1];
        }
        result.push(sum / days);
      }
      return result;
    }
    
    const ma5 = calculateMA(klineData, 5);
    
    const option = {
      title: {
        text: '股票价格 K 线图',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        formatter: function (params) {
          const klineData = params[0].data;
          return `
            <div>日期: ${params[0].axisValue}</div>
            <div>开盘: ${klineData[0]}</div>
            <div>收盘: ${klineData[1]}</div>
            <div>最低: ${klineData[2]}</div>
            <div>最高: ${klineData[3]}</div>
          `;
        }
      },
      xAxis: {
        type: 'category',
        data: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'],
        scale: true,
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        scale: true
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 50
        },
        {
          type: 'slider',
          bottom: 10,
          start: 0,
          end: 50
        }
      ],
      series: [
        {
          type: 'candlestick',
          name: 'K 线',
          data: klineData,
          itemStyle: {
            color: '#ec0000',
            color0: '#00da3c',
            borderColor: '#8A0000',
            borderColor0: '#008F28'
          }
        },
        {
          type: 'line',
          name: 'MA5',
          data: Array(4).fill(null).concat(ma5),
          lineStyle: {
            color: '#FFA500',
            width: 2
          }
        }
      ]
    };
    
    chart.setOption(option);
  </script>
</body>
</html>

五、总结

通过 ECharts 绘制 K 线图的核心步骤包括：

准备数据并格式化为 [open, close, low, high] 数组
配置 xAxis 和 yAxis 作为坐标轴
使用 type: 'candlestick' 定义 K 线图系列
通过 itemStyle 自定义涨跌颜色
添加 dataZoom 实现缩放功能
通过额外系列叠加技术指标（如均线）

ECharts 的灵活配置和丰富交互功能，使得开发者能够快速构建出满足专业需求的金融图表。无论是静态展示还是动态数据更新，ECharts 都能提供流畅的用户体验。