<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'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '295px'
    }
  },
  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({
        color:['#91F2DE', '#65E1E3','#32EADC','#38CDDC', '#60A4DF','#91EAFD'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}次',
          backgroundColor: "#FFF",
          color: "#161616",
          textStyle: {
            color: "#161616",
          },
        },
        legend: {
          show:false,
          left: 'center',
          bottom: '10',
          data: ['0 ~ 5分', '5 ~ 10分', '10 ~ 20分', '20 ~ 30分', '30 ~ 60分','60分以上']
        },

        graphic: [{
          type: "text",
          left: "center",
          top: "136",
          style: {
            text: "人均停留(分钟)",
            textAlign: "center",
            fill: "#666666",
            fontSize: 14,
            }
        },{
          type: "text",
          left: "center",
          top: "160",
          style: {
            text:"47",
            textAlign: "center",
            fill: "#65E3C3",
            fontSize: 18,
            fontWeight:'bold',
            }
        }],
        series: [
          {
            name: '人均停留时长统计',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
              borderRadius: 0,
              borderColor: '#ffffff',
              borderWidth: 2
            },
            data: [
              { value: 31, name: '0 ~ 5分' },
              { value: 79, name: '5 ~ 10分' },
              { value: 23, name: '10 ~ 20分' },
              { value: 12, name: '20 ~ 30分' },
              { value: 2, name: '30 ~ 60分' },
              { value: 6, name: '60分以上' }
            ],
            // animationEasing: 'cubicInOut',
            // animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>
