echarts实时温度计&&湿度计

最新推荐文章于 2024-07-01 14:12:32 发布
最新推荐文章于 2024-07-01 14:12:32 发布
阅读量2.1k 收藏 8
点赞数
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syt5324165/article/details/127981791
版权

如何用echarts开发温度计？
在项目开发中需要用到echarts来开发图表时，一般我都是结合官网示例和百度一些echarts图表样式来开发。在开发过程中，需要显示温度，数字太单调了，结合图表来显示就让页面更既美观又直观。
下面给大家分享一个温度计图表，可以根据自己的UI图去调整样式。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温度计</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>

<body style="height: 250px; margin: 0;width: 500px;">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var params = {
            value: 52,//数值
            title: "温度计"
        }

        var app = {};
        var TP_value = params.value;
        var kd = [];
        var Gradient = [];
        var leftColor = '';
        var showValue = '';
        var boxPosition = [65, 0];
        var TP_txt = ''
        // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
        for (var i = 0, len = 135; i <= len; i++) {
            if (i < 10 || i > 130) {
                kd.push('')
            } else {
                if ((i - 10) % 20 === 0) {
                    kd.push('-3');
                } else if ((i - 10) % 4 === 0) {
                    kd.push('-1');
                } else {
                    kd.push('');
                }
            }

        }
        //中间线的渐变色和文本内容
        if (TP_value > 50) {
            TP_txt = '';
            Gradient.push({
                offset: 0,
                color: '#93FE94'
            }, {
                offset: 0.5,
                color: '#E4D225'
            }, {
                offset: 1,
                color: '#E01F28'
            })
        } else if (TP_value >= 35) {
            TP_txt = '';
            Gradient.push({
                offset: 0,
                color: '#93FE94'
            }, {
                offset: 1,
                color: '#E4D225'
            })
        } else {
            TP_txt = '';
            Gradient.push({
                offset: 1,
                color: '#93FE94'
            })
        }

        leftColor = Gradient[Gradient.length - 1].color;
        // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
        var option = {
            // backgroundColor: '#098',
            // backgroundColor: 'white',
            title: {
                text: params.title,
                textStyle: {
                    color: "#010081",
                    align: "center",
                },
                left: "45%",
            },
            grid: { // 控制图的大小，调整下面这些值就可以，
                left: "30%",
                top: "3%",
                bottom: "14%",
            },
            yAxis: [{
                show: false,
                data: [],
                min: 0,
                max: 135,
                axisLine: {
                    show: false
                }
            }, {
                show: false,
                min: 0,
                max: 50,
            }, {
                type: 'category',
                data: ['', '', '', '', '', '', '', '', '', ''],
                position: 'left',
                offset: -80,
                axisLabel: { // 单位
                    fontSize: 10,
                    color: 'black'
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            }],

            xAxis: [{
                show: false,
                min: -10,
                max: 80,
                data: []
            }, {
                show: false,
                min: -10,
                max: 80,
                data: []
            }, {
                show: false,
                min: -10,
                max: 80,
                data: []
            }, {
                show: false,
                min: -5,
                max: 80,

            }],
            series: [{
                name: '条',
                type: 'bar',
                // 对应上面XAxis的第一个对)象配置
                xAxisIndex: 0,
                data: [{
                    value: (TP_value + 30),//这个改那个颜色刻度的
                    label: {
                        normal: {
                            show: true,
                            position: boxPosition,
                            width: 20,
                            height: 100,
                            formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',
                            rich: {
                                back: {
                                    align: 'center',
                                    lineHeight: 50,
                                    fontSize: 30,
                                    fontFamily: 'digifacewide',
                                    color: leftColor
                                },
                                unit: {
                                    fontFamily: '微软雅黑',
                                    fontSize: 15,
                                    lineHeight: 50,
                                    color: leftColor
                                },
                                downTxt: {
                                    lineHeight: 50,
                                    fontSize: 25,
                                    align: 'center',
                                    color: leftColor
                                }
                            }
                        }
                    },
                }],

                barWidth: 18,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
                    }
                },
                z: 2
            }, {
                name: '白框',
                type: 'bar',
                xAxisIndex: 1,
                barGap: '-100%',
                data: [134],
                barWidth: 18,
                itemStyle: {
                    normal: {
                        color: '#0C2E6D',
                        barBorderRadius: 50,
                    }
                },
                z: 1
            }, {
                name: '外框',
                type: 'bar',
                xAxisIndex: 2,
                barGap: '-100%',
                data: [135],
                barWidth: 28,
                itemStyle: {
                    normal: {
                        color: '#4577BA',
                        barBorderRadius: 50,
                    }
                },
                z: 0
            }, {
                name: '圆',
                type: 'scatter',
                hoverAnimation: false,
                data: [0],
                xAxisIndex: 0,
                symbolSize: 38,
                itemStyle: {
                    normal: {
                        color: '#93FE94',
                        opacity: 1,
                    }
                },
                z: 2
            }, {
                name: '白圆',
                type: 'scatter',
                hoverAnimation: false,
                data: [0],
                xAxisIndex: 1,
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: '#0C2E6D',
                        opacity: 1,
                    }
                },
                z: 1
            }, {
                name: '外圆',
                type: 'scatter',
                hoverAnimation: false,
                data: [0],
                xAxisIndex: 2,
                symbolSize: 60,
                itemStyle: {
                    normal: {
                        color: '#4577BA',
                        opacity: 1,
                    }
                },
                z: 0
            }, {
                name: '刻度',
                type: 'bar',
                yAxisIndex: 0,
                xAxisIndex: 3,
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        distance: 15, // 刻度数据位置
                        color: '#000000',// 刻度数字颜色
                        fontSize: 14,
                        formatter: function (params) {
                            if (params.dataIndex > 130 || params.dataIndex < 10) {
                                return '';
                            } else {
                                if ((params.dataIndex - 10) % 20 === 0) {
                                    return params.dataIndex - 30;//这个改刻度的，当减70的时候刻度是从-60开始不是从零开始
                                } else {
                                    return '';
                                }
                            }
                        }
                    }
                },
                barGap: '-100%',
                data: kd,
                barWidth: 1,
                itemStyle: {
                    normal: {
                        color: '#000000', // 刻度线颜色
                        barBorderRadius: 120,
                    }
                },
                z: 0
            }]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        ;



        // 定时生成随机数，实时刷新数据
        setInterval(function () {
            //debugger
            var rdm = Math.floor(Math.random() * 100);

            var params = {
                value: rdm,//数值
                title: "温度计"
            }

            var Gradient = [];
            //中间线的渐变色和文本内容
            var warnTxt = "";
            if (params.value > 50) {
                Gradient.push(
                    {
                        offset: 0,
                        color: "#93FE94",
                    },
                    {
                        offset: 0.5,
                        color: "#E4D225",
                    },
                    {
                        offset: 1,
                        color: "#E01F28",
                    }
                );
                warnTxt = "温度过高";
            } else if (params.value >= 35) {
                Gradient.push(
                    {
                        offset: 0,
                        color: "#93FE94",
                    },
                    {
                        offset: 1,
                        color: "#E4D225",
                    }
                );
                warnTxt = "温度正常";
            } else {
                Gradient.push({
                    offset: 1,
                    color: "#93FE94",
                });
                warnTxt = "温度过低";
            }

            let leftColor = Gradient[Gradient.length - 1].color;
            var boxPosition = [65, 0];

            myChart.setOption({
                series: [
                    {
                        data: [
                            {
                                value: params.value + 30,
                                label: {
                                    normal: {
                                        show: true,
                                        position: boxPosition,
                                        width: 20,
                                        height: 100,
                                        formatter:
                                            "{back| " +
                                            params.value +
                                            " }{unit|°C}\n{downTxt|" +
                                            " " +
                                            "}",
                                        //formatter:  item.senValue ,
                                        rich: {
                                            back: {
                                                align: "center",
                                                lineHeight: 50,
                                                fontSize: 30,
                                                fontFamily: "digifacewide",
                                                color: leftColor,
                                            },
                                            unit: {
                                                fontFamily: "微软雅黑",
                                                fontSize: 15,
                                                lineHeight: 50,
                                                color: leftColor,
                                            },
                                            downTxt: {
                                                lineHeight: 50,
                                                fontSize: 25,
                                                align: "center",
                                                color: leftColor,
                                            },
                                        },
                                    },
                                },
                                name: params.title,
                            },
                        ],
                    },
                ],
            });
        }, 1000);

    </script>
