<template>
    <div id="pie-chart" style="height: 100%;width: 100%;position: relative;">
      <div id="pieId-new" class="pie-chart-container"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  let testRes = window.htd_bidata;
  export default {
    name: 'RoseChart',
    props: {
      pieId: {
        type: String,
      },
      chartData: {
        type: Object,
      }, 
      dataType: {
      }
    },
    data() {
      return {
        digitalFlopStyle: {
          fontSize: 45,
          fill: '#fff'
        },
        option: {}
      }
    },
    created(){
    },
    mounted() {
      const { createData } = this
  
      createData()
  
    },
    methods: {
      createData() {
        let arr = [
            {
            value: 35,
            name: "外观不良",
            },
            {
            value: 95,
            name: "尺寸不良",
            },
            {
            value: 55,
            name: "功能不良",
            },
            {
            value: 50,
            name: "包装不良",
            },
            {
            value: 50,
            name: "标签不良",
            },
            {
            value: 55,
            name: "其他不良",
            },
        ];
        let arr2 = [
            {
            value: 35,
            name: "外观不良",
            },
            {
            value: 20,
            name: "尺寸不良",
            },
            {
            value: 16,
            name: "功能不良",
            },
            {
            value: 12,
            name: "包装不良",
            },
            {
            value: 12,
            name: "标签不良",
            },
            {
            value: 27,
            name: "其他不良",
            },
        ];
        arr2 = testRes.data.yx_v_byblzb.map(item => {
            return {
                value: item['数量'],
                name: item['指标']
            }
        })
        let num  = testRes.data.yx_v_byblzb.map(item => {
          return item['数量']
        })
        let maxNum = this.dataType == '6'? Math.max(...num) : 100;
        let chartData = this.dataType == '6'?arr2 : arr;
        console.log(this.dataType,chartData)

        var myChart = echarts.init(document.getElementById('pieId-new'));
        this.option = {
            title: {
                text: '本月不良指标数',
                top: '0',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 25
                }
            },
            radar: {
                indicator: chartData.map(item => {
                    return { name: item.name, max:  maxNum+(0.2*maxNum) };
                }),
                radius: '70%',
                splitNumber: 4,
                axisName: {
                    color: '#fff',
                    fontSize: 25  // 从14px修改为20px
                },
                splitArea: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)' // 修改为半透明白色
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)', // 修改为半透明白色
                        type: 'circle',
                        width: 2  // 加粗辅助线
                    }
                },
                shape: 'circle'  // 强制使用圆形
            },
            series: [{
                type: 'radar',
                colorBy: 'data', // 添加这一行，根据数据值改变颜色
                data: [{
                    value: chartData.map(item => item.value),
                    name: '产量统计',
                    areaStyle: {
                        color: 'rgba(8, 229, 255, 0.4)'
                    },
                    lineStyle: {
                        width: 2,
                        color: '#08e5ff'
                    },
                    symbolSize: 8,
                    itemStyle: {
                        color: '#FFFFFF'
                    },
                    label: {
                        show: true,
                        formatter: function(params) {
                            return params.value;
                        },
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        fontSize: 24
                    }
                }]
            }]
        };
        myChart.setOption(this.option);
      }
    },
   
  }
  </script>
  
  <style lang="less">
  #pie-chart {
    box-sizing: border-box;
    color: white;
    .item-box{
      position: absolute;
      p{margin: 0;}
      .item-name{
        width: 200px;
        font-size:30px;
          color: #ffffff;
          font-weight: bold;
      }
      .item-value-box{
        display: flex;
        align-items: center;
      }
      .item-value{
        font-size:45px;
        padding: 0 10px;
        color: #ffffff;
        font-weight: bold;
      }
    }
    .pie-chart-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 100%;
      height: 100%
    }
    /* 向右的三角形 */
    .triangle-right {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 20px solid #ff4141; /* 通过调整颜色和尺寸改变外观 */
    }

    /* 向左的三角形 */
    .triangle-left {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-right: 20px solid #41a2ff; /* 通过调整颜色和尺寸改变外观 */
    }
  }
  </style>
  