huimv.client.demo2/src/views/deliveryRoomManagement/detail/charts/EEleT.vue

<template>
    <div class="EEleT">
        <div id="EEleT" style="width: 100%;height:300px;"></div>
    </div>
</template>

<script>
export default {
    name: "EEleT",
    props: {
        dataArr: { type: Array },
        timeArr: { type: Array }
    },
    data() {
        return {};
    },
    watch: {
        dataArr() {
            this.drawChart();
        }
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("EEleT"));
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "电池电量",
                    left: 100
                },
                tooltip: {
                    trigger: "axis"
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: "none"
                        },
                        dataView: { readOnly: true },
                        magicType: { type: ["line", "bar"] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: "rgb(14,182,195)" // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "rgb(14,182,195)" // 100% 处的颜色
                        }
                    ]
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.timeArr
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        formatter: "{value} %"
                    },
                    scale: true,
                    max: val => {
                        if (val.max + 5 > 100) {
                            return 100;
                        } else {
                            return val.max + 5;
                        }
                    },
                    min: val => {
                        if (val.min - 10 < 0) {
                            return 0;
                        } else {
                            return val.min - 10;
                        }
                    }
                },
                series: [
                    {
                        name: "时间",
                        type: "line",
                        data: this.dataArr,
                        markPoint: {
                            data: [
                                { type: "max", name: "最大值" },
                                { type: "min", name: "最小值" }
                            ]
                        },
                        markLine: {
                            data: [{ type: "average", name: "平均值" }]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

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