</body>

</html>

```html
syt5324165探索前端的小菇凉~
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Echarts 实现温度计
朝花夕拾的博客
07-19 1544
【代码】Echarts 实现温度计。
echarts实现温度图
wechatl的博客
03-28 337
echarts实现温度计图
使用React 18、Echarts和MUI实现温度计
m0_73117087的博客
04-08 4300
在本文中，我们将结合使用`React 18`、`Echarts`和`MUI（Material-UI）`库，展示如何实现一个交互性的温度计
Vue3Echarts写关于温湿度统计的好看折线图
最新发布
m0_56164131的博客
07-01 784
【代码】Vue3Echarts写关于温湿度统计的好看折线图。
HTML Echarts图形统计实时显示DHT11温度（四）
weichenyang的博客
08-02 1962
2、NODEMCU基于ESP-12E开发的NodeMcu开发板，以WIFI芯片ESP-8266为核心;传感器DHT11收集温度信息传输至NODEMCU模组，由NODEMCU模组将数据发送至中间件，再由中间件上传上位机进行可视化、持久化。PCB板尺寸32mm*14mm电源指示灯红色;引脚定义VCC(火线)外接3.3V~5V；温度测量范围0℃~50℃误差2℃;工作电压3.3V~5V;温度分辨率1℃;二、开发环境arduino;一、ESP8266读取DHT11。.........
实时温度计(利用echarts)
11-01
利用echarts做的实时温度计，开始数量也可以设置为负数。
echarts温度计
syt5324165的博客
11-22 469
【代码】echarts温度计。
Echarts 做的温度计
飞翔༒之翼
07-04 4584
这个是参考的：https://blog.csdn.net/soldierofyou/article/details/82661263 这位大神是首发，谢谢了！我做了小小的调整 <html lang="en"> <head> <meta charset="UTF-8"> <title>温度计</title> <script ...
echarts 湿度_优雅的制作一个温湿度计图表
weixin_30896451的博客
11-30 2372
1.有的和想要的有数据：有温度、有湿度想要的：显示在页面某个位置2.期望的优雅期望有一个方法，只需给定温度、湿度与位置，直接生成温湿度计图表。3.来封装一个3.1 先睹风采使用以下方法即可完成图表显示。Gauge.Hygrothermograph('gauge1', 28, 60);效果如下：3.2 使用方式引入echart 和封装的 js ，即可使用 Gauge.Hygrothermograph...
Nixie时钟温度计湿度计-电路方案
04-20
使用您的Arduino并构建Nixie时钟，温度计和湿度计。精美的外壳，易于操作。 硬件组件: Arduino UNO和Genuino UNO× 1 盾Arduino - Nixie时钟温度计湿度计× 1 这是如何运作的？
支持实时获取小米蓝牙温度湿度计2数据，并且通过Mqtt上传到云服务器
04-29
## 安装准备 pip3 install bluepy pip3 install paho-mqtt ## 执行命令 python3 mqtt_report_data.py -d -h mqtt.test -i test_locator_gateway -k 60 -p 1883 -u test -P test -v -t "/read-property" ...
仪表盘显示温度和湿度demo（从串口获取数据）
06-24
自定义view仪表盘显示温度和湿度（仅供参考，具体可根据相关串口协议修改）
c#winform温度计控件.rar
04-09
本资源“c#winform温度计控件.rar”提供了一个简易的温度计控件，该控件可以集成到WinForm应用中，以直观地展示温度数据。以下是对这个控件的详细解析： 1. **C# WinForm基础**： C# 是一种面向对象的编程语言，由...
C#Winform温度计控件
04-12
总之，创建一个C# Winform温度计控件涉及到自定义控件的设计、属性定义、绘图逻辑、实时更新机制等多方面的知识。通过理解并实践这一过程，开发者可以更好地掌握Windows Forms的高级特性，并为自己的应用提供更丰富...
echarts 实现温度计
清心寡欲的博客
05-31 2714
echarts 实现温度计，动态加载温度数据，实现效果如下： 注意： 1.代码直接拷贝后缀名改为.html就可以运行了，注意在实际项目应用的时候 src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js" 要修改为项目中的echarts.min.js地址 2.方法setInterval，每1000ms动态生成的随机数据 <!-- THIS EXAMPLE WAS...
echarts实现温度计
YM_010530的博客
01-25 716
【代码】echarts实现温度计。
echart 之实现温度计
weixin_33736832的博客
12-14 1814
百度这个图表支持不是很好，有的需要自己写，看大神们实现温度计都是用 水球特效实现的我这里雕虫小计啊但是满足我了我的项目需求特此分享出来，可惜自己不是专业的前端 这是我的实现结果 好了上代码html： <div id="main" style="width: 400px; height: 400px;"> js代码： ...
echarts的温度计 横竖温度计
qlin_11的博客
05-18 587
这几天写了一下这个温度计，主要是多个bar和scatter拼接而成。横竖的区分，是将x和y的坐标系内容进行替换，再serise里面讲xy的序号进行更改就可以。网上有博客，但介绍的都是竖着的。
Echarts 温度计
soldierofyou的博客
09-12 8472
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;         &lt;title&gt;ECharts&lt;/title&gt;         &lt;!-- 引入 echarts.js --&gt;         &lt;scri
echarts温度湿度仪表盘
05-25
ECharts温度湿度仪表盘是一种基于ECharts的数据可视化组件，可以用于实时显示温度和湿度等环境数据。该组件可以自定义仪表盘的样式，包括仪表盘的大小、颜色、标签和刻度等，还可以自定义数据源和更新频率。通过这个组件，用户可以更加直观地了解当前环境的温湿度情况。 如果您想了解更多关于ECharts温度湿度仪表盘的信息，您可以访问官方网站：https://echarts.apache.org/examples/zh/editor.html?c=gauge。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值