ECharts 入门教程 ECharts图表使用之K线图

2024-02-25 开发教程 ECharts 入门教程 匿名 8

在 ECharts series组件的配置过程中,我们使用 Candlestick 来表示我们常说的 K 线图。

对于 K 线图的画法,我们通常会在图中包含四个数据,这四个数据分别是开盘价、最高价、最低价和收盘价,如果您要完成一个完整的 K 线图,那么最好都要围绕这四个数据来实现。

将每日的 K 线图放在同一张纸上,可以得到日 K 线图。

在 ECharts3 中,同时支持 'candlestick' 和 'k'这两种 'series.type'('k' 会被自动转为 'candlestick')。

示例如下:

点击编辑实例 》》

K 线图中“涨”和“跌”的颜色是如何表示的:

K 线图中的颜色表示会根据不同的国家或者地区而含有不一样的定义,在大陆、台湾、日本、韩国等,K 线图颜色定义为“红涨绿跌”或者“红涨蓝跌”;而在西方国家、香港、新加坡等,则表示为“绿涨红跌”。

K线图也不一定要用红蓝、红绿来表示涨跌,也可以是“有色/无色”等表示方法。

默认配置项,采用的是“红涨蓝跌”。如果想更改这个颜色配置,在这些配置项中更改即可:

  • series-candlestick.itemStyle.normal.color:阳线填充色(即“涨”)
  • series-candlestick.itemStyle.normal.color0:阴线填充色(即“跌”)
  • series-candlestick.itemStyle.normal.borderColor:阳线边框色(即“涨”)
  • series-candlestick.itemStyle.normal.borderColor0:阴线边框色(即“跌”)