hy.big_screen/src/views/LvShanXiang/charts/ELeft2.vue

<template>
    <div class="container">
        <div id="ELeft2" style="height:100%;"></div>
    </div>
</template>

<script>
export default {
    name: "ELeft2",
    data() {
        return {};
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("ELeft2"));
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "羊存栏种类",
                    left: "20%",
                    top: "5%",
                    textStyle: {
                        fontSize: 30
                    }
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{b}: {c} ({d}%)",
                    textStyle: {
                        fontSize: 20
                    }
                },
                legend: {
                    orient: "horizontal",
                    bottom: 10,
                    data: ["种母羊", "种公羊", "商品羊", "羔羊"],
                    textStyle: {
                        fontSize: 20
                    }
                },
                series: [
                    {
                        type: "pie",
                        // 内外圈厚度
                        radius: ["20%", "60%"],
                        label: {
                            formatter: "{d}%"
                        },
                        data: [
                            { value: 300, name: "种母羊" },
                            { value: 300, name: "种公羊" },
                            { value: 200, name: "商品羊" },
                            { value: 200, name: "羔羊" }
                        ],
                        color: ["#FFB2FF", "#72DADA", "#3ABAFF", "#FF6A01"],
                        label: {
                            fontSize: 20
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    },
};
</script>

<style lang="scss" scoped>
</style>