K线图高级特性完全指南 - 组合与技术指标

📋 概述

K线图高级特性 包括均线（MA）、成交量组合、MACD等技术指标，是金融行情分析的专业工具。这些特性能够全面展示价格趋势、成交量变化和技术信号。

核心价值

均线系统：展示不同周期的平均价格趋势
成交量组合：价格和成交量联动分析
技术指标：MACD、KDJ等专业分析工具
标记系统：标注买卖点、除权除息

🎯 核心概念

1. K线+均线组合

javascript

option = {
  series: [
    {
      type: 'candlestick',
      data: klineData // [open, close, low, high]
    },
    {
      type: 'line',
      data: calculateMA(5, klineData), // 5日均线
      name: 'MA5'
    },
    {
      type: 'line',
      data: calculateMA(10, klineData), // 10日均线
      name: 'MA10'
    }
  ]
};

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;
}

2. K线+成交量组合

javascript

option = {
  grid: [
    { left: '10%', right: '8%', height: '50%' }, // K线区域
    { left: '10%', right: '8%', top: '63%', height: '20%' } // 成交量区域
  ],
  
  xAxis: [
    {
      type: 'category',
      data: dates,
      gridIndex: 0
    },
    {
      type: 'category',
      data: dates,
      gridIndex: 1
    }
  ],
  
  yAxis: [
    { gridIndex: 0, scale: true }, // K线Y轴
    { gridIndex: 1 } // 成交量Y轴
  ],
  
  series: [
    {
      type: 'candlestick',
      data: klineData,
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    {
      type: 'bar',
      data: volumes,
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};

🔧 详细配置项

完整K线+均线+成交量配置

javascript

// 计算均线
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(parseFloat((sum / dayCount).toFixed(2)));
  }
  return result;
}

const dates = ['2023-01-03', '2023-01-04', '2023-01-05', /* ... */];
const klineData = [
  [2320.26, 2320.26, 2287.3, 2362.94], // [open, close, low, high]
  [2300, 2291.3, 2288.26, 2308.38],
  // ... 更多数据
];
const volumes = [1000000, 1200000, 800000, /* ... */];

option = {
  title: {
    text: '股票技术分析',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    formatter: function(params) {
      const kline = params[0];
      const [open, close, low, high] = kline.data;
      return `${kline.name}<br/>
              开盘: ${open}<br/>
              收盘: ${close}<br/>
              最低: ${low}<br/>
              最高: ${high}<br/>
              涨跌: ${(close - open).toFixed(2)} (${((close - open) / open * 100).toFixed(2)}%)`;
    }
  },
  
  legend: {
    data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
    top: 30
  },
  
  grid: [
    {
      left: '10%',
      right: '8%',
      height: '50%'
    },
    {
      left: '10%',
      right: '8%',
      top: '63%',
      height: '20%'
    }
  ],
  
  xAxis: [
    {
      type: 'category',
      data: dates,
      scale: true,
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: 'dataMin',
      max: 'dataMax',
      gridIndex: 0
    },
    {
      type: 'category',
      data: dates,
      gridIndex: 1,
      axisLabel: { show: false }
    }
  ],
  
  yAxis: [
    {
      scale: true,
      splitArea: {
        show: true
      },
      gridIndex: 0
    },
    {
      splitNumber: 2,
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      gridIndex: 1
    }
  ],
  
  dataZoom: [
    {
      type: 'inside',
      start: 50,
      end: 100
    },
    {
      show: true,
      type: 'slider',
      top: '85%',
      start: 50,
      end: 100
    }
  ],
  
  series: [
    {
      name: '日K',
      type: 'candlestick',
      data: klineData,
      itemStyle: {
        color: '#ef232a', // 涨（红色）
        color0: '#14b143', // 跌（绿色）
        borderColor: '#ef232a',
        borderColor0: '#14b143'
      },
      markPoint: {
        data: [
          { type: 'max', name: '最高' },
          { type: 'min', name: '最低' }
        ]
      },
      markLine: {
        symbol: ['none', 'none'],
        data: [
          { type: 'average', name: '均价' }
        ]
      }
    },
    {
      name: 'MA5',
      type: 'line',
      data: calculateMA(5, klineData),
      smooth: true,
      lineStyle: {
        opacity: 0.5
      }
    },
    {
      name: 'MA10',
      type: 'line',
      data: calculateMA(10, klineData),
      smooth: true,
      lineStyle: {
        opacity: 0.5
      }
    },
    {
      name: 'MA20',
      type: 'line',
      data: calculateMA(20, klineData),
      smooth: true,
      lineStyle: {
        opacity: 0.5
      }
    },
    {
      name: 'MA30',
      type: 'line',
      data: calculateMA(30, klineData),
      smooth: true,
      lineStyle: {
        opacity: 0.5
      }
    },
    {
      name: '成交量',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: volumes,
      itemStyle: {
        color: function(params) {
          const index = params.dataIndex;
          if (index === 0) return '#ef232a';
          const prevClose = klineData[index - 1][1];
          const currClose = klineData[index][1];
          return currClose >= prevClose ? '#ef232a' : '#14b143';
        }
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

💡 实战案例

案例1：完整技术分析图表

javascript

// 包含K线、均线、成交量、MACD
option = {
  title: {
    text: '上证指数技术分析',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  
  legend: {
    data: ['日K', 'MA5', 'MA10', 'MA20', '成交量', 'MACD', 'DIF', 'DEA'],
    top: 30
  },
  
  grid: [
    { left: '10%', right: '8%', height: '40%' }, // K线
    { left: '10%', right: '8%', top: '53%', height: '15%' }, // 成交量
    { left: '10%', right: '8%', top: '72%', height: '15%' } // MACD
  ],
  
  xAxis: [
    { type: 'category', data: dates, gridIndex: 0 },
    { type: 'category', data: dates, gridIndex: 1 },
    { type: 'category', data: dates, gridIndex: 2 }
  ],
  
  yAxis: [
    { scale: true, gridIndex: 0 },
    { gridIndex: 1 },
    { gridIndex: 2 }
  ],
  
  series: [
    // K线和均线
    {
      name: '日K',
      type: 'candlestick',
      data: klineData,
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    {
      name: 'MA5',
      type: 'line',
      data: calculateMA(5, klineData),
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    {
      name: 'MA10',
      type: 'line',
      data: calculateMA(10, klineData),
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    
    // 成交量
    {
      name: '成交量',
      type: 'bar',
      data: volumes,
      xAxisIndex: 1,
      yAxisIndex: 1
    },
    
    // MACD
    {
      name: 'MACD',
      type: 'bar',
      data: macdData,
      xAxisIndex: 2,
      yAxisIndex: 2,
      itemStyle: {
        color: function(params) {
          return params.value > 0 ? '#ef232a' : '#14b143';
        }
      }
    },
    {
      name: 'DIF',
      type: 'line',
      data: difData,
      xAxisIndex: 2,
      yAxisIndex: 2
    },
    {
      name: 'DEA',
      type: 'line',
      data: deaData,
      xAxisIndex: 2,
      yAxisIndex: 2
    }
  ]
};

⚠️ 常见问题

问题1：均线计算错误

解决：

javascript

// 确保跳过前N-1个数据点
function calculateMA(dayCount, data) {
  const result = [];
  for (let i = 0; i < data.length; i++) {
    if (i < dayCount - 1) {
      result.push('-'); // 或者null
      continue;
    }
    // 计算平均值
  }
  return result;
}

问题2：坐标轴对齐问题

解决：

javascript

// 所有grid使用相同的left和right
grid: [
  { left: '10%', right: '8%', ... },
  { left: '10%', right: '8%', ... },
  { left: '10%', right: '8%', ... }
]

🎯 最佳实践

1. 颜色规范

javascript

// 中国股市：红涨绿跌
itemStyle: {
  color: '#ef232a',     // 涨（红）
  color0: '#14b143'     // 跌（绿）
}

// 国际股市：绿涨红跌
itemStyle: {
  color: '#14b143',     // 涨（绿）
  color0: '#ef232a'     // 跌（红）
}

2. 性能优化

javascript

// 大数据量时
series: [{
  type: 'candlestick',
  data: hugeData,
  progressive: 5000,
  large: true
}]

📊 性能指标

配置	100天	1000天	建议
K线+5均线	15ms	80ms	无限制
+成交量	20ms	100ms	启用progressive
+MACD	25ms	120ms	大数据优化

🔗 相关链接

K线图基础.md)
dataZoom缩放

💎 总结

高级K线图核心价值：

✅ 均线系统展示趋势
✅ 成交量验证价格变化
✅ MACD等技术指标辅助决策
✅ 多图表联动专业分析

掌握高级K线图，让金融分析更专业！📈

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"
      }
    }
  ]
}

K线图高级特性完全指南 - 组合与技术指标 ​

📋 概述 ​

核心价值 ​

🎯 核心概念 ​

1. K线+均线组合 ​

2. K线+成交量组合 ​

🔧 详细配置项 ​

完整K线+均线+成交量配置 ​

💡 实战案例 ​

案例1：完整技术分析图表 ​

⚠️ 常见问题 ​

问题1：均线计算错误 ​

问题2：坐标轴对齐问题 ​

🎯 最佳实践 ​

1. 颜色规范 ​

2. 性能优化 ​

📊 性能指标 ​

🔗 相关链接 ​

💎 总结 ​

K线图高级特性完全指南 - 组合与技术指标

📋 概述

核心价值

🎯 核心概念

1. K线+均线组合

2. K线+成交量组合

🔧 详细配置项

完整K线+均线+成交量配置

💡 实战案例

案例1：完整技术分析图表

⚠️ 常见问题

问题1：均线计算错误

问题2：坐标轴对齐问题

🎯 最佳实践

1. 颜色规范

2. 性能优化

📊 性能指标

🔗 相关链接

💎 总结