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

<script>
import echarts from 'echarts'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '600px'
    },
    height: {
      type: String,
      default: '350px'
    },
    seriesdata: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    seriesdata: {
      handler(newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        this.chart = echarts.init(document.getElementById(this.id))
        this.chart.clear()
        this.chart.setOption({
          color: [
            '#FF9966', '#99CC99', '#99CCFF', '#66CC00', '#FF99CC',
            '#66CCFF', '#CCCCFF', '#FF9966', '#FF6666', '#CC99CC',
            '#FF9999', '#FFCCCC', '#66CC66', '#66CCCC', '#FFCCCC',
            '#FF7373', '#33CCCC', '#FFB273', '#FF9640', '#39E639',
            '#717DD7', '#35D4A4', '#FF9000', '#408DD2', '#679FD2'
          ],
          tooltip: {
            trigger: 'item',
            formatter(params) {
              return params.data.name + '<br />' + '数量: ' + params.data.value + '<br />' + '金额: ' + params.data.price
            }
          },
          series: [
            {
              name: '订单种类',
              type: 'pie',
              radius: '80%',
              center: ['50%', '50%'],
              labelLine: {
                show: false
              },
              label: {
                show: false
              },
              data: this.seriesdata
            }
          ]
        })
      })
    }
  }
}
</script>
