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

2023-10-28 09:15
文章标签 数据 问题 展示 一天 echarts 停车场 电费 全天 饱和度

本文主要是介绍echarts将展示全天的数据,如一天的电费,一个停车场一天的饱和度等问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目场景：

我们的项目是通过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 = arrseriesD.push(xAxisD);});

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

 axisLabel: {// 格式化x轴显示formatter: function(value, index) {// 如果时间是 23:59:59 , 格式化为 24:00if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {return moment(value).format("24:00");} else {// 其他的时间返回格式化 00:00return moment(value).format("HH:mm");}}},interval: 3600 * 2 * 1000, // 设置x轴分隔间隔，我使用的是毫秒时间戳间隔两小时，如使用秒时间戳不需要x1000min: 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"><divclass="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 = arrseriesD.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:00if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {return moment(value).format("24:00");} else {// 其他的时间返回格式化 00:00return moment(value).format("HH:mm");}}},interval: 3600 * 2 * 1000, // 设置x轴分隔间隔，我使用的是毫秒时间戳间隔两小时，如使用秒时间戳不需要x1000min: 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不刷新问题

这篇关于echarts将展示全天的数据,如一天的电费,一个停车场一天的饱和度等问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/292227。

相关文章

SpringBoot分段处理List集合多线程批量插入数据方式

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案：通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建
阅读更多...
线上Java OOM问题定位与解决方案超详细解析

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,：本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具
阅读更多...
PHP轻松处理千万行数据的方法详解

PHP轻松处理千万行数据的方法详解

《PHP轻松处理千万行数据的方法详解》说到处理大数据集,PHP通常不是第一个想到的语言,但如果你曾经需要处理数百万行数据而不让服务器崩溃或内存耗尽,你就会知道PHP用对了工具有多强大,下面小编就... 目录问题的本质php 中的数据流处理：为什么必不可少生成器：内存高效的迭代方式流量控制：避免系统过载一次性
阅读更多...
C#实现千万数据秒级导入的代码

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很
阅读更多...
Vue3绑定props默认值问题

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1：使用 defineProps 定义 Props步骤2：设置默认值总结前言使用T
阅读更多...
MyBatis-plus处理存储json数据过程

MyBatis-plus处理存储json数据过程

《MyBatis-plus处理存储json数据过程》文章介绍MyBatis-Plus3.4.21处理对象与集合的差异：对象可用内置Handler配合autoResultMap,集合需自定义处理器继承F... 目录1、如果是对象2、如果需要转换的是List集合总结对象和集合分两种情况处理，目前我用的MP的版本
阅读更多...
Three.js构建一个 3D 商品展示空间完整实战项目

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,：本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可
阅读更多...
GSON框架下将百度天气JSON数据转JavaBean

GSON框架下将百度天气JSON数据转JavaBean

《GSON框架下将百度天气JSON数据转JavaBean》这篇文章主要为大家详细介绍了如何在GSON框架下实现将百度天气JSON数据转JavaBean,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言一、百度天气jsON1、请求参数2、返回参数3、属性映射二、GSON属性映射实战1、类对象映
阅读更多...
Web服务器-Nginx-高并发问题

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2
阅读更多...
解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

《解决升级JDK报错:modulejava.basedoesnot“opensjava.lang.reflect“tounnamedmodule问题》SpringBoot启动错误源于Jav... 目录问题描述原因分析解决方案总结问题描述启动sprintboot时报以下错误原因分析编程异js常是由Ja
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2