在vue中使用highcharts简单甘特图

1、先进行安装npm install -S vue-highcharts

2、在main.js中import

import HighchartsVue from 'highcharts-vue'

Vue.use(HighchartsVue)

3、在相应的vue页面中

（1）

import Highcharts from 'highcharts';

import xrange from 'highcharts/modules/xrange'

xrange(Highcharts)

不同的组件可能报错不同，类似missingModuleFor: xrange，import后使用

（2）<div id="chart1"></div>

（3）在methods中写方法

 init () {

      setTimeout(function () {

        Highcharts.chart('chart1', {

          chart: {

            type: 'xrange'

          },

          title: {

            text: '简易甘特图'

          },

          xAxis: {

            type: 'datetime',

            dateTimeLabelFormats: {

              week: '%Y/%m/%d'

            }

          },

          yAxis: {

            title: {

              text: ''

            },

            categories: ['制作产品原型', '开发', '测试'],

            reversed: true

          },

          tooltip: {

            dateTimeLabelFormats: {

              day: '%Y/%m/%d'

            }

          },

          series: [{

            name: '项目1',

            // pointPadding: 0,

            // groupPadding: 0,

            borderColor: 'gray',

            pointWidth: 20,

            data: [

              {

                x: Date.UTC(2014, 10, 21),

                x2: Date.UTC(2014, 11, 2),

                y: 0,

                partialFill: 0.25

              }, {

                x: Date.UTC(2014, 11, 2),

                x2: Date.UTC(2014, 11, 5),

                y: 1

              }, {

                x: Date.UTC(2014, 11, 8),

                x2: Date.UTC(2014, 11, 9),

                y: 2

              },

              {

                x: Date.UTC(2014, 11, 9),

                x2: Date.UTC(2014, 11, 19),

                y: 1

              }, {

                x: Date.UTC(2014, 11, 10),

                x2: Date.UTC(2014, 11, 23),

                y: 2

              }],

            dataLabels: {

              enabled: true

            }

          }]

        });

      })

    },

*没用setTimeout前报错error13表示找不到容器，可能在页面加载函数调用的时候容器还没有渲染

（4）在mounted中调用函数， this.init();