HY.yield.client/src/views/device/charts/EHHumidity.vue

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

<script>
export default {
    name: "EHHumidity",
    data() {
        return {};
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("EHHumidity"));
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "湿度-小时折线表",
                    left: "center",
                    bottom: 0
                },
                color: ["#7c92f7"],
                
                tooltip: {
                    trigger: "axis"
                },
                xAxis: {
                    type: "category",
                    data: [0, 2, 4, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        formatter: "{value} %"
                    },
                    scale: true
                },
                series: [
                    {
                        name: '湿度',
                        data: [66, 68, 67.2, 64, 60.5, 68, 67, 67.5, 63.8, 64.8, 67, 62, 67.8],
                        type: "line",
                        markPoint: {
                            data: [
                                { type: "max", name: "最大值" },
                                { type: "min", name: "最小值" }
                            ]
                        },
                        symbol: '',
                        markLine: {
                            data: [{ type: "average", name: "平均值" }]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

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