<template>
    <div id="pie-chart" style="height: 100%;width: 100%;">
      <div id="pieId-new" class="pie-chart-container"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
    name: 'RoseChart',
    props: {
      pieId: {
        type: String,
      },
      chartData: {
        type: Object,
      },
      dataType: {
      }
    },
    data() {
      return {
        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: "今日不良数",
            },
            {
            value: 100,
            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",
        },
        ]),
        '#FF6B35','#2ECC71','#CCD6DD',
        ];
        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.1,
            shadowColor: "#000",
            shadowBlur: 1,
            shadowOffsetY: 5,
            shadowOffsetX: 0,
        },
        });
        pieData2.push(gapData);
        }
        var myChart = echarts.init(document.getElementById('pieId-new'));
        this.option = {
            title: [
                {
                text: sum,
                x: "30%",
                y: "43%",
                textAlign: "center",
                textStyle: {
                    fontSize: "50",
                    fontWeight: "500",
                    color: "#98b5d2",
                    textAlign: "center",
                    textShadowColor: "#000",
                    textShadowBlur: "1",
                    textShadowOffsetX: 2,
                    textShadowOffsetY: 2,
                },
                },
                {
                text: "数据展示",
                left: "30%",
                top: "52%",
                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: ["44%", "51%"],
                center: ["30%", "50%"],
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                data: pieData1,
                },
                {
                type: "pie",
                z: 2,
                radius: ["40%", "55%"],
                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;
  
    .pie-chart-container {
      width: 100%;
      height: 100%
    }
  }
  </style>
  