HY.yield.client/src/views/statisticAnalysis/charts/E-EveLevelDis.vue

<template>
    <div class="container">
        <div id="EEveLevelDis" style="height:400px;"></div>
    </div>
</template>

<script>
export default {
    name: "EEveLevelDis",
    data() {
        return {
        };
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("EEveLevelDis")
            );
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "种母羊等级分布情况",
                    left: "center"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{b}: {c} ({d}%)"
                },
                legend: {
                    orient: "horizontal",
                    bottom: 10,
                    data: ["甲级", "乙级", "丙级", "丁级"]
                },
                series: [
                    {
                        type: "pie",
                        // 内外圈厚度
                        radius: ["20%", "60%"],
                        label: {
                            formatter: "{d}%"
                        },
                        data: [
                            { value: 200, name: "甲级" },
                            { value: 300, name: "乙级" },
                            { value: 200, name: "丙级" },
                            { value: 200, name: "丁级" }
                        ],
                        color: [
                            "#3ABAFF",
                            "#72DADA",
                            "#d0b2ff",
                            "#ff8295"
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" scoped>

</style>