Vueでhighchartsを用いた柱状図

リファレンスhttp://blog.jianshukeji.com/2017/09/use-highcharts-with-vue/
目次
1、Vueプロジェクトでhighchartsをダウンロードする
2、簡単なパッケージ一つのComponents
3、呼び出しコンポーネント
4、結果図
1、Vueプロジェクトでhighchartsをダウンロードする
npm install highcharts

ダウンロードしたら

2、簡単なパッケージ一つのComponents
HighchartsComponent.vue

  import Highcharts from 'highcharts/highstock'
  import HighchartsMore from 'highcharts/highcharts-more'
  import HighchartsDrilldown from 'highcharts/modules/drilldown'
  import Highcharts3D from 'highcharts/highcharts-3d'
  //       （  ）                   。
  //      colorAxis          http://cdn.hcharts.cn/highcharts/modules/heatmap.js 。
  import HeatMap from 'highcharts/modules/heatmap'
  import Exporting from 'highcharts/modules/exporting'
  import TreeMap from 'highcharts/modules/treemap'
  HighchartsMore(Highcharts)
  HighchartsDrilldown(Highcharts)
  Highcharts3D(Highcharts)
  HeatMap(Highcharts)
  Exporting(Highcharts)
  TreeMap(Highcharts)
  export default {
    props: ['defOptions', 'styles'],
    name: 'highcharts',
    data () {
      return {
        chart: null
      }
    },
    mounted () {
      this.initChart()
    },
    watch: {
      //        defOptions          
      defOptions: function (val, oldVal) {
        this.initChart()
      }
    },
    methods: {
      initChart () {
        //       style    
        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.defOptions)
      }
    }
  }

3、呼び出しコンポーネント

    import HighchartsContainer from '../../common/HighchartsComponent.vue'
    export default {
      components: {
        HighchartsContainer
      },
      data () {
        return {
          sty: {
            width: 1200,
            height: 400
          },
          options: {
            title: {
              text: '     ',
              x: -20 // center
            },
            chart: {
              type: 'column'
            },
            xAxis: {
              categories: ['00:00~01:00', '01:00~02:00', '02:00~03:00', '03:00~04:00', '04:00~05:00', '05:00~06:00',
                '06:00~07:00', '07:00~08:00', '08:00~09:00', '09:00~10:00', '10:00~11:00',
                '11:00~12:00', '12:00~13:00', '13:00~14:00', '14:00~15:00', '15:00~16:00',
                '16:00~17:00', '17:00~18:00', '18:00~19:00', '19:00~20:00', '20:00~21:00',
                '21:00~22:00', '22:00~23:00', '23:00~24:00'
              ]
            },
            yAxis: {
              title: {
                text: '    '
              },
              //    
              plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
              }]
            },
            tooltip: {
              valueSuffix: ' ' //         
            },
            legend: {
              enabled: false //      
            },
            credits: {
              enabled: false //       
            },
            series: [{
              name: '    ', 
              data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,
                7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
          }
        }
      }
    }

 
4、結果図