<template>
  <div ref="chart" class="pie-chart-container"></div>
</template>

<script>
import { echartMixin } from '@/mixins'
export default {
  name: 'PieChart',
  mixins: [echartMixin],
  data() {
    return {
      seriesData: [
        { value: 10, name: '非采区采砂' },
        { value: 10, name: '非采期采砂' },
        { value: 10, name: '采砂超量' }
      ]
    }
  },
  methods: {
    initChart() {
      const option = {
        backgroundColor: 'transparent',
        color: ['#91ffab', '#90caff', '#f9dd71'],
        graphic: {
          elements: [
            {
              type: 'text',
              left: '18%',
              top: '38%',
              style: {
                text: `{a|3}{b|类}\n{c|预警类型}`,
                fill: '#fff',
                textAlign: 'center',
                textVerticalAlign: 'middle',
                rich: { a: { fontSize: this.pxToRem(28) }, b: { fontSize: this.pxToRem(12) }, c: { fontSize: this.pxToRem(14) } }
              }
            }
          ]
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 35,
          bottom: 20,
          itemWidth: 12,
          itemHeight:6,
          textStyle: { color: '#F5F5F5', fontSize: this.pxToRem(14) },
          formatter: (name) => {
            const item = this.seriesData.find((d) => d.name === name)
            return item ? `${name} ${item.value}` : name
          }
        },
        series: [
          {
            name: '预警总数',
            type: 'pie',
            radius: ['70%', '95%'],
            center: ['25%', '50%'],
            avoidLabelOverlap: false,
            label: { show: false },
            labelLine: { show: true },
            data: this.seriesData
          }
        ]
      }
      this.chartObj.setOption(option)
    },
    pxToRem(px) {
      return `${px / 100}rem`
    }
  }
}
</script>
<style lang="scss">
.pie-chart-container {
}
</style>
