目录
1 引入Echarts
1.1 安装
1.2 引入
1.3 基本使用
2 基础K线图
2.1 基础k线图
2.2 基础日k图
3 总结
1 引入Echarts
1.1 安装
使用如下命令通过 npm 安装 ECharts
npm install echarts --save
注：本文安装Echarts版本为：“echarts”: “5.2.1”
1.2 引入
安装完成以后，可以将echarts全部引入，这样一来，我们可以在该页面使用echarts所有组件；引入代码如下：
import * as echarts from "echarts";
1.3 基本使用
vue+Echarts基本使用请见：
在Vue项目中引入 ECharts
2 基础K线图
2.1 基础k线图
Ecahrts自带K线图，将series的type设置为candlestick即可；
基础k线图横坐标为交易日，纵坐标为每股价格，其次就是K线图每天的情况，包含当前价格，前日收盘价格，开盘价格，当日最高价，当日最低价，我们只需要将对应的数据传入到对应的参数当中，即可得到我们想要的k线图。
如图为基本k线图示例：
上图代码如下：
2.2 基础日k图
金融证券机构的K线图数据较为全面，K线图包含日K图、周K图、日K图，年K图，国内红色代表涨，绿色代表跌，最近两个月股市一片绿，原因在于全球经济下行以及国内被某个大国收割。
今天我们主要介绍日K图，从中能推演出周K、月K图，只是传入数据不同而已。
日k图除了红绿柱状图，还包含均线，同行均线数据可由日K数据直接计算获得，不过作为前端工程师，建议均线数据直接从后台获取，前端计算回有些许计算误差。
此外，日K图还有其他属性可以进行调整，如的护镖防止位置出现对应数据、K线柱状图颜色，宽度等，掌握基本的日K图配置以后，其他的K线图万变不离其中。
我们直接上图以及代码示例：
上图代码如下：
注：部分Echarts相关属性已在前面章节介绍过，这里不做重复介绍。以上代码可实现日K线基本图形。
3 总结
K线图主要是要理解多种图型的各个数据所代表的含义，主要由折线图以及日k图两种组成，这里我们介绍了基本日K图，下期我们介绍更为全面的日K图和分时图相互转换，来实现基本应用。
到此这篇关于Vue+Echarts实现基本K线图的绘制的文章就介绍到这了,更多相关Vue Echarts绘制K线图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
Vue Echarts实现多功能图表绘制的示例详解
vue引用echarts饼图不显示图例的解决
Vue ECharts简易实现雷达图
Vue使用Echarts画柱状图详解
Vue导入Echarts实现折线图
Vue ECharts饼图实现方法详解