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

已于 2023-11-03 16:50:35 修改
阅读量210 收藏
点赞数
文章标签： echarts javascript 前端
于 2023-10-27 15:32:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Coco_998/article/details/134076051
版权

项目场景：

我们的项目是通过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: {
            axisLine: {
                lineStyle: {
                    color:  'rgba(255, 255, 255, 0.8)',
                    width: 1,
                }
            },
            boundaryGap: true,
            show: true,
            type: "time", // 这里使用时间轴模式
         
            axisLabel: {
                showMaxLabel:true,//是否显示x轴的最大值
	            textStyle: {
                   color: 'rgba(255, 255, 255, 0.4)'
                },
                // 格式化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");
                    // } 
                   let  time = moment(value).format('YYYY-MM-DD')
                    if (value === new Date(time+' 23:59:59').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();
               //以上传入其他时间就展示不出来图表
                let  time = moment(value.min!='NaN'?value.min:new Date().getTime()).format('YYYY-MM-DD')
                return new Date(time+' 00:00:00').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();
                 let  time = moment(value.max!='NaN'?value.max:new Date().getTime()).format('YYYY-MM-DD')
                return new Date(time+' 23:59:59').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不刷新问题

简宁909
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts象形柱图实现电量效果柱状图
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
06-14 1481
改造的基本思路：将type由bar变为pictorialBar，再修改设置与pictorialBar相关的配置项即可。看到这几种标记类型还不是很抽象，没关系，我们一个一个看下效果。a.type由bar变为pictorialBar，效果如下。看了这么多，那么我们要用到的是哪一个呢？看下官网例子，你就大概明白每个配置项能实现的效果了，接着再改变一下颜色，设置一下label就完成了。为什么是椭圆效果呢？我们去官网配置项中找答案，因此我们设置一下想要实现效果的配置项。但是，还有一个小细节需要注意，
一种电费一体化抄核收智能管理系统设计-论文
05-10
一种电费一体化抄核收智能管理系统设计
水电费管理软件 宏达水电费管理系统 v1.0 一户多表版
10-16
《水电费管理系统-一户多表版》是一款融合现代水电是一家的实际情况，根据不同的地方存在一户多表收费的流程所研发的一款应用收费的专业软件，软件集成了水电费一户口多表的业
停车场数据可视化分析-毕业设计
01-19 363
数据为某停车场信息表，具体字段信息如下表：| 字段 | 含义 | 字段 | 含义含义含义| cn | 车牌号 | price | 停车所交费用车牌号停车所交费用| timein | 车辆进场时间 | state | 是否已经离场车辆进场时间是否已经离场| timeout | 车辆出场时间 | rps | 当前空余车位数量车辆出场时间当前空余车位数量部分数据展示🚀B站项目实战🤵‍♂代码获取。
echarts 西安地铁热力图,钻取显示每个出口的饼状图
kkkk6547的专栏
11-21 1893
  如图 代码实现： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;地铁热力图&lt;/title&gt; &lt;script src="jquery.min.js"&gt;&l
echarts学习之——电力迁徙图
weixin_30583563的博客
01-11 326
今天主要就是在搞echarts，我们都知道他为我们提供了丰富的api方法，使我们能够迅速的搭建图标。同时他里面还有许多的案例， 其中就有这么一个国内航线模拟迁徙的地图，如下所示： 而我们通常因为各种需求原因，不想要全国地图，而单单想要一个省，或一个市的地图，进行类似模拟迁徙的效果，就比如我接下来要做的这个效果图： 首先第一个案例中的demo代码我就不说了，可以到http://gall...
websocket+vuex+echarts实现智慧矿山动态图表
Teddy0618的博客
09-03 542
最近在做智慧矿山的项目，为保证数据的及时性，决定选用websocket，出于服务器性能的考虑，决定使用一个websocket通道进行多个方面的数据的传送，所以选用vuex对于数据进行集中的管理，以便于一条socket链接，能同时刷新同一项目中的多个组件的数据显示。 具体步骤如下： 1.安装vuex，创建store对象，并在state中定义数据以及在mutations中定义数据提交的方法。 2.建立与后端的websoc...
echarts 24小时内每个时间点的折线图
热门推荐
G4rw4y的散码地
07-31 1万+
前言：之前因为公司业务需要把一天24小时内每一个时刻的数据展示在图表上，于是我去echarts官网找了一下实例，发现最贴近业务需求的一个表它的X轴显示的最少单位是天，不是时分秒。然后我去网上找了很多相关文档都说得不明所以，最后只能经过自己的一番捣鼓，把最终想要的效果给弄出来了。 我先把能直接运行的代码贴出来，然后才说一些大部分人可能会卡住的关键的点 PS：在运行代码前请引入echarts的 js 库 创建一个div <dev id="charts" style="width: 600px;heig.
使用Echart绘制3D饼环图、仪表盘、电池图
qq_46258819的博客
06-20 3116
https://blog.csdn.net/m0_67266787/article/details/123155878 仪表盘 插件引入 echarts.js 效果图 电池图 插件引入 echarts.js 效果图
echarts折线图的数据显示
_江屿_
12-08 1323
echarts折线图的数据显示
echarts 分钟级别数据，X轴显示整点小时数
qq_44844786的博客
12-29 1070
首先先把原X轴隐藏，创建另一条，设置位置为bottom，X轴两边间隔为false，刻度间隔为1。原数据为1分钟级别数据，一共1440条数据，显示在X轴中会有很多杂乱的小时分钟。
电费敏感数据挖掘一: 数据处理与特征工程
12-20
数据筛选1.1 读取数据1.2 加入label值1.3 留下一条工单记录的数据1.4 加载通话数据二. 离散值处理2.1 对离散型数值进行编码2.2 数据编码长度所占比例2.3 时间数据处理2.4 用电方式2.5 城市编码2.6 收费信息表数据三...
一种基于大数据挖掘的电费回收风险预测技术研究.pdf
07-14
一种基于大数据挖掘的电费回收风险预测技术研究.pdf
轻松IC卡一卡通单机版V2.2
10-05
轻松IC卡一卡通单机版V2.2 插卡系列所有都可以
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 415
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1008
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 515
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 303
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 407
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
java写一个电费查询系统，展示源码
04-19
但我可以给你一些建议，您可以使用Java编写一个基于GUI的电费查询系统，该系统可以从数据库中检索数据并对其进行更新，以确保正确的信息被显示。同时，您需要考虑如何使该程序易于使用和易于导航。如果您需要更详细...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值