零云®lyCharts v26

Appearance

Candlestick K线图 ​

K线图（蜡烛图）用于展示金融时间序列的开盘价、收盘价、最低价、最高价四个维度，常用于股票、期货、外汇等行情场景。lyCharts 的 K线图以兼容 ECharts 接口为目标，原生实现，内置均线、成交量、标记点/标记线、十字准星以及底部缩放滑块。

平台差异说明 ​

App（vue）App（nvue）H5小程序uni-app-x
√√√√√

数据格式 ​

K线 series 的每条数据是一个四元数组，顺序为 [open, close, lowest, highest]（开盘、收盘、最低、最高），与 ECharts 一致。

js
// [开盘价, 收盘价, 最低价, 最高价]
const values = [
  [2320.26, 2302.6, 2287.3, 2362.94],
  [2300, 2291.3, 2288.26, 2308.38],
  [2295.35, 2346.5, 2295.35, 2346.92]
]

涨跌颜色由 itemStyle 控制：color / borderColor 为阳线（收盘 ≥ 开盘）颜色，color0 / borderColor0 为阴线（收盘 < 开盘）颜色。

基础 K线图 ​

在 series 中添加一个 type: 'candlestick' 的对象即可绘制 K线图。xAxis.data 提供日期分类，series.data 提供四元价格数组。

vue
<template>
  <view>
    <ly-charts-candlestick :option="option" width="700rpx" height="420px" />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const option = ref({
  title: {
    text: '上证指数',
    left: 0
  },
  xAxis: {
    type: 'category',
    data: ['2013/3/18', '2013/3/19', '2013/3/20', '2013/3/21', '2013/3/22', '2013/3/25'],
    boundaryGap: false
  },
  yAxis: {
    scale: true,
    splitArea: { show: true }
  },
  series: [
    {
      name: '日K',
      type: 'candlestick',
      data: [
        [2267.29, 2240.02, 2239.21, 2276.05],
        [2244.26, 2257.43, 2232.02, 2261.31],
        [2257.74, 2317.37, 2257.42, 2317.86],
        [2318.21, 2324.24, 2311.6, 2330.81],
        [2321.4, 2328.28, 2314.97, 2332],
        [2334.74, 2326.72, 2319.91, 2344.89]
      ],
      itemStyle: {
        color: '#ec0000',
        color0: '#00da3c',
        borderColor: '#8A0000',
        borderColor0: '#008F28'
      }
    }
  ]
})
</script>

叠加均线（MA） ​

均线是 K线图常见的辅助线，通过额外添加 type: 'line' 的 series 实现。均线数据需自行计算（对收盘价取 N 日移动平均），不足 N 日的位置用 '-' 占位。

vue
<template>
  <view>
    <ly-charts-candlestick :option="option" width="700rpx" height="460px" />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const values = [
  [2320.26, 2302.6, 2287.3, 2362.94],
  [2300, 2291.3, 2288.26, 2308.38],
  [2295.35, 2346.5, 2295.35, 2346.92],
  [2347.22, 2358.98, 2337.35, 2363.8],
  [2360.75, 2382.48, 2347.89, 2383.76],
  [2383.43, 2385.42, 2371.23, 2391.82]
]

// 计算 N 日均线（对收盘价 values[i][1] 取移动平均）
function calculateMA (dayCount, list) {
  const result = []
  for (let i = 0; i < list.length; i++) {
    if (i < dayCount - 1) {
      result.push('-')
      continue
    }
    let sum = 0
    for (let j = 0; j < dayCount; j++) {
      sum += list[i - j][1]
    }
    result.push(Number((sum / dayCount).toFixed(2)))
  }
  return result
}

const option = ref({
  legend: {
    data: ['日K', 'MA5', 'MA10'],
    top: 20
  },
  xAxis: {
    type: 'category',
    data: ['1/24', '1/25', '1/28', '1/29', '1/30', '1/31'],
    boundaryGap: false
  },
  yAxis: {
    scale: true,
    splitArea: { show: true }
  },
  series: [
    {
      name: '日K',
      type: 'candlestick',
      data: values,
      itemStyle: {
        color: '#ec0000',
        color0: '#00da3c',
        borderColor: '#8A0000',
        borderColor0: '#008F28'
      }
    },
    {
      name: 'MA5',
      type: 'line',
      data: calculateMA(5, values),
      smooth: true,
      lineStyle: { color: '#f59e0b', opacity: 0.85 }
    },
    {
      name: 'MA10',
      type: 'line',
      data: calculateMA(10, values),
      smooth: true,
      lineStyle: { color: '#3b82f6', opacity: 0.85 }
    }
  ]
})
</script>

叠加成交量 ​

成交量通过额外的 type: 'bar' series 绘制。为让成交量单独占据下方区域并使用独立刻度，可配置第二个 yAxis，并用 axisLabel.formatter 格式化数值（如以“万/亿”显示）。

vue
<script setup>
import { ref } from 'vue'

function formatVolume (value) {
  if (value >= 100000000) return `${(value / 100000000).toFixed(2)}亿`
  if (value >= 10000) return `${(value / 10000).toFixed(2)}万`
  return `${value}`
}

