echarts将展示全天的数据,如一天的电费,一个停车场一天的饱和度等问题

news2024/11/17 12:31:21

项目场景：

我们的项目是通过ai识别停车场的停车数,来展示此停车场全天的饱和度,如下
在这里插入图片描述

问题描述

后台接口给的数据,就是这种,返回所有有停车数量的时间段,但是我们的x轴要求展示全天的数据,并且可伸缩刻度展示具体时间的停车情况

[
            {time:'2023-10-27 08:20:20',carSaturation:100,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 09:20:20',carSaturation:60,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 10:20:20',carSaturation:20,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 10:25:20',carSaturation:50,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 10:50:20',carSaturation:70,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 11:10:20',carSaturation:20,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 11:20:20',carSaturation:90,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 11:40:20',carSaturation:0,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 12:50:20',carSaturation:20,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 13:50:20',carSaturation:80,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 14:50:20',carSaturation:30,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 15:50:20',carSaturation:110,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 16:50:20',carSaturation:70,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            ]

自己定义x轴时就会导致x轴与y轴数据关联不上,出现如下的情况

解决方案：

将拿到的数据进行转化,转换为如下格式,才能正常渲染
在这里插入图片描述
第一步:将时间转换为时间戳并转为数组项格式

    dataH.forEach((item,i) => {
            // 将时间转换为时间戳
            item.time = new Date(item.time).getTime()
            let arr = Object.values(item)
            arr.pop()
            xAxisD = arr
            seriesD.push(xAxisD);
        });

第二步:xAxis的属性axisLabel设置格式化显示时间的属性,注意安装插件moment,设置min和max最大和最小值,不然就只展示有数据的时间轴,如下图
在这里插入图片描述
代码如下

 axisLabel: {
                // 格式化x轴显示
                formatter: function(value, index) {
                    // 如果时间是 23:59:59 , 格式化为 24:00
                    if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {
                    return moment(value).format("24:00");
                    } else {
                    // 其他的时间返回格式化 00:00
                    return moment(value).format("HH:mm");
                    }
                }
            },
            interval: 3600 * 2 * 1000, // 设置x轴分隔间隔，我使用的是毫秒时间戳间隔两小时，如使用秒时间戳不需要x1000
            min: function (value) {
                // 设置x轴最小值，为当天00:00:00时时间戳
                // 若想要将time改为x轴数据最小值,则var time = moment(value.min).format('YYYY-MM-DD HH:mm:ss');
                var time = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
                return new Date(time).getTime();
            },
            max: function (value) {
                // 设置x轴最大值，为当天23:59:59时时间戳
                // 若想要将time改为x轴数据最大值,则var time = moment(value.max).format('YYYY-MM-DD HH:mm:ss');
                var time = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                return new Date(time).getTime();
            }

第三步:设置时间轴的缩放及曲线不同值得不同颜色展示

   dataZoom: {
            type: 'inside',  //放大缩小x轴数值
        },

区间值是0-125

visualMap: {
            show:false,
            pieces: [{
                gt: 0,
                lte: 25,
                color: '#87E5FF'
            }, {
                gt: 25,
                lte: 50,
                color: '#FAFF6F'
            },
            {
                gt: 50,
                lte: 100,
                color: '#FF9921'
            },
            {
                gt: 100,
                lte: 125,
                color: '#F83F3F'
            }]
        },

具体的代码如下

<template>
  <div class="echartBox">
    <div
      class="echartT3"
      id="echart"
    ></div>
  </div>
</template>
<script>
import moment from 'moment'; 
import { formatTime } from "@/utils/index.js";
export default {
    data() {
        return {
        };
    },
    props:{
      historyData:{
          type:Array,
          default:[]
      },
    },
    mounted() {
        this.initEchart();
    },
    watch:{
        //观察option的变化
        option: {
        handler(newVal, oldVal) {
            //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
            if (this.myChart) {
                if (newVal) {
                    this.myChart.setOption(newVal);
                } else {
                    this.myChart.setOption(oldVal);
                }
            } else {
                this.initEchart();
            }
        },
        deep: true //对象内部属性的监听，关键。
        }
    },
    computed:{
    option(){
        // let dataH = this.historyData;//后台数据
        let dataH =[
            {time:'2023-10-27 08:20:20',carSaturation:100,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 09:20:20',carSaturation:60,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 10:20:20',carSaturation:20,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 10:25:20',carSaturation:50,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 10:50:20',carSaturation:70,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 11:10:20',carSaturation:20,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 11:20:20',carSaturation:90,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 11:40:20',carSaturation:0,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 12:50:20',carSaturation:20,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 13:50:20',carSaturation:80,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 14:50:20',carSaturation:30,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 15:50:20',carSaturation:110,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
            {time:'2023-10-27 16:50:20',carSaturation:70,analysisImg:require('@/assets/AIRecognition/aiPhoto.png')},
        ]
        let xAxisD=[];
        let seriesD=[];
        dataH.forEach((item,i) => {
            // 将时间转换为时间戳
            item.time = new Date(item.time).getTime()
            let arr = Object.values(item)
            arr.pop()
            xAxisD = arr
            seriesD.push(xAxisD);
        });
      return {
        tooltip: {
            trigger: 'item',
            borderRadius: 8,//边框圆角
            backgroundColor: 'rgba(11, 66, 131, 1)',//背景颜色（此时为默认色）
            borderColor: 'rgba(11, 66, 131, 1)',
            formatter: function(params) { 
                var res = formatTime(params.data[0])+'&nbsp;'+'停车饱和度:'+params.data[1]+'%'+'<br/>';  //电厂名称
                dataH.forEach(ite=>{
                    if(ite.time == params.data[0]){
                        res+="<img style='width:139px;height:79px;' src='"+ ite.analysisImg+"'/>";
                    }
                })
                return res;  
            },
            textStyle:{color:'#ffff',align:'center',fontSize: 18,}					
        },
        grid: {
            top: '30%',
            left: '2%',
            right: '3%',
            bottom: '8%',
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.4)'
                },
            },  
            axisLine: {
                lineStyle: {
                    color:  'rgba(255, 255, 255, 0.8)',
                    width: 1,
                }
            },
            boundaryGap: true,
            show: true,
            type: "time", // 这里使用时间轴模式
            axisLabel: {
                // 格式化x轴显示
                formatter: function(value, index) {
                    // 如果时间是 23:59:59 , 格式化为 24:00
                    if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {
                    return moment(value).format("24:00");
                    } else {
                    // 其他的时间返回格式化 00:00
                    return moment(value).format("HH:mm");
                    }
                }
            },
            interval: 3600 * 2 * 1000, // 设置x轴分隔间隔，我使用的是毫秒时间戳间隔两小时，如使用秒时间戳不需要x1000
            min: function (value) {
                // 设置x轴最小值，为当天00:00:00时时间戳
                // 若想要将time改为x轴数据最小值,则var time = moment(value.min).format('YYYY-MM-DD HH:mm:ss');
                var time = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
                return new Date(time).getTime();
            },
            max: function (value) {
                // 设置x轴最大值，为当天23:59:59时时间戳
                // 若想要将time改为x轴数据最大值,则var time = moment(value.max).format('YYYY-MM-DD HH:mm:ss');
                var time = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
                return new Date(time).getTime();
            }
        },
        dataZoom: {
            type: 'inside',  //放大缩小x轴数值
        },
        yAxis: {
            name:'饱和度（%）',
			type:'value',
            nameTextStyle: {
                color: "#fff",
                nameLocation: "start",
            },
            min:0, //y轴的最小值
            max:125, //y轴最大值 
            interval:25, //值之间的间隔
            type: 'value',
            splitLine :{
                lineStyle:{
                    type:'dashed',//虚线
                    color: 'rgba(255, 255, 255, 0.4)'
                },
                show: true //隐藏
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.4)'
                }
            },  
        },
        visualMap: {
            show:false,
            pieces: [{
                gt: 0,
                lte: 25,
                color: '#87E5FF'
            }, {
                gt: 25,
                lte: 50,
                color: '#FAFF6F'
            },
            {
                gt: 50,
                lte: 100,
                color: '#FF9921'
            },
            {
                gt: 100,
                lte: 125,
                color: '#F83F3F'
            }]
        },
        series: [
            {
                data:seriesD,
                type: 'line',
                smooth: false,//折线是直线还是曲线
                legend:{
                    show:false,
                },
            }, 
          ],
        }
     }
    },
    methods: {
        initEchart(){
            this.myChart = this.$echarts.init(document.getElementById('echart'));
            this.myChart.setOption(this.option);
        },
    }
};
</script>
<style scoped lang="scss">
.echartT3 {
  height: 130px;
  width: 100%;
}
</style>

