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

<script>
import echarts from 'echarts4'
export default {
  props: {},
  mounted() {
    this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
    this.createChart()
  },
  data() {
    return {
      jNestedRingChart: null
    }
  },
  methods: {
    createChart() {
      const { title } = this
      const option = {
        title: {
          x: '29%',
          y: '35%',
          show: true,
          text: 654,
          subtext: '本周总任务',
          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: [
          {
            type: 'pie',
            label: false,
            color: ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0', 'red'],
            radius: ['65%', '80%'],
            center: ['30%', '50%'],
            data: [
              { value: 45, name: '未戴安全帽' },
              { value: 5, name: '危险区域闯入' },
              { value: 15, name: '人员聚集报警' },
              { value: 10, name: '未穿反光衣' },
              { value: 45, name: '明火监测报警' },
              { value: 45, name: '烟雾监测报警' }
            ]
          },
          {
            type: 'pie',
            label: false,
            roseType: 'area',
            color: ['#0B1B35', '#244D8F'],
            radius: ['58%', '54%'],
            center: ['30%', '50%'],
            data: [30, 40, 30, 40]
          }
        ]
      }
      this.jNestedRingChart.setOption(option)
    }
  }
}
</script>

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