<template>
    <charts :eOption="setOption1" v-if="setOption1" style="height: 75px; width: 75px" />
</template>

<script>
let ecData = [
    {
        color: ['#2E9AE2', 'transparent'],
        value: '75',
        value1: '25',
        name: '煤矿运输',
        txt: ''
    },
    {
        color: ['#02FDFE', 'transparent'],
        value: '75',
        value1: '25',
        name: '钢铁运输',
        txt: ''
    },
    {
        color: ['#1EEBBC', 'transparent'],
        value: '75',
        value1: '25',
        name: '其他领域',
        txt: ''
    },
    {
        color: ['#2E9AE2', 'transparent'],
        value: '75',
        value1: '25',
        name: '港口运输',
        txt: ''
    },

]
import Charts from '@/components/selfCP/charts.vue';
export default {
    components: {
        Charts
    },
    props: {
        color: {
            type: String,
            default: '#2E9AE2'
        },
        data: {
            type: Object,
            default: () => {
                return {
                    field: "",
                    proportion: "0"
                }
            }
        }
    },
    data() {
        return {
            setOption1: null,
            value: 0,
            value: 100,
            txt: ''
        }
    },
    mounted() {
        this.value = Number(this.data.proportion.replace('%', ''))
        this.value1 = 100 - this.value

        let that = this
        // 节能减排数据
        this.setOption1 = {
            color: [this.color, 'transparent'],
            tooltip: {
                show: false
            },
            series: [
                {
                    type: 'pie',
                    clockwise: false,
                    radius: [30, 33],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        color: this.color,
                        shadowColor: this.color,
                        shadowBlur: 0,
                        label: {
                            show: true,
                        },
                        labelLine: {
                            show: true,
                        },
                    },
                    emphasis: {
                        scale: false
                    },
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: this.value,
                            name: this.data.field,
                            label: {
                                formatter: function (params) {

                                    let num = that.value;
                                    return ["{a|" + num + "%}", "{b|" + params.name + "}"].join("\n");
                                },
                                rich: {
                                    a: {
                                        color: "#fff",
                                        fontWeight: 500,
                                        fontSize: 16,
                                        lineHeight: 20,
                                        align: "center",
                                    },
                                    b: {
                                        color: "#ccc",
                                        fontSize: 10,
                                    },
                                },
                                position: "center",
                                show: true,
                                fontSize: "20",
                                fontWeight: "bold",
                                color: this.color, //跟随其他颜色
                            },
                            itemStyle: {

                            },
                            emphasis: {
                                itemStyle: {
                                    color: this.color,
                                }
                            },
                        },
                        {
                            value: Number(this.value1),
                            name: '轨道',
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                color: 'transparent',
                            },
                        },
                    ]
                }
            ]
        }
    }
}
</script>

<style></style>