Echarts 做的温度计

最新推荐文章于 2024-04-08 14:14:23 发布
最新推荐文章于 2024-04-08 14:14:23 发布
阅读量4.5k 收藏 21
点赞数 11
分类专栏： echarts图表相关 文章标签： Echarts做的温度计
原文链接：https://blog.csdn.net/soldierofyou/article/details/82661263
版权

这个是参考的：https://blog.csdn.net/soldierofyou/article/details/82661263
这位大神是首发，谢谢了！我做了小小的调整

 <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>温度计</title>
    	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    </head>
    <body>
    	 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main11" style="width: 460px;height:360px;"></div>
    </body>
     <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main11'));
    
                var TP_value = 95;
                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 > 80) {
                    TP_txt = '温度偏高';
                    Gradient.push({
                        offset: 0,
                        color: '#93FE94'
                    }, {
                        offset: 0.5,
                        color: '#E4D225'
                    }, {
                        offset: 1,
                        color: '#E01F28'
                    })
                } else if(TP_value > 10) {
                    TP_txt = '温度正常';
                    Gradient.push({
                        offset: 0,
                        color: '#93FE94'
                    }, {
                        offset: 1,
                        color: '#E4D225'
                    })
                } else {
                    TP_txt = '温度偏低';
                    Gradient.push({
                        offset: 1,
                        color: '#93FE94'
                    })
                }
               /*  if(TP_value > 62) {
                    showValue = 62
                } else {
                    if(TP_value < -60) {
                        showValue = -60
                    } else {
                        showValue = TP_value
                    }
                }
                if(TP_value < -10) {
                    boxPosition = [65, -120];
                } */
                leftColor = Gradient[Gradient.length - 1].color;
                // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
                var option = {
                    backgroundColor: '#098',
                    title: {
                        text: '温度计',
                        show: false
                    },
                     yAxis: [{
                        show: false,
                        data: [],
                        min: 0,
                        max: 135,
                        axisLine: {
                            show: false
                        }
                    }, {
                        show: false,
                        min: 0,
                        max: 50,
                    }, {
                        type: 'category',
                        data: ['', '', '', '', '', '', '', '', '', '', '°C'],
                        position: 'left',
                        offset: -80,
                        axisLabel: {
                            fontSize: 10,
                            color: 'white'
                        },
                        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 + 10),//这个改那个颜色刻度的
                            label: {
                                normal: {
                                    show: true,
                                    position: boxPosition,
                                    /*backgroundColor: {
                                        image: 'plugin/subway_beijing/images/power/bg5Valuebg.png',//文字框背景图
                                    },*/
                                    width: 40,
                                    height: 100,
                                    formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}',
                                    rich: {
                                        back: {
                                            align: 'center',
                                            lineHeight: 50,
                                            fontSize: 40,
                                            fontFamily: 'digifacewide',
                                            color: leftColor
                                        },
                                        unit: {
                                            fontFamily: '微软雅黑',
                                            fontSize: 15,
                                            lineHeight: 50,
                                            color: leftColor
                                        },
                                        downTxt: {
                                            lineHeight: 50,
                                            fontSize: 25,
                                            align: 'center',
                                            color: '#fff'
                                        }
                                    }
                                }
                            }
                        }],
    
                        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: 28,
                        itemStyle: {
                            normal: {
                                color: '#0C2E6D',
                                barBorderRadius: 50,
                            }
                        },
                        z: 1
                    }, {
                        name: '外框',
                        type: 'bar',
                        xAxisIndex: 2,
                        barGap: '-100%',
                        data: [135],
                        barWidth: 38,
                        itemStyle: {
                            normal: {
                                color: '#4577BA',
                                barBorderRadius: 50,
                            }
                        },
                        z: 0
                    }, {
                        name: '圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 0,
                        symbolSize: 48,
                        itemStyle: {
                            normal: {
                                color: '#93FE94',
                                opacity: 1,
                            }
                        },
                        z: 2
                    }, {
                        name: '白圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 1,
                        symbolSize: 60,
                        itemStyle: {
                            normal: {
                                color: '#0C2E6D',
                                opacity: 1,
                            }
                        },
                        z: 1
                    }, {
                        name: '外圆',
                        type: 'scatter',
                        hoverAnimation: false,
                        data: [0],
                        xAxisIndex: 2,
                        symbolSize: 70,
                        itemStyle: {
                            normal: {
                                color: '#4577BA',
                                opacity: 1,
                            }
                        },
                        z: 0
                    }, {
                        name: '刻度',
                        type: 'bar',
                        yAxisIndex: 0,
                        xAxisIndex: 3,
                        label: {
                            normal: {
                                show: true,
                                position: 'left',
                                distance: 10,
                                color: 'white',
                                fontSize: 14,
                                formatter: function(params) {
                                    if(params.dataIndex > 130 || params.dataIndex < 10) {
                                        return '';
                                    } else {
                                        if((params.dataIndex - 10) % 20 === 0) {
                                            return params.dataIndex - 10;//这个改刻度的，当减70的时候刻度是从-60开始不是从零开始
                                        } else {
                                            return '';
                                        }
                                    }
                                }
                            }
                        },
                        barGap: '-100%',
                        data: kd,
                        barWidth: 1,
                        itemStyle: {
                            normal: {
                                color: 'white',
                                barBorderRadius: 120,
                            }
                        },
                        z: 0
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>
    </html>
**1.温度计的刻度 目前不需要负数 该如何修改？**

    if(params.dataIndex > 130 || params.dataIndex &lt; 10) {
                                        return '';
                                    } else {
                                        if((params.dataIndex - 10)   === 0) {
                                            return params.dataIndex - 70;
                                        } else {
                                            return '';
                                        }
                                    }
                                }