引入及使用请参考博客echart的数据渲染，option不刷新问题

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1142514.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue的双向绑定的原理，和angular的对比

vue的双向绑定的原理，和angular的对比

目录 前言 Vue的双向绑定用法 代码 Vue的双向绑定原理 Angular的双向绑定用法 代码 Angular的双向绑定原理 理解 图片 关于Vue的双向绑定原理和与Angular的对比&#xff0c;我们可以从以下几个方面进行深入探讨&#xff1a; 前言 双向绑定是现代前端框架的核心特性之…
阅读更多...
【sql】sql中true，false 和 null之间and、or运算的理解。

【sql】sql中true，false 和 null之间and、or运算的理解。

select true and null "tan",false and null "fan",true or null "ton",false or null "fon";结果如下&#xff1a; 怎么理解呢&#xff1f; 很简单&#xff0c;把null当做介于true和false中间的值&#xff0c;也就是如果true1,false…
阅读更多...
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。

npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。

1、在vscode终端执行 get-ExecutionPolicy &#xff0c;显示Restricted&#xff0c;说明状态是禁止的。 2、更改状态: set-ExecutionPolicy RemoteSigned 出现需要管理员权限提示&#xff0c;可选择执行 Set-ExecutionPolicy -Scope CurrentUser 出现的ExecutionPolicy参数后输…
阅读更多...
《ATTCK视角下的红蓝对抗实战指南》一本书构建完整攻防知识体系

