<!--
  @description: 报表统计-完成项目金额
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/02/25
-->
<template>
  <MyEcharts
    :id="'pieChart'+randomData()"
    class="echart-dom"
    :option="chartOption"
    @myCharVm="myCharVm"
  />
</template>

<script>
/* 公用方法*/
import { randomData } from '@assets/js/utils'// 常用方法
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
export default {
  name: 'PieChart',
  components: {
    MyEcharts// 图表
  },
  inject: ['chartData'],
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      myChar: '', // echart 实例
      // 图表配置
      chartOption: {}
    }
  },

  methods: {
    randomData,
    // echarts 实例
    myCharVm(vm) {
      this.$emit('myCharVm', vm)
    },
    /**
      * 渲染echarts
      * @param {option.title.text} String 标题
      * @param {option.unit} String 计量单位
      * @param {option.series.data} Array:[name:'',value:''] 渲染的数据
      */
    init(option) {
      const mainBg = this.chartData.mainBg // 背景色
      const highlightBg = this.chartData.highlightBg // 背景-高亮色
      const borderColor = this.chartData.borderColor // 边框颜色
      const textColor = [this.chartData.textColor, '#1A91FF', '#AAAAAA'] // 文本颜色
      const colorList = option.color ? option.color : ['#9eca7f', '#f5c04c', '#de6e6a', '#617acb']
      // 设置空心实心样式
      const radius = option.radius ? option.radius : ['30%', '60%']
      /* ------------------------------------------------- */
      this.chartOption = {
        // 标题
        title: {
          text: option.title.text,
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: '14',
            fontweight: 'normal',
            lineHeight: 24,
            color: textColor[0]
          }
        },
        // 提示框
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/> {c} ({d}%)'
        },
        // 图例
        legend: {
          show: false,
          orient: 'vertical',
          x: '46%', // 可设定图例在左、右、居中
          y: 'center', // 可设定图例在上、下、居中
          icon: 'circle', // 形状
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 16, // 每个图列之间的间隔
          textStyle: {
            color: textColor[0] // 图例文字颜色
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            // minAngle: 5,
            avoidLabelOverlap: true,
            center: ['center', 'center'],
            radius: radius,
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: highlightBg,
              borderWidth: 2,
              // normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
              // }
            },
            labelLine: {
              length: 30
            },
            label: {
              show: true,
              formatter: '{b|{b}}{abg|}\n{hr|}\n  {c|{c}' + option.unit + '}  {per|{d}%}  ',
              backgroundColor: mainBg,
              borderColor: borderColor,
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                b: {
                  color: textColor[0],
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: borderColor,
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                c: {
                  color: textColor[1],
                  lineHeight: 22
                },
                per: {
                  color: textColor[2]
                }
              }
            },
            data: option.series.data
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
