<template>
    <div
        class="linechart"
        :id="id"
        style="width: calc(37.5vw - 180px); height: calc(42vh - 165px)"
    ></div>
    <!-- style="width: calc(33vw - 180px); height: calc(42vh - 165px)" -->
</template>

<script>
//import  from '';

export default {
    name: "pieChart", //
    components: {},
    data() {
        return {
            charts: "",
        };
    },

    props: {
        id: {
            default: "a",
            type: String,
        },
    },

    computed: {},

    methods: {},

    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",
                    // radius: '55%',
                    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",
                                },
                            },
                        },
                    ],
                    // left: 0,
                    // right: "50%",
                    top: 10,
                    // bottom: 0,
                },
            ],
        };

        let optionX = {
            tooltip: {
                //提示框，可以在全局也可以在
                trigger: "item", //提示框的样式
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                color: "#000", //提示框的背景色
                textStyle: {
                    //提示的字体样式
                    color: "#ffffff",
                },
            },
            series: [
                {
                    type: "pie",
                    // radius: '55%',
                    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",
                                },
                            },
                        },
                    ],
                    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 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,
                        },
                    },
                    rich: {
                        padding: [0, 0, 0, 0],
                    },
                    padding: [0, 10, 10, 10],
                    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: "图例四" },
                    ],
                },
            ],
        };

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

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

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