JSRUN 用代码说话

ECharts图表使用之K线图

编辑教程

ECharts图表使用之K线图

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

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

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

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

示例如下:

jsrun

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

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

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

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

  • series-candlestick.itemStyle.normal.color:阳线填充色(即“涨”)
  • series-candlestick.itemStyle.normal.color0:阴线填充色(即“跌”)
  • series-candlestick.itemStyle.normal.borderColor:阳线边框色(即“涨”)
  • series-candlestick.itemStyle.normal.borderColor0:阴线边框色(即“跌”)
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