<template>
  <div class="test">
      <Charts 
        :option = "option"
        :events = "events"
        :events-action = "eventsAction">
        </Charts>
  </div>
</template>

<script>
import components from '../../components/index'
export default {
  data(){
      return {
          option:{
            xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'bar'
            }]
          },
          events:['click']
      }
  },
  components,
  methods:{
      eventsAction(params){
          console.log(params);
          this.$alert(params.name+':'+params.value);
      }
  }
}
</script>

<style scoped>
.test{
    width: 50%;
    height: 50%;
    position: relative;
}
</style>