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。

相关文章

大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
关于数据埋点，你需要了解这些基本知识

关于数据埋点，你需要了解这些基本知识

产品汪每天都在和数据打交道，你知道数据来自哪里吗？ 移动app端内的用户行为数据大多来自埋点，了解一些埋点知识，能和数据分析师、技术侃大山，参与到前期的数据采集，更重要是让最终的埋点数据能为我所用，否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式，可以区分为： 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理：自动程度高的，能解决通用统计，便于统一化管理，但个性化定
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
异构存储（冷热数据分离）

异构存储（冷热数据分离）

异构存储主要解决不同的数据，存储在不同类型的硬盘中，达到最佳性能的问题。 异构存储Shell操作 （1）查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies （2）为指定路径（数据存储目录）设置指定的存储策略 hdfs storagepolicies -setStoragePo
阅读更多...
Hadoop集群数据均衡之磁盘间数据均衡

Hadoop集群数据均衡之磁盘间数据均衡

生产环境，由于硬盘空间不足，往往需要增加一块硬盘。刚加载的硬盘没有数据时，可以执行磁盘数据均衡命令。（Hadoop3.x新特性） plan后面带的节点的名字必须是已经存在的，并且是需要均衡的节点。 如果节点不存在，会报如下错误： 如果节点只有一个硬盘的话，不会创建均衡计划： （1）生成均衡计划 hdfs diskbalancer -plan hadoop102 （2）执行均衡计划 hd
阅读更多...
好题——hdu2522（小数问题：求1/n的第一个循环节）

好题——hdu2522（小数问题：求1/n的第一个循环节）

好喜欢这题，第一次做小数问题，一开始真心没思路，然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数，不能写作两整数之比*****************************（一开始没想到，小学没学好） 此题1/n肯定是一个有限循环小数，了解这些后就能做此题了。 按照除法的机制，用一个函数表示出来就可以了，代码如下
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
购买磨轮平衡机时应该注意什么问题和技巧

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时，您应该注意以下几个关键点： 平衡精度 平衡精度是衡量平衡机性能的核心指标，直接影响到不平衡量的检测与校准的准确性，从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声，提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮，适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2