首先,安装了 vue2-highchart,可以通过this.$refs.highchart获取到highchart对象,从而调用它的方法,一切看似很顺利,直到我画了一个可缩放时间轴的直线图:


当我把配置文件拷过来的时候,发现右上角的按钮(重置缩放比例)为英文,于是马上翻api,发现需要设置全局属性lang:

然而在vue的各个地方放这段代码都不起作用:

最后放弃vue2-highchart这个组件,因为实在不知道在哪个地方设置……
在网上找了一个在vue中使用highcharts的简单教程,类似这种的:
https://blog.csdn.net/hsany330/article/details/71746534
然后发现可以setOptions起作用了,但是拿不到chart对象了,也就是不能使用highchart的方法了……
最后再api上面看到了这个:

没错,就是它了,在vue-highchart组件中加了这段:

最后在使用组件的时候通过这样:

就ok了。暂时还是很愉快的。
网友评论