《ATTCK视角下的红蓝对抗实战指南》一本书构建完整攻防知识体系

一. 网络安全现状趋势分析 根据中国互联网络信息中心&#xff08;CNNIC&#xff09;发布的第51次《中国互联网络发展状况统计报告》&#xff0c;截至2022年12月&#xff0c;我国网民规模为10.67亿&#xff0c;互联网普及率达75.6%。我国有潜力建设全球规模最大、应用渗透最强的…
阅读更多...
【AI视野·今日NLP 自然语言处理论文速览 第五十七期】Wed, 18 Oct 2023

【AI视野·今日NLP 自然语言处理论文速览 第五十七期】Wed, 18 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Wed, 18 Oct 2023 Totally 82 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers VeRA: Vector-based Random Matrix Adaptation Authors Dawid Jan Kopiczko, Tijmen Blankevoort, Yuki Marku…
阅读更多...
使用 RAG、Langchain 和 Streamlit 制作用于文档问答的 AI 聊天机器人

使用 RAG、Langchain 和 Streamlit 制作用于文档问答的 AI 聊天机器人

在这篇文章中&#xff0c;我们将探索创建一个简单但有效的聊天机器人&#xff0c;该机器人根据上传的 PDF 或文本文件的内容响应查询。该聊天机器人使用 Langchain、FAISS 和 OpenAI 的 GPT-4 构建&#xff0c;将为文档查询提供友好的界面&#xff0c;同时保持对话上下文完整。…
阅读更多...
EtherCAT转Profinet协议网关使西门子和倍福的PLC实现通讯的方法

EtherCAT转Profinet协议网关使西门子和倍福的PLC实现通讯的方法

通过倍福PLC协议&#xff0c;远创智控YC-ECTM-PN网关能与倍福系列的PLC进行通信&#xff0c;一起探索下如何操作吧。 1.网关通过网线和倍福 PLC、电脑进行连接&#xff0c;如果网口不够&#xff0c;可以使用交换机连接。 开VS软件&#xff0c;新建一个工程&#xff0c;选择对应…
阅读更多...
mac idea 解决0% classes 0% lines covered不显示，非快捷键办法

mac idea 解决0% classes 0% lines covered不显示，非快捷键办法

问题如下 网上说了一堆快捷键&#xff0c;冲突了用不了&#xff0c;页面按下面这样点就可以了点击no coverage就行了
阅读更多...
高并发下的缓存击穿、雪崩、穿透和分布式锁(三)

高并发下的缓存击穿、雪崩、穿透和分布式锁(三)

一.缓存穿透 概念&#xff1a; 去查询缓存和数据库都不存在的数据&#xff0c;然后大量请求不存在的数据&#xff0c;导致数据库压力过大崩溃。 解决方案&#xff1a; 把不存在的数据null存入缓存&#xff0c;并给个短期的过期时间。 二.缓存雪崩 概念&#xff1a; 缓存采用…
阅读更多...
树莓派 Qt中 QCameraInfo 无法使用

树莓派 Qt中 QCameraInfo 无法使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、QCameraInfo 是什么&#xff1f;二、使用步骤1.测试代码2.解决方案2.1输入命令2.2输出 3. 成功打印了摄像头的信息 总结 前言 提示&#xff1a;这里可以添…
阅读更多...
苹果秋季发布会官宣，新款Mac将搭载M3芯片，来势迅猛！

