<template>
<div class="wrap">
<div :id="id" :style="style"></div>
<list v-show="showList" :id="`${id}_list`" :list="seriesData"></list>
</div>

</template>

<script>
import List from './list'
export default {
  name: 'charts',
  components: { List },
  data () {
    return {
      chart: '',
      showList: false
    }
  },
  props: {
    id: String,
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    seriesName: {
      type: String,
      default: ''
    },
    seriesData: {
      type: Array,
      default: () => []
    },
    selected: {
      type: Object,
      default: () => ({})
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  computed: {
    style () {
      return {
        width: this.width,
        height: this.height
      }
    }
  },
  watch: {
    seriesData: {
      handler () {
        this.init()
      },
      deep: true
    },
    selected: {
      handler () {
        this.init()
      },
      deep: true
    }
  },
  mounted () {
  },
  methods: {
    init () {
      const option = {
        title: {
          text: this.title,
          subtext: this.subTitle,
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          right: '24%',
          show: true,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: true,
              optionToContent: () => {
                this.showList = true
                this.dataView = document.querySelector(`#${this.id}_list`) || this.dataView // 缓存dom节点
                return this.dataView
              },
            },
            saveAsImage: { show: true }
          }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: this.seriesData.map(item => item.name),
          selected: this.selected
        },
        series: [{
          name: this.seriesName,
          type: 'pie',
          radius: '45%',
          center: ['50%', '50%'],
          data: this.seriesData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]

      }
      this.chart = this.$echarts.init(document.getElementById(this.id), 'light')
      this.chart.setOption(option)
      window.addEventListener('resize', this.chart.resize)
    }
  }

}

</script>

<style scoped>
/* .wrap{
height: 520px;
} */
</style>
