huimv.client.demo2/src/views/statisticAnalysis/charts/Eb.vue

<template>
    <div class="Eb">
        <div id="Eb" style="width: 70%;height:400px;"></div>
    </div>
</template>

<script>
export default {
    name: "Eb",
    props: { EValue: Array },
    data() {
        return {
            timeArr: [],
            dataArr1: [],
            dataArr2: []
        };
    },
    watch: {
        EValue(v) {
            this.timeArr = [];
            this.dataArr1 = [];
            this.dataArr2 = [];
            v.forEach(item => {
                this.timeArr.push(item["name"]);
                this.dataArr1.push(item["pregnantCount"]);
                this.dataArr2.push(item["deliveryCount"]);
            });
            this.drawChart();
        }
    },

    created() {},
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("Eb"));
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "怀孕分娩数",
                    left: "center",
                    left: 100
                },
                legend: {
                    orient: "horizontal",
                    bottom: 10,
                    data: ["配种", "分娩"]
                },
                color: ["#3398DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { show: true, readOnly: true },
                        magicType: { show: true, type: ["line", "bar"] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                grid: {
                    left: "10%",
                    right: "10%",
                    bottom: "13%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.timeArr,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        scale: true
                    }
                ],
                series: [
                    {
                        name: "配种",
                        type: "bar",
                        barWidth: "25%",
                        data: this.dataArr1,
                        encode: {
                            x: "amount",
                            y: "product"
                        },
                        markPoint: {
                            data: [
                                { type: "max", name: "最大值" },
                                { type: "min", name: "最小值" }
                            ]
                        },
                        markLine: {
                            data: [{ type: "average", name: "平均值" }]
                        }
                    },
                    {
                        name: "分娩",
                        type: "bar",
                        barWidth: "25%",
                        data: this.dataArr2,
                        color: ["#4CCA73"],
                        encode: {
                            x: "amount",
                            y: "product"
                        },
                        markPoint: {
                            data: [
                                { type: "max", name: "最大值" },
                                { type: "min", name: "最小值" }
                            ]
                        },
                        markLine: {
                            data: [{ type: "average", name: "平均值" }]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

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