苹果秋季发布会官宣，新款Mac将搭载M3芯片，来势迅猛！

苹果宣布将于 10 月 31 日上午 8 点&#xff08;北京时间&#xff09;举行发布会&#xff0c;这次发布会的主题是「来势迅猛」&#xff0c;旨在为全球的苹果粉丝和科技爱好者带来令人期待的新品发布。这次发布会引人瞩目&#xff0c;因为它将聚焦在 Mac 系列产品以及全新的 M3 …
阅读更多...
Spring源码解析-注册配置信息

Spring源码解析-注册配置信息

1、注册方法概述 register(componentClasses) 注册配置类的信息。其中componentClasses 为传入的配置类class。 通过AnnotatedBeanDefinitionReader 的register(this.reader.register(componentClasses))方法。AnnotatedBeanDefinitionReader 已经注册了系统自带的处理器以及方…
阅读更多...
程序化广告系列之一---名词解释

程序化广告系列之一---名词解释

基础 1、DSP&#xff1a;全称“Demand-Side Platform”&#xff0c;需求方平台&#xff0c;是为广告主、代理商提供一个综合性的管理平台&#xff0c;通过统一界面管理多个数字广告和数据交换账户。 2、SSP&#xff1a;SSP是Sell-Side Platform的缩写&#xff0c;即供应方平台…
阅读更多...
边缘计算技术的崭新篇章：赋能未来智能系统

边缘计算技术的崭新篇章：赋能未来智能系统

边缘计算是近年来云计算和物联网技术发展的重要趋势。通过将数据处理和分析从云端迁移到设备边缘&#xff0c;边缘计算能够实现更低的延迟和更高的数据安全。本文将探索边缘计算技术的最新进展及其在不同行业中的应用场景。 1. 实时数据处理与决策 在需要快速响应的场景中&…
阅读更多...
电脑技巧：Win10飞行模式相关知识介绍

电脑技巧：Win10飞行模式相关知识介绍

目录 一、飞行模式简介 二、如何开关Windows 10中的飞行模式 方法一&#xff1a;使用硬件开关 方法二&#xff1a;使用Windows 10操作中心 方法三&#xff1a;使用Windows 10设置 三、飞行模式开关被卡住、变灰或不工作时怎么办 什么是 Windows 10 飞行模式? 用户如何打…
阅读更多...
matlab simulink ADRC控制样例

matlab simulink ADRC控制样例

1、内容简介 略 3-可以交流、咨询、答疑 2、内容说明 用adrc控制传递函数&#xff0c;保证输出达到预期 ADRC控制器、传递函数 3、仿真分析 4、参考论文 略
阅读更多...
计算机网络重点概念整理-第六章 应用层【期末复习|考研复习】

计算机网络重点概念整理-第六章 应用层【期末复习|考研复习】

第六章 应用层 【期末复习|考研复习】 计算机网络系列文章传送门&#xff1a; 第一章 计算机网络概述 第二章 物理层 第三章 数据链路层 第四章 网络层 第五章 传输层 第六章 应用层 第七章 网络安全 计算机网络整理-简称&缩写 文章目录 第六章 应用层 【期末复习|考研复习…
阅读更多...
（一）MySQL-架构

（一）MySQL-架构

一、MySQL逻辑架构 中间是MySQL的核心服务&#xff0c;包括查询分析、优化、缓存及所有的内置函数(日期、时间、数据等)&#xff0c;所有跨存储的引擎的功能都在这一层实现&#xff1a;存储过程、触发器、视图等。 存储引擎负责MySQL中的存储和提取。服务器通过A…
阅读更多...
数字孪生与智慧城市：开启未来智慧生活

数字孪生与智慧城市：开启未来智慧生活

在数字时代的浪潮中&#xff0c;数字孪生技术和智慧城市的理念相互交织&#xff0c;共同塑造了一个更智能、更可持续、更宜居的未来。数字孪生是一项前沿技术&#xff0c;将虚拟世界与现实世界相融合&#xff0c;为城市管理者和市民带来了前所未有的机遇和便捷。 数字孪生模型是…
阅读更多...
AD原理图如何转换为OrCAD原理图？

AD原理图如何转换为OrCAD原理图？

在电子工程领域&#xff0c;原理图是用于描述电路设计的重要工具&#xff0c;虽然Altium Designer&#xff08;AD&#xff09;和OrCAD都是广泛使用的原理图绘制工具&#xff0c;但他们之间存在一定的差异&#xff0c;因此如果你遇见了需要将AD原理图转为OrCAD原理图&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023