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

<script>
export default {
    name: "E-Cost",
    props: ["tagId"],
    data() {
        return {};
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("E-Cost"));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{b}: {c} ({d}%)"
                },
                legend: {
                    orient: "horizontal",
                    bottom: 10,
                    textStyle: {
                        fontSize: 15
                    },
                    itemWidth: 15,
                    itemHeight: 15,
                    data: [
                        "购买成本",
                        "运输成本",
                        "饲料成本",
                        "人工成本",
                        "消毒成本",
                        "折旧成本",
                        "水电费",
                        "排酸损耗"
                    ]
                },
                color: [
                    "#FF6A26",
                    "#3BFFDF",
                    "#FFB2FF",
                    "#3FCCFF",
                    "#5C7CFF",
                    "#DA37B0",
                    "#FF8686",
                    "#A550F4"
                ],
                series: [
                    {
                        type: "pie",
                        // 内外圈厚度
                        radius: ["0%", "60%"],
                        label: {
                            formatter: "{bStyle|{b}：}{c}  ({d}%)  ",
                            fontSize: 15,
                            rich: {
                                bStyle: {
                                    fontSize: 16
                                }
                            }
                        },
                        data: [
                            { value: 626, name: "购买成本" },
                            { value: 337, name: "运输成本" },
                            { value: 459, name: "饲料成本" },
                            { value: 200, name: "人工成本" },
                            { value: 46, name: "消毒成本" },
                            { value: 200, name: "折旧成本" },
                            { value: 212, name: "水电费" },
                            { value: 123, name: "排酸损耗" }
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

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