<template>
  <div class="main">
    <div class="total">
      <span>总人数</span>
      <p>{{this.total}}人 </p>
    </div>
    <div
      class="chart"
      ref="chart"
    >
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chart: null,
      list: [
        { value: 27594, name: '胸痛' },
        { value: 18594, name: '卒中' },
        { value: 18594, name: '创/烧伤' },
        { value: 18594, name: '其他' }
      ],
      total: 0
    }
  },
  mounted() {
    let count = 0
    this.list.forEach(i => {
      count += i.value
    })
    this.total = count
    this.init()
  },
  methods: {
    init() {
      const myChart = this.chart || echarts.init(this.$refs.chart);
      // this.chart = echarts.init(this.$refs.chart);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '50%',
          top: 'middle',
          itemGap: 72,
          itemWidth: 24,
          itemHeight: 24,
          formatter: (name) => {
            const item = this.list.find(i => i.name = name)
            const per = parseInt(item.value / this.total * 100)
            return '{a|' + name + '}{b|' + per + '%}{x|' + item.value + '人}'
          },
          textStyle: {
            padding: [0, 20, 0, 0],
            rich: {
              a: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 40,
                width: 180,
                padding: [0, 0, 0, 10]
              },
              b: {
                color: '#FFFFFF',
                fontSize: 40,
                width: 120
              },
              x: {
                color: '#FFFFFF',
                fontSize: 40,
                width: 200
              },
            }
          }
        },
        color: ['#FF3178', '#00C9FF', '#FFA400', '#7A52FF'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            clockwise: false,
            radius: ['60%', '85%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            center: ['25%', '50%'],
            labelLine: {
              show: false
            },
            data: this.list,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      this.chart = myChart
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  margin: 132px 60px;
  .chart {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
  }
  .total {
    position: absolute;
    top: 183px;
    left: 157px;
    text-align: center;
    z-index: 9999;
    span {
      height: 40px;
      font-size: 40px;
      color: rgba(255, 255, 255, 0.6);
    }
    p {
      height: 48px;
      font-size: 56px;
      color: #ffffff;
      line-height: 48px;
      margin-top: 20px;
    }
  }
}
</style>