这篇博文主要介绍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单看内容上不是很多,但是和其他进行交互使用,会有非常好的呈现效果。在后续可能会专门对其进行研究。