example vuechart

vuecomponent

<script>

import Highcharts from 'highcharts'
import jquery from 'jquery'

export default {
    data () {
      return {
         data: [
    ['DE.SH', 728],
    ['DE.BE', 710],
    ['DE.MV', 963],
    ['DE.HB', 541],
    ['DE.HH', 622],
    ['DE.RP', 866],
    ['DE.SL', 398],
    ['DE.BY', 785],
    ['DE.SN', 223],
    ['DE.ST', 605],
    ['DE.NW', 237],
    ['DE.BW', 157],
    ['DE.HE', 134],
    ['DE.NI', 136],
    ['DE.TH', 704],
    ['DE.', 361]
]
      }
  },
  props: ['mapId'],
  mounted () {
      jquery(function () {
    var myChart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

  }
}

</script>

<style lang="scss">
</style>

<template>
<!--<div class="Map" style="border: 1px solid black; width: 700px; float: left"></div>-->
<div id="container" style="width:300px%; height:400px;">
</div>


</template>