如何在vue项目中使用highstock（拖动缩放图表）

需求
解决方法
写在最后

需求

我们万恶的产品今天提了一个需求，在后台系统中的图表区，一定要加一个拖动缩放，同时图标也会进行相应区域的改变，原型如图：如何在vue项目中使用highstock（拖动缩放图表）
当我看到这个的时候我脑子只想着一句话，写代码的时候要多想想产品想让我们干什么，“产品想让我死”。
但是，离职是不可能离职的，这辈子不可能离职的，所以，只能google.com啦，但是找来找去也没找到比较靠谱的，主要是当前需求也少，那么没办法，只能自己来啦。

解决方法

写这篇文档的时间是19/1/15，hcharts版本已更新到7.0.1版本，我们直接Npm安装即可，在安装后的包中你可以看到highstock这样一个文件，nice，这个文件就是用来解决如上问题的，那么我们如何使用呢？
简单：

	import HighStock from 'highcharts/highstock'

当然，如果你不是在vue项目中使用highstock，那么下面这个地址可以帮你解决如何使用的问题（这是一个官方案例）：
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/navigator/inverted/
注意：
1：引入HighStock即可，不用再引入HighCharts包。（引入也不会报错）
2：调用方法十分重要。

//(---看这里看这里---)此处"container"为html内的自定义容器ID  this.option为你所需要渲染的数据，
//可以从官网上随便copy一个option作为demo
  	HighStock.stockChart("container", this.option)

此时效果：
如何在vue项目中使用highstock（拖动缩放图表）
但是可以看到，左上方有个很让人头疼的zoom，右上方有一个日历。这是highstock自带默认属性，此时，接下来的任务就是查阅文档了：在option内设置如下属性可以重置：

          rangeSelector : {
            buttons : [],
            selected : 1,
            inputEnabled : false,
          },

此时效果如下图：
如何在vue项目中使用highstock（拖动缩放图表）
当然这个效果离我的产品以及你的产品想要的效果可能还相去甚远，下面就要由小老弟你自己来继续啦！

写在最后

到这只是解决了引入以及调用的部分，但还要自定义图表内容，以及坐标之类的琐碎需求，highstock其实还有很多很多API，我本人也在尝试以及调试过程中。如果这篇文档给您带来了帮助，我将十分欣慰，感谢阅读。
最后附上highstock官网地址：https://www.hcharts.cn/demo/highstock
以及API文档地址：https://api.hcharts.cn/highstock