在 Vue 中使用 Highcharts

实例代码及运行过程

请通过这个链接下载实例代码包：https://data.jianshukeji.com/upload/20170907/yvwmwm.zip

下载后解压并进入实例代码目录，执行 npm install 安装相关依赖，并通过 npm run dev 查看运行效果，如下图所示：

代码说明

实例代码是通过 vue-cli 生成的 hello-vue 项目，这个过程是：

npm install vue-cli -g
vue init webpack-simple hello-vue

安装并引入 Highcharts 相关资源

npm install highcharts --save

对应的代码引入是

import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);

需要注意的是 Highcharts 其他资源除了引入文件外，还需要额外的执行 HighchartsMore(Highcharts) 等操作。

引入 Highcharts 之后，就是调用初始化函数生成图表了，示例代码：

// 代码出自实例代码中 /src/App.vue
moreChart() {
    var options = this.getMoreOptions(this.type);

    if (this.chart) {
        this.chart.destroy();
    };
    // 初始化 Highcharts 图表
    this.chart = new Highcharts.Chart('highcharts-more', options);
}

简单的封装一个 Components

Components 是 Vue 中非常重要的特性，这里我们也可以简单的封装一个 Highcharts 图表组件，代码如下：

<template>
  <div class="highcharts-container"></div>
</template>

<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

export default {
  props: ['options', 'styles'],
  name: 'highcharts',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      console.log(this.$el);
      this.$el.style.width = (this.styles.width || 800) + 'px';
      this.$el.style.height = (this.styles.height || 400) + 'px';
      this.chart = new Highcharts.Chart(this.$el, this.options);
    }
  }
}
</script>

<style lang="scss">
  .highcharts-container {
    width: 800px;
    height: 400px;
  }
</style>

代码实现逻辑很简单，通过传入配置和简单的样式到组件，由组件生成图表。

组件调用：

<highcharts-component :options="options" :styles="styles" ref="simpleChart"></highcharts-component>

在外部，可以通过 ref 来获取组件里的图表对象并进行图表操作

this.$refs.simpleChart.chart.series[0].update({
  color: '#000'
});

Highcharts 第三方插件的使用

由于很多 Highcharts 插件并没有发布到 Npm，所以很多用户不知道如何使用，下面我们就 export-csv 这个插件来简单说明如何在 Vue 中使用

首先是将插件文件下载并保存到项目的某个目录，这里放置在和 libs 目录

接下来就是引入这个插件，引入方式同普通的 npm 包，只不过是指定具体的文件路径

import exportCSV from './libs/export-csv.js';
exportCSV(Highcharts);

需要注意的是 export-csv 这个插件本身是支持 import 直接引入的，也就是它的主要代码是用下面的代码片段包裹：

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory;
  } else {
    factory(Highcharts);
  }
})(function (Highcharts) {
  // 插件代码逻辑
});

上面代码片段的含义是使改文件支持以 CommonJS 包的形式引入，即支持 import 语法。

如果你在使用其他插件是没有对应的代码片段，可以将其代码放置在上面代码片段内部即可。