安装Echarts
首先下载安装Echarts,可以通过 npm install echarts --save命令下载。在这个文件中引入echarts,创建echarts的挂载实例,在mounted中初始化echarts实例,进行相关的K线图绘制就可以,这里不详细介绍。
Echarts官方K线示例
Echarts官方K线示例.
官方示例效果已经很完善了,但实际使用过程中发现官方示例并不能很好的满足我的需求,主要一下原因。
1,在数据量很大的时候,计算多日均线数据的时候浏览器的性能开销过大,很容易出现卡顿,特别是一个页面有多张K线图时,在部分比较老旧的浏览器中情况尤为明显。
2,数据量不足以计算均线时会出现null值,比如30日均线的前30条数据都是null值,数据缺失影响展示效果。
3,tooltip的显示,相比open,close,max,min,我更喜欢开盘,收盘,最高,最低这种显示方式。
针对上述原因改进后的K线示例
使用数据集的方式渲染减小前端的运算压力,把均线计算放到服务端。
option的主要结构
// An highlighted block
option: {
title: {
left: 'left',
text: '',
textStyle: {
color: '#909399',
}
},
type: 'stock',
backgroundColor: '#303133',
legend: {
data: ['日K', '5日均线', '10日均线', '20日均线', '30日均线'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
}
},
dataset: {
// 直接把数据放进source就渲染完了
source: null
},
// dataZoom是设置最下方的滑动条型数据区域缩放组件,不需要可以删除
dataZoom: [{
type: 'inside',
start: 80,
end: 100
}, {
type: 'slider'