动态 Echarts 温湿度示意图 背景可以随温度变化
2024-05-15 12:19:23
效果展示
源代码（h5）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 初始化移动浏览显示 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 在IE运行最新的渲染模式 --><title>久爱物联网温度曲线示意图</title><style type="text/css">.wdline {height: 300px;min-width: 350px;width: 100% !important;}</style>
</head>
<body><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type='text/javascript'>require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});// 指定图表的配置项和数据初始化数据（如果不写将空白无法推送数据）var dataTM = ['0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0', '0:0:0'];//维度的个数 决定横向坐标轴数量var dataWD =[0,0,0,0,0.0,0,0,0,0,0.0,0,0];var dataSD =[0,0,0,0,0.0,0,0,0,0,0.0,0,0];option = {title: { text: '久爱物联网',//图表标题subtext: 'jiuai.ltd',fontSize: 10,//x:'center'//标题位置定义，默认left}, tooltip: {trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中 //控制提示框内容输出格式axisPointer: {type: 'cross',label: {backgroundColor: '#283b56'}}, formatter: '<font color=#00FFFF>● </font>时间:{b0}<br/><font color=#FF3333>● </font>{a0} {c0}' + '<br/><font color=#53FF53>● </font>{a1} {c1}' },dataZoom: [{show: false,type: 'slider', //支持鼠标滚轮缩放start: 0, //默认数据初始缩放范围为10%到90%end: 100},{show: false,type: 'inside', //支持单独的滑动条缩放start: 0, //默认数据初始缩放范围为10%到90%end: 100}], legend: { //图表上方的类别显示 图例 show:true,data:['温度(℃)','湿度(%)']//必须和 series 中定义的一样},toolbox: {show: true,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},backgroundColor: 'rgba(255,255,255,0.1)',// 背景颜色RGB,透明度0-1xAxis: {type: 'category',//categoryboundaryGap: true,name:'时间轴',splitLine: {show: false},axisLabel: {color: '#fff',fontSize: 12},//data: dataTMdata: (function (){var now = new Date();var res = [];var len = 12;while (len--) {res.unshift(now.toLocaleTimeString('chinese',{hour12:false}).replace(/^\D*/,''));now = new Date(now - 1000);}return res;})() },yAxis: [{type: 'value',name : '温度℃',max: 100,//y轴最大值min: -10,axisLabel : {//y标签格式//color: '#fff',//fontSize: 12,//formatter: '{value} ℃' //y轴显示格式 控制输出格式} },{type: 'value',name : '湿度RH%',max: 100,//y轴最大值min: 0,axisLabel : {//y标签格式//color: '#fff',fontSize: 12,//formatter: '{value} RH%' //y轴显示格式 控制输出格式} }],series: [{name:'温度(℃)',//图例名称data: dataWD,type: 'bar',symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形smooth: true//true 为平滑曲线，false为直线},{name:'湿度(%)',type:'line',// showSymbol: false,symbol:'circle',//去掉折线图中的节点hoverAnimation: true,data:dataSD} ]};require(['echarts','echarts/chart/line',//需要折线图则加载line模块'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载],function (ec) {//if (option && typeof option === "object")myChart = ec.init(document.getElementById('wd_echarts'));myChart.setOption(option);});//定时刷新数据(10秒)appcount=1;setInterval(function () {var option = myChart.getOption();var axisData = (new Date()).toLocaleTimeString('chinese',{hour12:false});//.replace(/^\D*/, '')var data0 = option.series[0].data;//温度var data1 = option.series[1].data;//湿度var dhtwd=(Math.random() * 45 + 1).toFixed(1);//动态更新值data0.shift();//温度data0.push(dhtwd - 0); if(dhtwd<27)option.backgroundColor='rgba(188,188,255,0.8)';//不同温度区域 背景色随着变if(dhtwd>=27)option.backgroundColor='rgba(255,230,205,0.8)';if(dhtwd>=30)option.backgroundColor='rgba(255,200,0,0.8)';if(dhtwd>=35)option.backgroundColor='rgba(255,150,0,0.8)'; data1.shift();//湿度data1.push((Math.random() * 100 + 0).toFixed(1) - 0); option.xAxis[0].data.shift();//x坐标轴option.xAxis[0].data.push(axisData);//固定替换数据区// option.series[0].data = dataWD;// option.series[1].data = dataSD; myChart.setOption(option);//更新}, 5000);</script><center><h3>久爱物联网 Echarts 动态温湿度示意图</h3></center><div id="wd_echarts" class="wdline"></div><div style="color: #dddddd;"><li>久爱物联网 Echarts 动态示意图，可以随温度变背景色的曲线图</li><li>时间轴做了处理支持24小时制（一般随系统格式显示的）更新频率5秒钟</li></div>
</body>
</html>动态更新真实数据的方法
setInterval(function () {var option = myChart.getOption();//var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');//'chinese',{hour12:false}var data0 = option.series[0].data;//温度var data1 = option.series[1].data;//湿度//动态更新曲线图值data0.shift();//温度data0.push(dhtwd);// (Math.random() * 35 + 5).toFixed(1) - 0if(dhtwd<=27)option.backgroundColor='rgba(188,188,255,0.8)';//不同温度区域 背景色随着变if(dhtwd>27)option.backgroundColor='rgba(255,230,205,0.8)';if(dhtwd>30)option.backgroundColor='rgba(255,200,0,0.8)';if(dhtwd>32)option.backgroundColor='rgba(255,150,0,0.8)';data1.shift(); //湿度data1.push(dhtsd); //(Math.random() * 90 + 0).toFixed(1) - 0option.xAxis[0].data.shift(); //x坐标轴option.xAxis[0].data.push(dhttime);//axisData//固定替换数据区(数据必须是数组)// option.series[0].data = dataWD;// option.series[1].data = dataSD; myChart.setOption(option);}, 10000);//更新10s频率可以自己发挥改进！
我的实际应用案例
实现功能及应用说明
动态 Echarts 温湿度示意图 背景可以随温度变化相关推荐
- echarts动态散点图+正弦图背景
echarts动态散点图+正弦图背景: 动态效果视频:动态效果视频链接 代码: // 正弦波背景 function func (x) {x /= 57.2;return Math.sin(x) * 4 ...
- 微信小程序：enablePullDownRefresh、onReachBottomDistance 、动态设置窗口的背景色、动态设置下拉背景字体
一.enablePullDownRefresh 1.下拉刷新enablePullDownRefresh的支持 单页面配置json文件 {"enablePullDownRefresh" ...
- 动态的渐变色网页背景
实现一个动态的渐变色网页背景 一.HTML源码 <!DOCTYPE html> <html lang="zh"><head><meta c ...
- 安卓动态修改系统状态栏背景和文字颜色，以及动态显示或隐藏系统状态栏
关于动态修改系统状态栏背景.字体和图标颜色,以及动态显示或隐藏系统状态栏,一直都是都是许多项目的常规需求.但是,由于不同版本间的兼容性差异,网上的实现方法多种多样.并且,许多方法都会存在这样.那样的不 ...
- vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片 首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码 重点就是:style="{background: ...
- 为什么有时动态设置 View 的背景颜色 BackgroundColor 无效？
项目场景: 为什么有时动态设置 View 的背景颜色 BackgroundColor 无效,不少新手是不是遇到过这个问题呢 问题描述: 前几天朋友问了我一个问题,他直接在activity里动态设置 V ...
- 【Android】动态设置 View 的背景颜色 BackgroundColor 无效的问题
问题描述 我们都知道 setBackgroundColor() 方法用于动态设置 view 的背景颜色.今天在做需求的时候,需要根据情况动态更新自定义 view 的背景颜色,于是就想当然的这么写: m ...
- 微信小程序中使用动态echarts
微信小程序中使用动态echarts,套值可用 1.先在微信开发者工具中创建一个项目 2. 在echarts-for-weixin中下载项目 解压后打开,把ec-canvas文件夹复制到项目pages同 ...
- v-for动态图片列表展示以及动态给div添加背景图片
v-for动态图片列表以及动态给div添加背景图片方法 效果如下图所示: HTML: <div class="branchWorkshop"><ul>< ...
- echarts圆柱形带背景图
项目有时需要我们将二维的柱状图做出立体的感觉出来,这里是将一个数据柱形放在了后面当背景图使用 先给大家看看效果 1. 引入echarts yarn add echaets // 也可以npm下载,看个 ...
最新文章
- PTA 基础编程题目集 7-22 龟兔赛跑 C语言
- xml发展历史和用途
- 给自己提个醒：关于document.getElementsByName无法获取非表单元素
- .NET Core微服务开发选项
- 视频光端机常见问题解决方法
- Android studio如何写滚动视图
- Access-Control-Allow-Origin跨域问题的报错以及解决
- java接口的关键字_java关键字-interface
- 【CodeForces - 471D 】【构造差分kmp】MUH and Cube Walls
- 计算机低级格式化,什么是低级格式化 如何低级格式化磁盘
- SQL Server compute [by]
- springboot系列(二十七):如何实现word携带图片导出？这你得会|超级详细，建议收藏
- 解决：VideoWriter保存视频无法打开以及保存的视频仅有几KB
- WIN 7 系统 问题记录
- UEStudio注册码机 文本编辑器软件v2020.10.21
- Druid连接池开启数据库监控功能
- LBM中的角点处理及部分代码（以D2Q9为例）
- ElasticSearch(六)组合多查询(must, should, must_not, bool, filter)
- GOOGLE工具大全+搜索引擎免费登陆入口
- 网络安全能不能自学?自学能不能学会?