simulation-front/src/components/echarts/pieChartProjectInfo.vue

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

<script>
//import  from '';

export default {
    name: "pieChartProjectInfo", // 手动运行项目详情-饼图
    components: {},
    data() {
        return {
            charts: "",
            colors: [
                "#5B8FF9",
                "#61DDAA",
                "#65789B",
                "#F6BD16",

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

    props: {
        id: {
            default: "pieChartProjectInfo",
            type: String,
        },
        seriesName: {
            default: "统计",
            type: String,
        },
        stateName: {
            default: "name",
            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[this.stateName] + "\n" + element.num,
                    name: element[this.stateName],
                    itemStyle: {
                        normal: {
                            color: this.colors[index],
                        },
                    },
                };
            }

            let option = {
                title: {
                    text: "暂无数据",
                    show: stateList.length === 0,
                    left: "center",
                    top: "center",
                },
                tooltip: {
                    //提示框，可以在全局也可以在
                    trigger: "item", //提示框的样式
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    // formatter: "{a} <br/>{b} {c} ({d}%)",
                    color: "#000", //提示框的背景色
                    textStyle: {
                        //提示的字体样式
                        color: "#ffffff",
                    },
                    confine: true,
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                },
                series: [
                    {
                        name: this.seriesName,
                        type: "pie",
                        radius: ["40%", "70%"],
                        avoidLabelOverlap: true,
                        data,
                        top: 10,
                        label: {
                            show: false,
                            position: "outside",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                // fontSize: "20",
                                // fontWeight: "bold",
                            },
                        },
                    },
                ],
            };

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

    mounted() {
        this.charts = this.$echarts.init(document.getElementById(this.id));

        this.initStateList();

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

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