Vue Highcharts的使用

开发环境

已经全局安装 Node.js, NPM
Vue, Highcharts 库已经安装在项目中

通过 npm 安装 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)