K线图 (金融行情)

ECharts K线图完全指南:股票/期货/外汇技术分析

📖 概述

K线图(Candlestick Chart)又称蜡烛图,是金融市场技术分析的核心图表,通过开盘价、收盘价、最高价、最低价四个数据点展示价格波动。

核心特点:

• ✅ OHLC 四值展示(开高低收)
• ✅ 技术指标叠加(MA/MACD/KDJ)
• ✅ 成交量配合显示
• ✅ 实时行情推送
• ✅ 缩放与平移交互

---

🔍 核心概念

1. 基础K线图

option = {
  title: { text: '股票K线图' },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  xAxis: {
    type: 'category',
    data: dates,
    scale: true
  },
  yAxis: {
    scale: true,
    splitArea: { show: true }
  },
  dataZoom: [
    { type: 'inside', start: 50, end: 100 },
    { type: 'slider', start: 50, end: 100 }
  ],
  series: [{
    type: 'candlestick',
    data: ohlcData,  // [[open, close, low, high], ...]
    itemStyle: {
      color: '#ef232a',        // 阳线颜色(涨)
      color0: '#14b143',       // 阴线颜色(跌)
      borderColor: '#ef232a',
      borderColor0: '#14b143'
    }
  }]
};

数据格式: [开盘价, 收盘价, 最低价, 最高价]

---

2. 均线叠加

series: [
  {
    type: 'candlestick',
    data: ohlcData
  },
  {
    name: 'MA5',
    type: 'line',
    data: calculateMA(5, ohlcData),
    smooth: true,
    lineStyle: { opacity: 0.5 }
  },
  {
    name: 'MA10',
    type: 'line',
    data: calculateMA(10, ohlcData),
    smooth: true,
    lineStyle: { opacity: 0.5 }
  },
  {
    name: 'MA20',
    type: 'line',
    data: calculateMA(20, ohlcData),
    smooth: true,
    lineStyle: { opacity: 0.5 }
  }
]

// 计算均线
function calculateMA(dayCount, data) {
  const result = [];
  for (let i = 0; i < data.length; i++) {
    if (i < dayCount - 1) {
      result.push('-');
      continue;
    }
    let sum = 0;
    for (let j = 0; j < dayCount; j++) {
      sum += data[i - j][1];  // 收盘价
    }
    result.push((sum / dayCount).toFixed(2));
  }
  return result;
}

---

3. 成交量配合

option = {
  grid: [
    { left: '10%', right: '8%', height: '50%' },   // K线区域
    { left: '10%', right: '8%', top: '63%', height: '20%' }  // 成交量区域
  ],
  xAxis: [
    {
      type: 'category',
      data: dates,
      scale: true,
      gridIndex: 0
    },
    {
      type: 'category',
      data: dates,
      gridIndex: 1,
      axisLabel: { show: false }
    }
  ],
  yAxis: [
    {
      scale: true,
      gridIndex: 0,
      splitArea: { show: true }
    },
    {
      scale: true,
      gridIndex: 1,
      splitNumber: 2,
      axisLabel: { show: false }
    }
  ],
  series: [
    {
      name: 'K线',
      type: 'candlestick',
      data: ohlcData,
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    {
      name: '成交量',
      type: 'bar',
      data: volumes,
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle: {
        color: params => {
          const ohlc = ohlcData[params.dataIndex];
          return ohlc[1] > ohlc[0] ? '#ef232a' : '#14b143';
        }
      }
    }
  ]
};

---

💡 使用场景

场景 1: 完整的股票分析系统

const stockChart = {
  title: { text: 'AAPL 股票分析', left: 0 },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' },
    formatter: params => {
      const ohlc = params[0].data;
      return `
        <strong>${params[0].name}</strong><br/>
        开盘: ${ohlc[0]}<br/>
        收盘: ${ohlc[1]}<br/>
        最低: ${ohlc[2]}<br/>
        最高: ${ohlc[3]}<br/>
        涨跌: ${((ohlc[1] - ohlc[0]) / ohlc[0] * 100).toFixed(2)}%
      `;
    }
  },
  legend: {
    data: ['K线', 'MA5', 'MA10', 'MA20'],
    top: 30
  },
  // ... 其他配置同上
};

---

场景 2: 实时行情推送

class RealtimeKLine {
  constructor(dom) {
    this.chart = echarts.init(dom);
    this.data = [];
    this.volumes = [];
    this.dates = [];
    this.init();
  }
  
