一、概述

Highcharts 是一个制作图表的纯 Javascript 类库，主要特性如下：

• 兼容性：兼容当今所有的浏览器，包括 iPhone、IE 和火狐等等；

• 对个人用户完全免费；

• 纯 JS，无 BS；

• 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼状图、散布图；

• 跨语言：不管是 PHP、Asp.net 还是 Java 都可以使用，它只需要三个文件：一个是 Highcharts 的核心文件 highcharts.js，还有 a canvas emulator for IE 和 Jquery 类库或者 MooTools 类库；

• 提示功能：鼠标移动到图表的某一点上有提示信息；

• 放大功能：选中图表部分放大，近距离观察图表；

• 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

• 时间轴：可以精确到毫秒；

Highcharts演示：https://www.highcharts.com.cn/demo/highcharts

二、安装Highcharts

官方文档：https://www.highcharts.com.cn/docs/highcharts-vue

安装模块

npm install highcharts
npm install highcharts-vue

注意：官方文档，只写了highcharts-vue。实际情况下，还需要安装highcharts，用来导入一些依赖模块。

注册

局部注册

若仅用于特定组件，请使用局部注册方法。首先，您应该从组件文件中的 Highcharts-Vue 包中导入 Chart 组件对象：

import {Chart} from 'highcharts-vue'

然后，您需要在 Vue 实例配置中注册它，即在 components 部分中

{
    components: {
        highcharts: Chart
    }
}

配置

如果您已经完成上述任务之一（导入和注册组件），它允许您在应用程序中使用 Highcharts-Vue 组件，只需要添加  元素，而且必须通过它的 :options 参数传递图表配置对象

"chartOptions">

例如：

new Vue({
    data() {
        return {
            chartOptions: {
                series: [{
                    data: [1, 2, 3] // sample data
                }]
            }
        }
    }
})

三、使用Highcharts

折线图

基础折线图：https://www.highcharts.com.cn/demo/highcharts/line-basic

点击编辑源代码，复制下图红色部分代码

到vue文件中即可。

test.vue

打开页面，效果如下：

如果需要去除右下角的水印，以及右上角的打印以及下载功能。添加

credits: {
  enabled: false
},
exporting: { enabled:false },

test.vue完整代码如下：

刷新页面，效果如下：

旭日图

注意：旭日图需要加载sunburst.js，因此需要在vue中，导入一下。

test.vue

效果图如下：