const option = ref({
  legend: { data: ['日K', '成交量'], top: 20 },
  xAxis: {
    type: 'category',
    data: ['1/24', '1/25', '1/28', '1/29', '1/30'],
    boundaryGap: false
  },
  yAxis: [
    { scale: true, splitArea: { show: true } },
    { scale: true, axisLabel: { formatter: formatVolume } }
  ],
  series: [
    {
      name: '日K',
      type: 'candlestick',
      data: [
        [2320.26, 2302.6, 2287.3, 2362.94],
        [2300, 2291.3, 2288.26, 2308.38],
        [2295.35, 2346.5, 2295.35, 2346.92],
        [2347.22, 2358.98, 2337.35, 2363.8],
        [2360.75, 2382.48, 2347.89, 2383.76]
      ]
    },
    {
      name: '成交量',
      type: 'bar',
      data: [2260000, 1950000, 2380000, 2010000, 2450000]
    }
  ]
})
</script>

标记点与标记线 ​

K线 series 支持 markPoint 与 markLine，用于标注最高/最低/均值等关键点位，用法与 ECharts 一致。type 可取 max / min / average，valueDim 指定基于哪个维度（highest / lowest / close / open）。

js
series: [
  {
    name: '日K',
    type: 'candlestick',
    data: values,
    markPoint: {
      data: [
        { name: 'highest value', type: 'max', valueDim: 'highest' },
        { name: 'lowest value', type: 'min', valueDim: 'lowest' },
        // 也可用 coord 指定绝对坐标
        { name: 'Mark', coord: ['2013/5/20', 2286.33], value: 2286.33, itemStyle: { color: 'rgb(41,60,85)' } }
      ]
    },
    markLine: {
      data: [
        { name: 'min line on close', type: 'min', valueDim: 'close' },
        { name: 'max line on close', type: 'max', valueDim: 'close' }
      ]
    }
  }
]

区间缩放（dataZoom） ​

通过 dataZoom 开启缩放。type: 'slider' 会在图表底部渲染可拖拽的缩放滑块，start / end 为初始显示区间的百分比。拖动图表区域可查看十字准星，拖动底部滑块可缩放可视区间。

js
const option = ref({
  // ...
  dataZoom: [
    { type: 'inside', start: 45, end: 100 },
    { show: true, type: 'slider', start: 45, end: 100 }
  ]
})

组合示例（完整行情图） ​

将以上能力组合，即可得到一张接近专业行情软件的 K线图：K线 + MA5/10/20/30 均线 + 成交量 + 标记点/标记线 + 缩放滑块。完整可运行代码见组件示例项目中的 pages/componentsD/chartsCandlestick/chartsCandlestick 页面。

Props ​

参数说明类型默认值可选值
option图表配置项，格式与 ECharts 相似Object--
width图表容器宽度String | Number100%-
height图表容器高度String | Number420-

Events ​

事件名说明回调参数
click点击 K线/数据点时触发{ componentType, seriesType, seriesName, name, value, event }
tooltipShow拖动十字准星命中某根 K线时触发，用于自定义行情卡片{ name, seriesType, open, close, lowest, highest, change, changePercent, volume }
zoom缩放区间变化时触发{ start, end }

Option 属性 ​

属性名说明类型默认值
title标题配置Object-
title.text标题文本String-
title.left标题水平位置（0 / 'left' / 'right' / 百分比）String | Numbercenter
tooltip提示框配置Object-
tooltip.trigger触发类型Stringaxis
tooltip.axisPointer.type指示器类型，K线常用 cross（十字准星）String-
legend图例配置Object-
legend.data图例数据Array-
legend.top图例距顶部距离Number | String-
grid绘图网格边距Object-
xAxisx轴配置Object-
xAxis.typex轴类型，K线固定为 categoryStringcategory
xAxis.datax轴分类数据（日期/时间）Array-
xAxis.boundaryGap是否在两端留白Booleantrue
xAxis.min / xAxis.max显示范围，可取 'dataMin' / 'dataMax'String | Number-
yAxisy轴配置，可为对象或数组（第二项常用于成交量）Object | Array-
yAxis.scale是否按数据范围缩放（不强制从 0 开始）Booleanfalse
yAxis.splitArea.show是否显示分隔区域背景Booleanfalse
yAxis.axisLabel.formatter轴标签格式化函数Function-
dataZoom缩放配置数组Array-
dataZoom[].type缩放类型，inside / sliderString-
dataZoom[].show是否显示滑块Boolean-
dataZoom[].start / end初始显示区间百分比Number0 / 100
series系列列表Array-
series[].type系列类型，candlestick / line / barString-
series[].name系列名称（与 legend.data 对应）String-
series[].data系列数据（K线为 [open, close, lowest, highest] 数组）Array-
series[].itemStyle.color阳线填充色（收盘 ≥ 开盘）String#ec0000
series[].itemStyle.color0阴线填充色（收盘 < 开盘）String#00da3c
series[].itemStyle.borderColor阳线边框色String#8A0000
series[].itemStyle.borderColor0阴线边框色String#008F28
series[].lineStyle均线线条样式（line 类型）Object-
series[].smooth均线是否平滑Booleanfalse
series[].markPoint.data标记点数据（支持 type: max/min/average + valueDim 或 coord 绝对坐标）Array-
series[].markLine.data标记线数据Array-

方法 ​

方法名说明参数
setOption设置图表配置项option, notMerge
resize重新调整图表大小-