<template>
    <div class="E-Cold-Store">
        <div id="E-Cold-Store" style="height:400px;"></div>
    </div>
</template>

<script>
export default {
    name: "E-Cold-Store",
    props: ["tagId"],
    data() {
        return {};
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("E-Cold-Store"));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{b}: {c} ({d}%)"
                },
                legend: {
                    orient: "horizontal",
                    bottom: 10,
                    textStyle: {
                        fontSize: 15
                    },
                    itemWidth: 15,
                    itemHeight: 15,
                    data: [
                        "未用容量",
                        "已用容量"
                    ]
                },
                color: [
                    "#5DB1FF",
                    "#FF8686"
                ],
                series: [
                    {
                        type: "pie",
                        // 内外圈厚度
                        radius: ["0%", "60%"],
                        label: {
                            formatter: "{bStyle|{b}：}{c}  ({d}%)  ",
                            fontSize: 15,
                            rich: {
                                bStyle: {
                                    fontSize: 16
                                }
                            }
                        },
                        data: [
                            { value: 626, name: "未用容量" },
                            { value: 1568, name: "已用容量" }
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" scoped>
.E-Cold-Store {
    .chart {
        width: 100%;
    }
}
</style>