把-70改成-10，就是从0开始的刻度了
2.你要改上面的东西对应的这里要改

 series: [{
                    name: '条',
                    type: 'bar',
                    // 对应上面XAxis的第一个对)象配置
                    xAxisIndex: 0,
                    data: [{
                        value: (TP_value + 10),//这个改那个颜色刻度的
                        label: {
                            normal: {
                                show: true,

我把上面的那个data里的value:(showValue + 10)改为value:(TP_value + 10) 了就可以控制那个刻度上升了，还有就是我把showValue 相关的注释了
在这里插入图片描述
这是我的项目中的截图：在这里插入图片描述

var myChart = echarts.init(document.getElementById('main14'));

            var TP_value = 40;
            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 > 80) {
                TP_txt = '';
                Gradient.push({
                    offset: 0,
                    color: '#93FE94'
                }, {
                    offset: 0.5,
                    color: '#E4D225'
                }, {
                    offset: 1,
                    color: '#E01F28'
                })
            } else if(TP_value > 10) {
                TP_txt = '';
                Gradient.push({
                    offset: 0,
                    color: '#93FE94'
                }, {
                    offset: 1,
                    color: '#E4D225'
                })
            } else {
                TP_txt = '';
                Gradient.push({
                    offset: 1,
                    color: '#93FE94'
                })
            }
           /*  if(TP_value > 62) {
                showValue = 62
            } else {
                if(TP_value < -60) {
                    showValue = -60
                } else {
                    showValue = TP_value
                }
            }
            if(TP_value < -10) {
                boxPosition = [65, -120];
            } */
            leftColor = Gradient[Gradient.length - 1].color;
            // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
            var option = {
                // backgroundColor: '#098',
                title: {
                    text: '温度计',
                    show: false
                },
                 yAxis: [{
                    show: false,
                    data: [],
                    min: 0,
                    max: 135,
                    axisLine: {
                        show: false
                    }
                }, {
                    show: false,
                    min: 0,
                    max: 50,
                }, {
                    type: 'category',
                    data: ['', '', '', '', '', '', '', '', '', '', '°C'],
                    position: 'left',
                    offset: -80,
                    axisLabel: {
                        fontSize: 10,
                        color: 'white'
                    },
                    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: '#fff'
                                    }
                                }
                            }
                        }
                    }],

                    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: 28,
                    itemStyle: {
                        normal: {
                            color: '#0C2E6D',
                            barBorderRadius: 50,
                        }
                    },
                    z: 1
                }, {
                    name: '外框',
                    type: 'bar',
                    xAxisIndex: 2,
                    barGap: '-100%',
                    data: [135],
                    barWidth: 38,
                    itemStyle: {
                        normal: {
                            color: '#4577BA',
                            barBorderRadius: 50,
                        }
                    },
                    z: 0
                }, {
                    name: '圆',
                    type: 'scatter',
                    hoverAnimation: false,
                    data: [0],
                    xAxisIndex: 0,
                    symbolSize: 48,
                    itemStyle: {
                        normal: {
                            color: '#93FE94',
                            opacity: 1,
                        }
                    },
                    z: 2
                }, {
                    name: '白圆',
                    type: 'scatter',
                    hoverAnimation: false,
                    data: [0],
                    xAxisIndex: 1,
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: '#0C2E6D',
                            opacity: 1,
                        }
                    },
                    z: 1
                }, {
                    name: '外圆',
                    type: 'scatter',
                    hoverAnimation: false,
                    data: [0],
                    xAxisIndex: 2,
                    symbolSize: 70,
                    itemStyle: {
                        normal: {
                            color: '#4577BA',
                            opacity: 1,
                        }
                    },
                    z: 0
                }, {
                    name: '刻度',
                    type: 'bar',
                    yAxisIndex: 0,
                    xAxisIndex: 3,
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            distance: 10,
                            color: 'white',
                            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: 'white',
                            barBorderRadius: 120,
                        }
                    },
                    z: 0
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

