<template>
  <div class="echarts-content">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <pie-echart
      :title="title"
      :show-emphasis="true"
      :option-data="optionData1"
      :show-graphic="false"
      :show-animate="true"
    />
  </div>
</template>

<script>
import PieEchart from './pie-echart.vue'

export default {
  components: {
    PieEchart
  },
  props: {
    title: {
      type: String,
      default: () => 'myEcharts'
    },
    optionData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      optionData1: {}
    }
  },
  watch: {
    optionData: {
      handler(val) {
        this.optionData1 = val
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.echarts-content {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  border: 1px solid #ccc;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
  padding: 10px;
  .title {
    display: flex;
    align-items: center;
  }
  .pei-echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
