EChartsK线图ECharts入门教程

看过股市的朋友们对K线图这个图形肯定都不陌生。K线又称“阴阳烛”、“蜡烛线”，是反映价格走势的一种图线，其特色在于一个线段内记录了多项讯息，相当易读易懂且实用有效，广泛用于股票、期货、贵金属、数字货币等行情的技术分析，称为K线分析。

慕课解释

K线图又称蜡烛图，最初起源于日本德川幕府时期，被用于记录米市的行情与价格波动，后被引入股票与证券交易市场，现如今已经在金融交易活动中大范围使用。K线图在形态上很像柱状图与折线图的组合，但每个数据节点能够表达出更多的信息。在股票交易中，k线图通常包含四个维度，即开盘价、收盘价、最高价、最低价的涨跌变化状况，一个典型的k线图如下图所示：

包含三个部分：

K线图在ECharts中通过series.type=k或series.type=candlestick配置，示例：

k线图的series.data项是一个长度为4的数组，按次序分别对应k线图的开盘价、收盘价、最高价、最低价。

K线图通过实体颜色表达数据涨、跌，不同国家或地区对于K线图的颜色定义不一样，可能是红涨绿跌或红涨蓝跌（如台湾、日本、韩国等），可能是绿涨红跌（如西方国家、香港、新加坡等），也可能是有色/无色等表示方法。默认配置项是红涨蓝跌，可通过如下配置项更改：

下例通过itemStyle属性，修改k线图的颜色：

与柱状图、折线图等其他直角坐标图表不同，在一个坐标系中无论存在多少个k线图，默认都会被处理为红涨蓝跌，此时必须通过itemStyle修改阴阳线的色值，详见下一节。

由于k线图的数据项只能通过这种4位数组的格式定义，这会导致k线图与折线图、柱状图、散点图等其他直角坐标图表有些许不同：

当序列上只有一个k线图时，问题不大，但若要在同一坐标系上渲染多个k线图时，则需要对数据做一些额外的处理。比如，假设要展示下述四种蔬果的价格变化：

functionsort(categories){constformat='YYYY-MM-DD';returncategories.sort((d1,d2)=>moment(d1,format)-moment(d2,format));}第三步，有了类目数据之后，还需要整理系列数据的顺序，使得数据与其对应的类目能够一一对应：

functionreschedule(series,categories){returnseries.map(({sku,data})=>{return{name:sku,data:categories.map((cat)=>{constindex=data.findIndex((c)=>c===cat);returnindex>=0data[index].slice(1):null;}),};});}经过上述步骤就可以得到所有类目值及调整后的系列数据，完整代码：

本节主要简述K线图的由来、特性，并结合实例讲述K线图的各类功能特性，包括基础K线图、颜色配置、配置多个K线图。