ECharts从零开始（六）—— Candlestick & Scatter

这篇博文主要介绍k线图、散点图（scatter）

一、k线图

K线图，全名为Candlestick。一个K线图中包含四个数据，即开盘价、最高价、最低价、收盘价，所有的k线都是围绕这四个数据展开，反映大势的状况和价格信息。

当开盘价低于收盘价时，表明当天是盈利的，称作阳线；当开盘价高于收盘价时，表明当天是亏损的，称作阴线。

在涨和停的颜色分布上，默认为“红涨蓝停”或红涨绿停，可以在itemStyle.color和itemStyle.color0中分别修改涨和停的填充色，还可以在itemStyle.borderColor和borderColor0中修改阳线和阴线的边框色。

• barMaxWidth

barMaxWidth的含义之前介绍过，而在k线图中显得更为重要。k线图常于dataZoom联合起来使用。如果没有设置barMaxWidth，当在放大的过程中，会出现一个问题：

柱形宽度过宽，给用户的体验不是很好

此时加上一个barMaxWidth就可以完美解决这个问题：

• data

在series的data中要注意一点，data的格式为，每4个值为一组，分别为开盘、收盘、最低和最高。

之前在bar中讲过用辅助series做出瀑布图的效果。其实还可以用k线图的形式更方便的做出。
原图：

k线图效果：

只需要在series的data中，将数据改为一个个列表的形式，开盘价、收盘价分别与最大值、最小值对应相等，再修改下tooltip中的内容，就可以完成用k线图实现瀑布图效果。

二、散点图（scatter）

散点（气泡）图，可以用来展现数据的x，y之间的关系。当数据为三维甚至思维时，还可以考虑用散点（气泡）的大小和颜色来表现。

• symbol

scatter最重要的是symbol，即为标记的图形。和其他symbol一样，ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’。

除了上述这些，还可以通过 ‘image://url’ 设置为图片。

• symbolSize & symbolRotate

symbolSize为标记的大小，默认为10。
symbolRotate为标记的旋转角度。

对于三维的数据，通常改变symbolSize来表现。

即第三维度数值大的，圆的大小也更大。

而如果存在第四维度，通常用颜色来表示：

当第四维度的值大于40时为红色，否则为绿色。

• large & largeThreshold

large为是否开启大数据量优化，在数据图形特别多而出现卡顿时候可以开启。
不过在开启后，会不能自定义设置单个数据项的样式。

largeThreshold为开启绘制优化的阈值。若数据量小于这个阈值，则不会开启绘制优化。

k线图和scatter单看内容上不是很多，但是和其他进行交互使用，会有非常好的呈现效果。在后续可能会专门对其进行研究。