<template>
    <div id="pie-chart" style="height: 100%;width: 100%;position: relative;">
      <div id="pieId-new" class="pie-chart-container"></div>
      <div class="item-box" style="top: 100px;left: 0;text-align: right;">
        <div class="item-value-box" style="justify-content: flex-end;">
          <p class="item-value" style="color: #f8ffff;">{{ testchartData[0].value }}</p>
          <div class="triangle-left" style="border-right:20px solid #f8ffff;"></div> 
        </div>
        <p class="item-name">{{ testchartData[0].name }}</p>
      </div>
      <div class="item-box" style="top: 300px;left: 0;text-align: right;">  
        <div class="item-value-box" style="justify-content: flex-end;">
          <p class="item-value" style="color: #88a8f4;">{{ testchartData[1].value }}</p>
          <div class="triangle-left" style="border-right:20px solid #88a8f4;"></div> 
        </div>
        <p class="item-name">{{ testchartData[1].name }}</p>
      
      </div>
      <div class="item-box" style="top: 100px;right: 0;text-align: left;">
        <div class="item-value-box">
          <div class="triangle-right" style="border-left:20px solid #ffdc9d;"></div> 
          <p class="item-value" style="color: #ffdc9d;">{{ testchartData[2].value }}</p>
        </div>
        <p class="item-name">{{ testchartData[2].name }}</p>
      </div>
      <div class="item-box" style="top: 300px;right: 0;">
        <div class="item-value-box">
          <div class="triangle-right" style="border-left:20px solid #eb7e41;"></div> 
          <p class="item-value" style="color: #eb7e41;">{{ testchartData[3].value }}</p>
        </div>
        <p class="item-name">{{ testchartData[3].name }}</p>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
    name: 'RoseChart',
    props: {
      pieId: {
        type: String,
      },
      chartData: {
        type: Object,
      },
      dataType: {
      }
    },
    data() {
      return {
        testchartData:[
        {
            value: 520,
            name: "机芯产量",
            },
            {
            value: 280,
            name: "盖板产量",
            },
            {
            value: 100,
            name: "整机产量",
            },
            {
            value: 100,
            name: "组件产量",
            },
        ],
        option: {}
      }
    },
    mounted() {
      const { createData } = this
  
      createData()
  
      // setInterval(createData, 100000)
    },
    methods: {
      createData() {
        const chartData = [
            {
            value: 520,
            name: "机芯产量",
            },
            {
            value: 280,
            name: "盖板产量",
            },
            {
            value: 100,
            name: "整机产量",
            },
            {
            value: 100,
            name: "组件产量",
            },
        ];
        const colorList = [
        // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        // {
        //     offset: 0,
        //     color: "#CA8CCA",
        // },
        // {
        //     offset: 1,
        //     color: "#8A2BE2",
        // },
        // ]),
        // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        // {
        //     offset: 0,
        //     color: "#FF3333",
        // },
        // {
        //     offset: 1,
        //     color: "#FF3333",
        // },
        // ]),
        // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        // {
        //     offset: 0,
        //     color: "#A8AAE5",
        // },
        // {
        //     offset: 1,
        //     color: "#BEA3E3",
        // },
        // ]),
        // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        // {
        //     offset: 0,
        //     color: "#F0F4F8",
        // },
        // {
        //     offset: 1,
        //     color: "#E5F2A7",
        // },
        // ]),
        '#f8ffff','#88a8f4','#ffdc9d','#eb7e41'
        ];
        const sum = chartData.reduce((per, cur) => per + cur.value, 0);
        const gap = (1 * sum) / 100;
        const pieData1 = [];
        const pieData2 = [];
        const gapData = {
        name: "",
        value: gap,
        itemStyle: {
        color: "transparent",
        },
        };
        for (let i = 0; i < chartData.length; i++) {
        pieData1.push({
        ...chartData[i],
        itemStyle: {
            borderRadius: 100,
            shadowColor: "#2a2a34",
            shadowBlur: 5,
            shadowOffsetY: 0,
            shadowOffsetX: 0,
            borderColor: "#2a2a34",
            borderWidth: 2,
        },
        });
        pieData1.push(gapData);

        pieData2.push({
        ...chartData[i],
        itemStyle: {
            borderRadius: 10,
            color: colorList[i],
            opacity: 0.2,
            shadowColor: "#000",
            shadowBlur: 3,
            shadowOffsetY: 5,
            shadowOffsetX: 0,
        },
        });
        pieData2.push(gapData);
        }
        var myChart = echarts.init(document.getElementById('pieId-new'));
        this.option = {
            title: [
                {
                text: sum,
                x: "50%",
                y: "40%",
                textAlign: "center",
                textStyle: {
                    fontSize: "50",
                    fontWeight: "500",
                    color: "#98b5d2",
                    textAlign: "center",
                    textShadowColor: "#000",
                    textShadowBlur: "1",
                    textShadowOffsetX: 2,
                    textShadowOffsetY: 2,
                },
                },
                {
                text: "总产量",
                left: "50%",
                top: "55%",
                textAlign: "center",
                textStyle: {
                    fontSize: "25",
                    fontWeight: "400",
                    color: "#c4c4c4",
                    textAlign: "center",
                    textShadowColor: "#000",
                    textShadowBlur: "1",
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                },
                },
            ],
            // legend: {
            //     right: "10%",
            //     top: 'middle',
            //     align: "left",
            //     width:'200',
            //     // orient: 'vertical',
            //     itemGap: 30,
            //     itemWidth: 20,
            //     itemHeight: 20,
            //     shadowBlur: 10,
            //     shadowOffsetY: 0,
            //     shadowOffsetX: 0,
            //     borderColor: "#2a2a34",
            //     borderWidth: 2,
            //     textStyle: {
            //     color: "#D8DDE3",
            //     rich: {
            //         name: {
            //         verticalAlign: "right",
            //         align: "left",
            //         fontSize: 24,
            //         color: "#D8DDE3",
            //         },
            //         percent: {
            //         padding: [0, 0, 0, 10],
            //         color: "#08e5ff",
            //         fontSize: 25,
            //         fontWeight:'bold'
            //         },
            //     },
            //     },
            //     formatter: (name) => {
            //     const item = chartData.find((i) => {
            //         return i.name === name;
            //     });
            //     //是否计算为百分比
            //     // const p = ((item.value / sum) * 100).toFixed(0);
            //     // return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
                
            //     // const p = ((item.value / sum) * 100).toFixed(0);
            //     return "{name|" + name + "}" + "{percent|" + item.value + "}";
            //     },
            // },

            color: colorList,

            series: [
                {
                type: "pie",
                z: 3,
                roundCap: true,
                radius: ["60%", "50%"],
                // center: ["30%", "50%"],
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                data: pieData1,
                },
                {
                type: "pie",
                z: 2,
                radius: ["70%", "66%"],
                // center: ["30%", "50%"],
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                silent: true,
                data: pieData2,
                },
            ],
            };
        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: 50%;
      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>
  