vue使用Echarts绘制自己股票K线图，包含数据接口

安装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'