<template>
  <div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
</template>

<script>
import echarts from 'echarts4'
export default {
  props: {
    title: {
      type: Object,
      default: () => ({
        text: '',
        subTitle: '',
        x: '48%',
        y: '36%'
      })
    },
    series: {
      required: true,
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
    this.createChart()
  },
  data() {
    return {
      jNestedRingChart: null
    }
  },
  methods: {
    createChart() {
      const { title, series } = this
      const setSeries = (series => {
        return series.map(item => ({
          type: 'pie',
          label: false,
          center: ['30%', '50%'],
          radius: item.radius || ['65%', '80%'],
          roseType: item.roseType,
          color: item.color,
          data: item.data
        }))
      })(series)

      const option = {
        title: {
          text: title.text,
          subtext: title.subTitle,
          x: title.x || '29%',
          y: title.y || '35%',
          show: true,
          textAlign: 'center',
          textStyle: {
            fontSize: 20,
            fontWeight: 'normal',
            color: '#fff'
          },
          subtextStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 50,
          top: 'center',
          itemWidth: 10,
          itemHeight: 10,
          selectedMode: false,
          icon: 'circle',
          textStyle: {
            color: '#ffffff',
            fontSize: 14
          }
        },
        series: setSeries
      }
      this.jNestedRingChart.setOption(option)
    }
  }
}
</script>

<style>
.j-nested-ring-chart {
  width: 100%;
  height: 100%;
}
</style>
