<template>
    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
//import  from '';

export default {
    name: "pieChart", //
    components: {},
    data() {
        return {
            charts: "",
            colors: [
                "#5B8FF9",
                "#61DDAA",
                "#65789B",
                "#F6BD16",

                "#FF5C5C",
                "#4671C6",
                "#7CCE7A",
                "#FFC655",
                "#4BC2DF",
                "#00A476",
                "#FF7D46",
                "#A45DB2",
            ],
        };
    },

    props: {
        id: {
            default: "a",
            type: String,
        },
        stateList: {
            default: function () {
                return [];
            },
            type: Array,
        },
    },

    watch: {
        stateList(val) {
            if (val.length > 0) {
                this.initStateList();
            }
        },
    },

    methods: {
        initStateList() {
            let stateList = this.stateList;

            let data = [];

            for (let index = 0; index < stateList.length; index++) {
                const element = stateList[index];
                data[index] = {
                    value: element.num,
                    name: element.stateName,
                    itemStyle: {
                        normal: {
                            color: this.colors[index],
                        },
                    },
                };
            }

            let option = {
                tooltip: {
                    //提示框，可以在全局也可以在
                    trigger: "item", //提示框的样式
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    color: "#000", //提示框的背景色
                    textStyle: {
                        //提示的字体样式
                        color: "#ffffff",
                    },
                },
                series: [
                    {
                        name: "状态统计",
                        type: "pie",
                        // radius: '55%',
                        data,
                        top: 10,
                    },
                ],
            };

            this.charts.setOption(option);
        },
    },

    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.charts = this.$echarts.init(document.getElementById(this.id));

        let option = {
            tooltip: {
                //提示框，可以在全局也可以在
                trigger: "item", //提示框的样式
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                color: "#000", //提示框的背景色
                textStyle: {
                    //提示的字体样式
                    color: "#ffffff",
                },
            },
            series: [
                {
                    type: "pie",
                    data: [
                        {
                            value: 335,
                            name: "图例一",
                            itemStyle: {
                                normal: {
                                    color: "#5B8FF9",
                                },
                            },
                        },
                        {
                            value: 1234,
                            name: "图例二",
                            itemStyle: {
                                normal: {
                                    color: "#61DDAA",
                                },
                            },
                        },
                        {
                            value: 548,
                            name: "图例三",
                            itemStyle: {
                                normal: {
                                    color: "#65789B",
                                },
                            },
                        },
                        {
                            value: 153,
                            name: "图例四",
                            itemStyle: {
                                normal: {
                                    color: "#F6BD16",
                                },
                            },
                        },
                    ],
                },
            ],
        };

        let option1 = {
            legend: {
                orient: "vertical",
                x: "right",
                // y:'center',
                data: ["图例一", "图例二", "图例三", "图例四"],
            },
            series: [
                {
                    type: "pie",
                    radius: ["50%", "70%"],
                    avoidLabelOverlap: false,
                    color: ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16"],
                    label: {
                        show: false,
                        position: "center",
                        emphasis: {
                            show: true,
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: "30",
                            fontWeight: "bold",
                        },
                    },
                    data: [
                        { value: 335, name: "图例一" },
                        { value: 310, name: "图例二" },
                        { value: 234, name: "图例三" },
                        { value: 135, name: "图例四" },
                    ],
                },
            ],
        };

        let option2 = {
            tooltip: {
                //提示框，可以在全局也可以在
                trigger: "item", //提示框的样式
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                color: "#000", //提示框的背景色
                textStyle: {
                    //提示的字体样式
                    color: "#ffffff",
                },
            },
            legend: {
                //图例
                orient: "vertical", //图例的布局，竖直    horizontal为水平
                x: "right", //图例显示在右边
                data: ["图例一", "图例二", "图例三", "图例四"],
                textStyle: {
                    //图例文字的样式
                    color: "#333", //文字颜色
                    fontSize: 12, //文字大小
                },
            },
            series: [
                {
                    name: "访问来源",
                    type: "pie", //环形图的type和饼图相同
                    radius: ["50%", "70%"], //饼图的半径，第一个为内半径，第二个为外半径
                    avoidLabelOverlap: false,
                    color: ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16"],
                    label: {
                        normal: {
                            //正常的样式
                            show: true,
                            position: "left",
                        },
                        emphasis: {
                            //选中时候的样式
                            show: true,
                            textStyle: {
                                fontSize: "20",
                                fontWeight: "bold",
                            },
                        },
                    }, //提示文字
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: [
                        { value: 335, name: "图例一" },
                        { value: 310, name: "图例二" },
                        { value: 234, name: "图例三" },
                        { value: 135, name: "图例四" },
                    ],
                },
            ],
        };

        let optionX = {
            tooltip: {
                //提示框，可以在全局也可以在
                trigger: "item", //提示框的样式
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                color: "#000", //提示框的背景色
                textStyle: {
                    //提示的字体样式
                    color: "#ffffff",
                },
            },
            series: [
                {
                    name: "状态统计",
                    type: "pie",
                    // radius: '55%',
                    data: [
                        {
                            value: 335,
                            name: "未执行\n12%",
                            itemStyle: {
                                normal: {
                                    color: "#5B8FF9",
                                },
                            },
                        },
                        {
                            value: 1234,
                            name: "执行中",
                            itemStyle: {
                                normal: {
                                    color: "#61DDAA",
                                },
                            },
                        },
                        {
                            value: 548,
                            name: "已中止",
                            itemStyle: {
                                normal: {
                                    color: "#65789B",
                                },
                            },
                        },
                        {
                            value: 153,
                            name: "已完成",
                            itemStyle: {
                                normal: {
                                    color: "#F6BD16",
                                },
                            },
                        },
                        {
                            value: 453,
                            name: "已完成3",
                            itemStyle: {
                                normal: {
                                    color: "#FF5C5C",
                                },
                            },
                        },
                        {
                            value: 553,
                            name: "已完成2",
                            itemStyle: {
                                normal: {
                                    color: "#4671C6",
                                },
                            },
                        },
                        {
                            value: 753,
                            name: "已完成1",
                            itemStyle: {
                                normal: {
                                    color: "#FF7D46",
                                },
                            },
                        },
                        {
                            value: 253,
                            name: "已完成12",
                            itemStyle: {
                                normal: {
                                    color: "#A45DB2",
                                },
                            },
                        },
                    ],
                    top: 10,
                },
            ],
        };

        let optionY = {
            tooltip: {
                //提示框，可以在全局也可以在
                trigger: "item", //提示框的样式
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                color: "#000", //提示框的背景色
                textStyle: {
                    //提示的字体样式
                    color: "#ffffff",
                },
            },
            series: [
                {
                    type: "pie",
                    // radius: '55%',
                    data: [
                        {
                            value: 435,
                            name: "未执行",
                            itemStyle: {
                                normal: {
                                    color: "#5B8FF9",
                                },
                            },
                        },
                        {
                            value: 234,
                            name: "执行中",
                            itemStyle: {
                                normal: {
                                    color: "#61DDAA",
                                },
                            },
                        },
                        {
                            value: 138,
                            name: "已中止",
                            itemStyle: {
                                normal: {
                                    color: "#65789B",
                                },
                            },
                        },
                        {
                            value: 753,
                            name: "已完成",
                            itemStyle: {
                                normal: {
                                    color: "#F6BD16",
                                },
                            },
                        },
                    ],
                    top: 10,
                },
            ],
        };

        let optionZ = {
            tooltip: {
                //提示框，可以在全局也可以在
                trigger: "item", //提示框的样式
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                color: "#000", //提示框的背景色
                textStyle: {
                    //提示的字体样式
                    color: "#ffffff",
                },
            },
            series: [
                {
                    type: "pie",
                    // radius: '55%',
                    data: [
                        {
                            value: 855,
                            name: "优秀(G)",
                            itemStyle: {
                                normal: {
                                    color: "#5B8FF9",
                                },
                            },
                        },
                        {
                            value: 693,
                            name: "良好(A)",
                            itemStyle: {
                                normal: {
                                    color: "#61DDAA",
                                },
                            },
                        },
                        {
                            value: 548,
                            name: "一般(M)",
                            itemStyle: {
                                normal: {
                                    color: "#65789B",
                                },
                            },
                        },
                        {
                            value: 153,
                            name: "较差(P)",
                            itemStyle: {
                                normal: {
                                    color: "#F6BD16",
                                },
                            },
                        },
                    ],
                    top: 10,
                },
            ],
        };

        let optionD = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
            },
            legend: {
                orient: "vertical",
                bottom: 10,
                left: 10,
                data: ["SAT111", "托福", "雅思"],
            },
            series: [
                {
                    name: "国外考试分类",
                    type: "pie",
                    selectedMode: "single",
                    // radius: [0, "50%"],
                    center: ["55%", "50%"],
                    label: {
                        position: "inner",
                    },
                    labelLine: {
                        show: false,
                    },
                    color: ["#7C8FFF", "#FF855F", "#FFCB64"],
                    data: [
                        { value: 335, name: "SATawe" },
                        { value: 1579, name: "托福" },
                        { value: 1548, name: "雅思" },
                    ],
                },
                {
                    name: "国外考试中心",
                    type: "pie",
                    // radius: ["40%", "55%"],
                    center: ["55%", "50%"],
                    labelLine: {
                        length: 30, //第一段线长
                        length2: 100, //第二段线长
                    },
                    label: {
                        formatter: function (pram) {
                            return (
                                "{a|" +
                                pram.data.type +
                                " " +
                                pram.percent +
                                "% }"
                            );
                        },
                        padding: [0, -100, 20, -100], //关键代码！关键代码！关键代码！
                        rich: {
                            a: {
                                fontSize: 14,
                                color: "#000",
                                fontWeight: 500,
                                lineHeight: 32,
                                align: "right",
                            },
                        },
                    },
                    color: [
                        "#627DF3",
                        "#A3B0FE",
                        "#F96B3C",
                        "#FFAB97",
                        "#FBBD39",
                        "#FFDB98",
                    ],
                    data: [
                        { value: 135, name: "SAT完成任务", type: "SATrt" },
                        { value: 200, name: "SAT未完成任务", type: "SATgh" },
                        { value: 1000, name: "托福完成任务", type: "托福11" },
                        { value: 579, name: "托福未完成任务", type: "托福" },
                        { value: 1048, name: "雅思完成任务", type: "雅思" },
                        { value: 500, name: "雅思未完成任务", type: "雅思" },
                    ],
                },
            ],
        };

        if (this.id === "pieB") {
            this.charts.setOption(option2);
        } else if (this.id === "pieX") {
            this.charts.setOption(optionX);
            // this.charts.setOption(optionD);
        } else if (this.id === "pieY") {
            this.charts.setOption(optionY);
        } else if (this.id === "pieZ") {
            this.charts.setOption(optionZ);
        }
        else {
            this.charts.setOption(optionX);
        }

        // if (this.id === "projectInfoPieA") {
        //     this.initStateList();
        // }

        // window.onresize = function () {
        //     this.charts.resize();
        // };

        this.$nextTick(() => {
            window.addEventListener("resize", () => {
                this.charts.resize();
            });
        });
    },
    destroyed() {
        console.log("destroyed");
        this.charts.dispose();
    },
};
</script>

<style lang='less' scoped>
.linechart {
    margin: 0 auto;
}
</style>