<template>
  <div>
    <div :id="`pieChart` + num" style="width:100%;height: 100%;" />
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'echartsPie',
    props: {
      dataList: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      dataList: {
        handler(val) {
          this.getList(this.dataList);
        }
      }
    },
    data() {
      return {
        num: ''
      }
    },
    created() {
      this.num = Math.floor(Math.random() * 9000);
    },
    mounted() {
      this.getList(this.dataList);
    },
    methods: {
      getList(dataList) {
        const pieDataListIntance = echarts.init(document.getElementById('pieChart' + this.num));
        let titleSet = {};
        if (dataList && dataList.titleVal) {
          titleSet = {
            show: dataList && dataList.titleVal && dataList.titleVal.show || false,
            text: dataList && dataList.titleVal && dataList.titleVal.title || '',
            x: dataList && dataList.titleVal && dataList.titleVal.x || '50%',
            y: dataList && dataList.titleVal && dataList.titleVal.y || '3%',
            textAlign: dataList && dataList.titleVal && dataList.titleVal.textAlign || 'center',
            textStyle: {
              fontSize: 14
            },
          };
        }
        let option = {
          title: titleSet,
          color: dataList.color,
          legend: {
            top: 'bottom',      // 垂直居中
            itemWidth: 12,      // 图例标记宽度
            itemHeight: 12,     // 图例标记高度
            itemGap: 20,        // 图例项间距
            textStyle: {
              fontSize: 12,
              color: '#333'
            },
            // formatter: function(name) {
            //   // 查找对应数据项
            //   const item = dataList.data.find(item => item.name === name);
            //   // 返回带数量的图例文本
            //   return `${name} ${item.value}${dataList.unit}`;
            // }
          },
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: dataList && dataList.radius || ['40%', '70%'],
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#333',
                fontSize: 16,
                formatter: function () {
                  // let total = 0;
                  // for (let i = 0; i < m2R2Data.length; i++) {
                  //   const val = parseFloat(m2R2Data[i].value);
                  //   if (!isNaN(val)) total += val;
                  // }
                  return `{value|${dataList.centerVal}}\n{unit|${dataList.lastVal}}`;
                },
                rich: {
                  value: {
                    fontSize: 24,
                    fontFamily: 'HarmonyOS Sans SC',
                    fontweight: 'bold',
                    color: '#333',
                  },
                  unit: {
                    fontFamily: 'HarmonyOS Sans SC',
                    fontSize: 10,
                    color: '#333',
                  },
                },
              },
            },
            data: dataList.data
          }],
          // graphic: [{
          //   type: 'text',
          //   left: 'center',
          //   top: 'middle',
          //   style: {
          //     text: `${dataList.centerVal}\n${dataList.lastVal}`,
          //     textBaseline: 'middle',
          //     textAlign: 'center',
          //     fontSize: 20,
          //     fill: '#333'
          //   }
          // }],
        };
        // let option = {
        //   title: {
        //     text: '{a|' + Math.round((dataList.value * 100) / dataList.total) + '%}\n{b|' + dataList.lastVal + '}', // 显示标题
        //     show: true, // 是否显示
        //     x: 'center', // x轴位置
        //     y: 'center', // y轴位置
        //     textStyle: { // 样式配置
        //       rich: {
        //         a: {
        //           fontSize: 24, // 字体大小
        //           color: '#333333', // 字体颜色
        //           padding: [0, 0, 5, 0], // 边距
        //         },
        //         b: {
        //           fontSize: 14, // 字体大小
        //           color: '#808080', // 字体颜色
        //         },
        //       },
        //     },
        //   },
        //   angleAxis: {
        //     max: dataList.total,
        //     clockwise: false, // 逆时针
        //     // 隐藏刻度线
        //     show: false,
        //     // 开始的角度
        //     startAngle: 180
        //   },
        //   radiusAxis: {
        //     type: 'category',
        //     show: true,
        //     axisLabel: {
        //       show: false, // 是否显示标签
        //     },
        //     axisLine: {
        //       show: false, // 是否显示轴线
        //     },
        //     axisTick: {
        //       show: false, // 是否显示刻度
        //     },
        //   },
        //   polar: [
        //     {
        //       radius: ['54%', '66%'] //图形大小
        //     }
        //   ],
        //   series: [
        //     {
        //       type: 'bar',
        //       z: 10,
        //       data: [dataList.value], // 数据
        //       coordinateSystem: 'polar', // 坐标
        //       roundCap: true, // 是否在环形柱条两侧使用圆弧效果
        //       barWidth: 20, // 大的占比环
        //       itemStyle: { // 图形样式
        //         normal: {
        //           color: "#2A91D9",
        //         }
        //       }
        //     },
        //     {
        //       type: 'pie',
        //       name: '内层细圆环',
        //       radius: ['55%', '65%'], // 饼图的半径
        //       hoverAnimation: false, // 悬浮突出
        //       itemStyle: { // 图形样式
        //         color: "#DFE0EF", // 颜色
        //       },
        //       label: {
        //         show: false // 是否显示
        //       },
        //       data: [dataList.total]
        //     }
        //   ]
        // };
        pieDataListIntance.setOption(option);
        window.addEventListener("resize", () => {
          pieDataListIntance.resize()
        });
      },
    }
  }
</script>
<style scoped>
</style>
