<!-- 地图 -->
<template>
  <div id="myCharts"
       :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import * as echarts from "echarts";
require('echarts/theme/dark') // echarts theme
var scale = 1;
var echartData = [{
  value: 21,
  name: '测试农户1'
}, {
  value: 38,
  name: '测试农户2'
}, {
  value: 35,
  name: '测试农户3'
}, {
  value: 31,
  name: '测试农户4'
}, {
  value: 28,
  name: '测试农户5'
}, {
  value: 24,
  name: '测试农户6'
}, {
  value: 25,
  name: '测试农户7'
}]
var rich = {
  yellow: {
    color: "#3bc7ff",
    fontSize: 10 * scale,
    padding: [8, 0],
    align: 'center'
  },
  total: {
    color: "#A2C7F3",
    fontSize: 20 * scale,
    align: 'center'
  },
  white: {
    color: "#a2c7f3",
    align: 'center',
    fontSize: 10 * scale,
    padding: [8, 0]
  },
  blue: {
    color: '#3bc7ff',
    fontSize: 10 * scale,
    align: 'center'
  },
  hr: {
    borderColor: '#a2c7f3',
    width: '100%',
    borderWidth: 1,
    height: 0,
  }
}
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'dark')
      this.chart.setOption(
        {
          backgroundColor: '',
          title: {
            text: '总得分',
            left: 'center',
            top: '51%',
            padding: [10, 0],
            textStyle: {
              color: '#6B9DD7',
              fontSize: 14 * scale,
              fontWeight: 'normal',
              align: 'center'
            }
          },
          legend: {
            selectedMode: false,
            formatter: function (name) {
              var total = 0; //各科正确率总和
              var averagePercent; //综合正确率
              echartData.forEach(function (value, index, array) {
                total += value.value;
              });
              return '{total|' + total + '}{white|分}';
            },
            data: [echartData[0].name],
            // data: ['高等教育学'],
            // itemGap: 50,
            left: 'center',
            top: 'center',
            icon: 'none',
            align: 'center',
            textStyle: {
              color: "#fff",
              fontSize: 18 * scale,
              rich: rich
            },
          },
          series: [{
            name: '总考生数量',
            type: 'pie',
            radius: ['42%', '50%'],
            hoverAnimation: false,
            color: ['#fc962c', '#d83472', '#0F9AF8', '#2B63D5', '#2039C3', '#2ECACE', '#6F81DA'],
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
                  var total = 0; //考生总数量
                  var percent = 0; //考生占比
                  echartData.forEach(function (value, index, array) {
                    total += value.value;
                  });
                  percent = ((params.value / total) * 100).toFixed(1);
                  return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '斤/}{blue|' + percent + '%}';
                },
                rich: rich
              },
            },
            labelLine: {
              normal: {
                length: 20 * scale,
                length2: 0,
                lineStyle: {
                  color: '#a2c7f3'
                }
              }
            },
            data: echartData
          }]
        }
      )
    }

  }
}
</script>

<style  scoped>
</style>
