<template>
  <div class="j-bar-chart" ref="jBarChart"></div>
</template>

<script>
import echarts from 'echarts4'
export default {
  props: {
    data: {
      type: Array,
      default: () => [{ value: 1, name: '' }]
    },
    color: {
      type: Array,
      default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
    },
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    radius: {
      type: Array,
      default: () => ['65%', '80%']
    }
  },
  mounted() {
    this.jBarChart = echarts.init(this.$refs.jBarChart)
    this.createRingChart()
  },
  data() {
    return { jBarChart: null }
  },
  methods: {
    createRingChart() {
      const option = {
        color: this.color,
        title: {
          show: true,
          text: this.title,
          x: '48%',
          y: '36%',
          z: 5,
          textAlign: 'center',
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 20
          },
          subtext: this.subTitle,
          subtextStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 13
          }
        },
        grid: {
          right: 0
        },
        legend: {
          show: false
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: this.radius,
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      }
      this.jBarChart.setOption(option)
    }
  }
}
</script>

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