huimv.cloud.client/src/views/deviceManagement/deviceHumiture/charts/chart_a.vue

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

<script>
export default {
    data() {
        return {
            series: [],
            optionKeys: [],
            time: []
        };
    },
    props: {
        option: { type: Object }
    },
    created() {},
    watch: {
        option(nVal, oVal) {
            
            this.optionKeys = Object.keys(this.option);
            this.series = [];
            Object.keys(this.option).forEach(key => {
                this.series.push({
                    name: "通道" + key,
                    type: "line",
                    data: this.option[key].data.reverse(),
                    markPoint: {
                        data: [
                            { type: "max", name: "最大值" },
                            { type: "min", name: "最小值" }
                        ]
                    },
                    markLine: {
                        data: [{ type: "average", name: "平均值" }]
                    }
                });
            });
            this.time = this.option[this.optionKeys[0]].time.reverse();

            this.drawChart();
        }
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("chart_a")
            );
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: "温度",
                    // subtext: this.subtext,
                    left: 100
                },
                tooltip: {
                    trigger: "axis",
                    formatter: function(params) {
                        let str = `${params[0].axisValue}`;
                        params.forEach(item => {
                            str += `<br /><span style='width:10px;height:10px;background-color:#f00;border-radius:50%;display: inline-block;margin-right:3px;'></span>${item.seriesName}：${item.value} ℃`;
                        });
                        return str;
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: "none"
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ["line", "bar"] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: "red" // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "blue" // 100% 处的颜色
                        }
                    ]
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.time
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        formatter: "{value} °C"
                    },
                    scale: true
                },
                series: this.series
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

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