<template>
  <div>
    <Echarts :height="height" :option="myOptions" @click="handleEvent"></Echarts>
  </div>
</template>

<script>
import { merge } from 'lodash';
import propsDefault from './propsDefault';
export default {
  components: {
    Echarts: () => import('../../echarts')
  },
  name: 'ZxPie',
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    yAxisData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    height: {
      type: [Number, String],
      default: '400px'
    }
  },
  data() {
    return {};
  },
  created() {
    console.log(this.option);
  },
  computed: {
    myOptions() {
      let option = merge({}, propsDefault, this.option);
      if (this.yAxisData && this.yAxisData.length) {
        option.series[0].data = this.yAxisData;
      }
      return option;
    }
  },
  methods: {
    handleEvent(params) {
      this.$emit('click', params);
    }
  }
};
</script>