这个是参考的：https://blog.csdn.net/soldierofyou/article/details/82661263
这位大神是首发，谢谢了！我做了小小的调整

奋斗的小鸟鸟
关注
  • 11
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
专栏目录
实时温度计(利用echarts)
11-01
利用echarts做的实时温度计，开始数量也可以设置为负数。
echarts双正x轴显示温度湿度
qq_44272892的博客
10-22 726
新手程序员一枚 最近接到一个需求，要求实现echarts在同一个x轴上，左边显示温度，右边显示湿度，原型图如下 脑壳疼！！！！！，经过不断的查看echarts官方文档，终于也是解决了这个问题 实现效果图如下 代码如下 var environBaroption= { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' , ...
使用React 18、Echarts和MUI实现温度计
最新发布
m0_73117087的博客
04-08 4264
在本文中，我们将结合使用`React 18`、`Echarts`和`MUI（Material-UI）`库，展示如何实现一个交互性的温度计
echarts温度计
syt5324165的博客
11-22 455
【代码】echarts温度计。
echarts 实现温度计
清心寡欲的博客
05-31 2689
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...
vue控制台报错Cannot read property ‘_withTask’ of undefined问题
大师兄
06-25 722
原文链接：https://dsx2016.com/?p=1106 公众号：dsx2016 错误日志 控制台报错Cannot read property ‘_withTask’ of undefined 错误原因 遇到这种问题，多半是在template中使用了某个在methods未定义的方法 举个栗子 在div中设置了点击事件响应toggleShow方法 <div @click="toggleShow">test</div> 在method中却没有定义 .
HTML Echarts图形统计实时显示DHT11温度（四）
weichenyang的博客
08-02 1955
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。.........
物联网温湿度计网站部署
06-05
网站通过使用php读取数据，并通过Echarts进行数据图表展示。 三、本代码部署，最好有一台属于自己的服务器，通过外网访问内容，分享之后你会非常快乐。本代码中有需要自行填写的部分我都进行了标记。 四、适用人群：...
QWebEngineView_Js.rar
11-21
- `index.html`：包含ECharts温度计图表的HTML文件，调用`window.qt`对象的方法来控制温度。 5. **运行和调试**：压缩包中的可执行文件可以直接运行，查看温度计的控制效果。同时，你可以通过调试源代码来理解交互...
Echarts 各种树形，条形，饼状，适量图，地图，气表，时钟等，网页中有对应的JSP代码
12-06
6. **仪表盘图**（gauge）：这种图表常用于模拟仪表盘界面，如速度计、温度计等，展示单一指标的数值状态。 7. **时钟图**（clock）：ECharts还提供了动态时钟图，可以实时显示当前时间，适用于监控系统或其他需要...
仪表盘显示温度和湿度demo（从串口获取数据）
06-24
自定义view仪表盘显示温度和湿度（仅供参考，具体可根据相关串口协议修改）
jQuery绘制温度计
01-19
jQuery动态绘制温度计，体积小，很漂亮，喜欢的记得下载点赞哦
echarts温度折线统计图
11-08
echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图
Eharts资源包，包含一些实例源码
06-02
- 仪表盘（gauge）：展示数值指标，如温度计、速度表等。 3. **ECharts交互功能** - 鼠标悬停提示：通过`tooltip`配置，可以在鼠标悬停在数据点上时显示详细信息。 - 图例筛选：用户可以通过点击图例开关，控制...
echarts温度计柱状图效果实现
童童童彤
12-14 4008
现在官网有部分的温度计图，但是很多都是一个温度计，最近工作过程中遇到了一个需要有很多温度计的柱状图，并且还要根据不同字段的值来改变每个温度计的颜色，稍微研究了一下，这里面的实现方式在这里给大家简单讲解一下吧。 我也很烦那些写了半天的话，代码还是零零散散的，那我就话不多说直接上整体代码吧（里面有讲解，肯定还有可以优化的地方，望大家多多指导） var echartOption = { thermometer: function (data, tagId, color) { let barSerise =
智慧天气系统 - 可视化大屏（Echarts）&管理系统（HTTP(S)协议）&物联网平台（MQTT协议）
YYDataV的博客
12-09 6398
主要技术栈 数据可视化Echarts；管理系统VUE框架； HTTP服务Python Django ，Python Flask； MQTT 物联网服务 Mosquitto；支持主流的MQTT云服务厂商对接：阿里云物联网平台，EMQ物联网平台等； 数据库 Mysql；支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite等，还可以定制其它类型数据库； 部署在阿里云主机；支持腾讯云主机，华为云主机，亚马逊云主机等主流云平台，或者私有化部署。
HTML5实现仪表盘、温度计等插件实用源码
abc_1114的博客
03-21 1696
转载于:https://www.cnblogs.com/kkdn/p/8616187.html

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值