Vue Highcharts的使用
开发环境
-
已经全局安装 Node.js, NPM
-
Vue, Highcharts 库已经安装在项目中
一、在Vue中使用Highcharts，应该先下载Highcharts
npm install highcharts --save
二、再下载Highcharts Vue，Highcharts Vue 是基于 Vue 框架封装的 Highcharts，可以很方便的在 Vue 开发环境中使用 Highcharts 创建交互性图表。
npm install highcharts-vue
三、注册组件
有两种方法可以将 Highcharts-Vue 添加到项目中
1. 全局注册
若想要在应用程序的任何位置使用本插件，请使用全局注册方法。在您的主应用程序文件中导入 Vue 和 Highcharts-Vue 扩展包
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'接下来，您可以将其注册为 Vue 对象中的插件：
Vue.use(HighchartsVue)2. 局部注册
若仅用于特定组件，请使用局部注册方法。首先，您应该从组件文件中的 Highcharts-Vue 包中导入 Chart 组件对象：
import {Chart} from 'highcharts-vue'然后，您需要在 Vue 实例配置中注册它，即在 components 部分中
{
components: {
highcharts: Chart
}
}注意：如果您想通过 <script> 标签在HTML文档的 <head> 部分引用Highcharts-Vue，您应该使用此包目录下的 dist 目录下的其中一个.js文件。之后， HighchartsVue 对象可以在 window 范围内使用。点击查看示例：JSFiddle示例
三、使用
1. 选项参数
如果您已经完成上述任务之一（导入和注册组件），它允许您在应用程序中使用 Highcharts-Vue 组件，只需要添加 <highcharts> 元素，而且必须通过它的 :options 参数传递图表配置对象
<highcharts :options="chartOptions"></highcharts>
例如：
new Vue({
data() {
return {
chartOptions: {
series: [{
data: [1, 2, 3] // sample data
}]
}
}
}
})
2. 导入 Highcharts 模块
要使用任何 Highcharts 模块，您必须将该模块以及 Highcharts 扩展包本身都导入到您的文件中，并将 Highcharts 参数传递给它来添加该模块，例如(
exportingInit是用来增加下载功能的模块)：
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'
exportingInit(Highcharts)
3. 实现 stockChart 和 mapChart
Highcharts-Vue 扩展包默认使用 chart 的构造函数，所以如果您需要使用 stockChart 或 mapChart ，只需要按照上面导入 Highcharts 模块的方法导入 stock 或 map 模块，并在你的组件元素中使用 :constructor-type 参数：
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'
stockInit(Highcharts) <highcharts :constructor-type="'stockChart'" :options="chartOptions"></highcharts>
注意：图表导出模块使用
如果明明加上了导出excel数据文件的模块，却在右上角的选项中找不到导出XLS等格式的按钮。可能是在main.js中导入模块顺序出现问题。
是要先exportingInit(Highcharts)，再export_data(Highcharts)，前一个是使其有导出功能，后一个是在导出功能里加入新的功能，所以不能颠倒顺序。import HighchartsVue from 'highcharts-vue' import Highcharts from 'highcharts' import exportingInit from 'highcharts/modules/exporting' import offline_exporting from 'highcharts/modules/offline-exporting' import export_data from 'highcharts/modules/export-data.src' exportingInit(Highcharts) export_data(Highcharts) offline_exporting(Highcharts) Vue.use(HighchartsVue)
