<template>

  <div :class="className" :style="{height:height,width:width}" />

</template>

<script>

import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme

//import resize from './mixins/resize'

const animationDuration = 6000

export default {

  //mixins: [resize],

  props: {

    className: {

      type: String,

      default: 'chart'

    },

    width: {

      type: String,

      default: '100%'

    },

    height: {

      type: String,

      default: '200px'

    }

  },

  data() {

    return {

      chart: null

    }

  },

  mounted() {

    this.$nextTick(() => {

      this.initChart()

    })

  },

  beforeDestroy() {

    if (!this.chart) {

      return

    }

    this.chart.dispose()

    this.chart = null

  },

  methods: {

    initChart() {

      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({

        tooltip: {

          trigger: 'axis',

          axisPointer: { // 坐标轴指示器，坐标轴触发有效

            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

          }

        },

        grid: {

          top: 30,

          left: '2%',

          right: '1%',

          bottom: 10,

          containLabel: true

        },

        dataset: {

          source: [

            ['product', '2015','2016'],

            ['AC06H', 143.3,60],

            ['AC06L', 83.1,21.4],

            ['AC12N', 386.4 ,35.3],

            ['AC125', 72.4 ,10],

            ['AC13E', 192.4 ,72],

            ['AC13W', 572.4 ,10],

            ['AC18H', 142.4 ,47],

          ]

        },

        xAxis: { type: 'category' },

        yAxis: {},

        series: [{

          type: 'bar',

          itemStyle: {

          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

            { offset: 0, color: '#09c9c5' },

            { offset: 1, color: '#003791' }

            ])

          }

        },{

          type: 'bar',

          itemStyle: {

          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

            { offset: 0, color: '#5eff4d' },

            { offset: 1, color: '#245119' }

          ])

        },

        }]

      })

    }

  }

}

</script>