Vue2.0中使用Highcharts

一、使用流程：

1.npm安装：

npm install highcharts --save
npm install highcharts-no-data-to-display --save

2.导入依赖：

import HighCharts from 'highcharts'
import Highcharts3d from 'highcharts/highcharts-3d'
import HighchartsNoData from 'highcharts-no-data-to-display';

3.调用：

HighchartsNoData(HighCharts);
Highcharts3d(HighCharts);

二、简单示例（3D饼图动态加载数据）

1.创建子组件：

<template>
  <div class="chart-box">
    <slot></slot>
    <div :id="id" :option="option" height="100%"></div>
  </div>
</template>

<script>
import HighCharts from 'highcharts'
import Highcharts3d from 'highcharts/highcharts-3d'
import HighchartsNoData from 'highcharts-no-data-to-display';
HighchartsNoData(HighCharts);
Highcharts3d(HighCharts);
export default {
  name: 'pieChart',
  props: {
    id: {
      type: String
    },
    option: {
      type: Object
    }
  },
  computed: {
    chartOption () {
      let options = {
        chart: {
          type: 'pie',
          backgroundColor: 'transparent',
          options3d: {
            enabled: true,
            alpha: 55,
            beta: 0
          }
        },
        credits: {
          enabled: false // 禁用版权信息
        },
        title: {
          text: ''
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            innerSize: '55%',
            depth: 45,
            dataLabels: {
              enabled: false
            }
          }
        }
      };
      return Object.assign(options, this.option)
    }
  },
  watch: {
    /* @watch 监听传入的option数据 */
    'option': {
      handler (newVal, oldVal) {
        this.initChart();
      },
      deep: true
    }
  },
  methods: {
    /* @method 初始化图表 */
    initChart () {
      this.chart = HighCharts.chart(this.id, this.chartOption);
      this.chart.reflow();
    },
    /* @method 图表重绘 */
    chartReflow () {
      window.onresize = () => {
        this.chart.reflow();
      };
    }
  },
  mounted: function () {
    if (this.option.series && this.option.series.length > 0) {
      this.initChart();
    }
    this.chartReflow();
  }
}
</script>

2.父组件调用：

<pie-chart :id="'annualTask'" :option="annualOption">
    <span class="chart-box-left">已完成 {{ annualData.frate || 0 }}%</span>
    <span class="chart-box-right">未完成 {{ annualData.nrate || 0 }}%</span>
</pie-chart>