  init() {
    this.chart.setOption({
      // ... K线配置
      series: [{
        type: 'candlestick',
        data: this.data
      }]
    });
    
    // 模拟实时数据
    setInterval(() => this.updatePrice(), 1000);
  }
  
  updatePrice() {
    const lastClose = this.data.length > 0 
      ? this.data[this.data.length - 1][1] 
      : 100;
    
    const open = lastClose;
    const close = open + (Math.random() - 0.5) * 2;
    const high = Math.max(open, close) + Math.random();
    const low = Math.min(open, close) - Math.random();
    
    this.data.push([open, close, low, high]);
    this.volumes.push(Math.floor(Math.random() * 10000));
    this.dates.push(new Date().toLocaleTimeString());
    
    // 保持最近100条数据
    if (this.data.length > 100) {
      this.data.shift();
      this.volumes.shift();
      this.dates.shift();
    }
    
    this.chart.setOption({
      xAxis: [{ data: this.dates }, { data: this.dates }],
      series: [
        { data: this.data },
        { data: this.volumes }
      ]
    });
  }
}

---

🔧 配置详解

数据格式

// OHLC 格式
data: [
  [开盘价, 收盘价, 最低价, 最高价],
  [100, 105, 98, 108],
  [105, 102, 100, 107]
]

// 对象格式
data: [
  {
    value: [100, 105, 98, 108],
    name: '2024-01-01'
  }
]

---

样式配置

itemStyle: {
  color: '#ef232a',        // 阳线(涨)填充色
  color0: '#14b143',       // 阴线(跌)填充色
  borderColor: '#ef232a',  // 阳线边框色
  borderColor0: '#14b143', // 阴线边框色
  borderWidth: 1
}

国际惯例:

• 中国/日本: 红涨绿跌
• 欧美: 绿涨红跌

---

⚠️ 常见问题

Q1: 如何切换红涨绿跌/绿涨红跌?

// 中国风格(红涨绿跌)
itemStyle: {
  color: '#ef232a',   // 红色
  color0: '#14b143'   // 绿色
}

// 国际风格(绿涨红跌)
itemStyle: {
  color: '#14b143',   // 绿色
  color0: '#ef232a'   // 红色
}

---

Q2: 如何添加MACD指标?

// 需要计算 MACD
// DIF = EMA(12) - EMA(26)
// DEA = EMA(DIF, 9)
// MACD = (DIF - DEA) * 2

series: [{
  name: 'MACD',
  type: 'bar',
  data: macdData,
  xAxisIndex: 2,
  yAxisIndex: 2
}]

---

🎯 最佳实践

1. 性能优化

// 大数据量时
series: [{
  type: 'candlestick',
  data: largeData,
  progressive: 1000,
  progressiveThreshold: 5000
}]

---

2. 响应式设计

window.addEventListener('resize', () => {
  chart.resize();
});

---

📊 性能指标

数据量	渲染时间	FPS	建议
< 500	< 20ms	60	无限制
500-2000	20-50ms	55	正常
2000-5000	50-100ms	45	开启渐进式
> 5000	> 100ms	< 30	考虑采样

---

🔗 相关链接

• 折线图.md)
• 柱状图.md)
• 官方示例

---

最后更新: 2026-04-23
难度等级: ⭐⭐⭐⭐
预计阅读时间: 20 分钟

K线图效果

{
  "title": {
    "text": "股票价格走势",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis",
    "axisPointer": {
      "type": "cross"
    }
  },
  "xAxis": {
    "type": "category",
    "data": [
      "周一",
      "周二",
      "周三",
      "周四",
      "周五",
      "周六",
      "周日"
    ],
    "boundaryGap": false
  },
  "yAxis": {
    "type": "value",
    "scale": true
  },
  "series": [
    {
      "type": "candlestick",
      "data": [
        [
          20,
          30,
          10,
          35
        ],
        [
          30,
          25,
          20,
          32
        ],
        [
          25,
          35,
          22,
          38
        ],
        [
          35,
          40,
          32,
          42
        ],
        [
          40,
          38,
          35,
          45
        ],
        [
          38,
          42,
          36,
          48
        ],
        [
          42,
          45,
          40,
          50
        ]
      ],
      "itemStyle": {
        "color": "#ef232a",
        "color0": "#14b143",
        "borderColor": "#ef232a",
        "borderColor0": "#14b143"
      }
    }
  ]
}