众所周知，从事证券行业的前端开发人员会经常开发股票、期权和期货的K线图(蜡烛图)、柱状图、分时图等。下面给大家介绍两个开源的JS图表库：ECharts和Highcharts，利用它可以根据后台提供的证券交易数据快速开发出漂亮的图表，在移动端和PC端都有很好的适配。

1、ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。(官网：https://www.echartsjs.com/zh/feature.html)

1)安装方式

其他的安装方式，可自行去官网的API查看，这里只介绍npm 安装 ECharts：

npm install echarts --save

2)引入 ECharts：

//ES5var echarts = require('echarts');// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption({ title: { text: '入门示例' }, tooltip: {}, xAxis: {}, yAxis: {}, series: [{}]});

3)K线实例(https://www.echartsjs.com/examples/zh/index.html#chart-type-candlestick)

2、Highcharts(推荐)

Highcharts 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库，包含 Highcharts JS，Highstock JS，Highmaps JS 三大模块，在这里我们只需要重点关注Highstock，Highstock 是基于 Highcharts 创建的专门用于股票图及大数据了时间轴图表，也就是意味着 Highstock 包含 Highcharts 所有功能，只是在 Highcharts 的基础上增加了新的功能，另外 Highstock 支持 K线图、蜡烛图等股票金融专用图表。(官网：https://www.highcharts.com.cn/docs/highstock)。

1)安装方式

其他的安装方式，可自行去官网的API查看，这里只介绍npm 安装Highcharts：

npm install highcharts --save

2)加载 Highstock

//ES5var Highcharts = require('highcharts/highstock');//ES6import Highcharts from 'highcharts/highstock';// 创建图表Highcharts.chart('container', {  /*Highcharts 配置*/});

3)官方示例：