echarts实现温度图

最新推荐文章于 2024-06-14 11:21:57 发布
最新推荐文章于 2024-06-14 11:21:57 发布
阅读量289 收藏 1
点赞数 2
文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wechatl/article/details/137117739
版权
本文介绍了如何使用EChartsJavaScript图表库在网页上创建一个模拟温度计的动态柱状图，通过代码展示了如何设置数据、颜色渐变和文本显示等功能。
摘要由CSDN通过智能技术生成 
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta http-equiv="Strict-Transport-Security" content="max-age=31536000; includeSubDomains; preload">
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="author" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10" />
   
    <!-- 引入 echarts.js -->
     <script src="/plugin/echarts3/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 400px;height:460px;"></div>
    <script type="text/javascript">
        //准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var TP_value = 60;
        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 > 20) {
            TP_txt = '温度偏高';
            Gradient.push({
                offset: 0,
                color: '#93FE94'
            }, {
                offset: 0.5,
                color: '#E4D225'
            }, {
                offset: 1,
                color: '#E01F28'
            })
        } else if(TP_value > -20) {
            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: '#0C2F6F',
            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: (showValue + 70),
                    label: {
                        normal: {
                            show: true,
                            position: boxPosition,
                            backgroundColor: {
                                image: 'plugin/subway_beijing/images/power/bg5Valuebg.png',//文字框背景图
                            },
                            width: 200,
                            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 - 70;
                                } else {
                                    return '';
                                }
                            }
                        }
                    }
                },
                barGap: '-100%',
                data: kd,
                barWidth: 1,
                itemStyle: {
                    normal: {
                        color: 'white',
                        barBorderRadius: 120,
                    }
                },
                z: 0
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
小星星小雪雪
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
echarts 时间曲线图_web前端显示设备实时温度，ECharts实现温度折线图，实时动态温度曲线图生成...
weixin_35133814的博客
12-29 2460
web前端显示设备实时温度，具体步骤如下：1.在页面中引入ECharts文件echarts-all.js2.在body中为ECharts准备一个具备大小(宽高)的Dom3.具体JS代码如下：// 基于准备好的dom，初始化echarts图表var myChart = echarts.init(document.getElementById('main'));//折线图数据var option = ...
echarts温度折线统计图
11-08
echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图
心率血氧体温模拟Echarts图
最新发布
hjs_xxq的博客
06-14 161
这是一段模拟数据，真实数据根据后端返回的数据处理。
JS，统计图表大全－－七、拖拽 Drag
懒虫的博客
01-22 493
七、拖拽 Drag 代码： var symbolSize = 20; var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]]; option = { title: { text: 'Try Dragging these Points' }, tooltip: { ...
JS MQTT
qq_41122667的博客
10-18 259
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> ```javascript var options = {            //...
echarts温度计
syt5324165的博客
11-22 453
【代码】echarts温度计。
HTML Echarts图形统计实时显示DHT11温度（一）
weichenyang的博客
08-02 303
HTML Echarts图形统计实时显示DHT11温度（以ESP8266为核心）
Echarts 实现温度计图标展示
qq_45567515的博客
05-01 2484
参考的:https://blog.csdn.net/soldierofyou/article/details/8266126 首先需要引入echarts.js function getChart(value) { var TP_value = value; var kd = []; var Gradient = []; var leftColor = ''; var showValue = ...
echarts的温度计 横竖温度计
qlin_11的博客
05-18 570
这几天写了一下这个温度计，主要是多个bar和scatter拼接而成。横竖的区分，是将x和y的坐标系内容进行替换，再serise里面讲xy的序号进行更改就可以。网上有博客，但介绍的都是竖着的。
实时温度计(利用echarts)
11-01
利用echarts做的实时温度计，开始数量也可以设置为负数。
基于Vue和Echarts实现的天气查询和家居设备控制app
05-16
1. 天气查询： 用户可以通过应用实时获取所在位置的天气情况，包括温度、湿度、风速等详细信息，并支持多地点查询。 2. 家居设备控制： 用户可以通过应用远程控制家中的智能设备，如智能灯光、空调、窗帘等，实现...
ifreecharts生成复杂表单，体温单，有折线图，表格等的图片；
05-16
ifreecharts生成复杂表单，体温单，有折线图，表格等的图片；然后将图片转化为PDF可供前台下载、打印、预览；
echarts2.0热力图实例
09-30
在ECharts中，热力图常用于地图上的温度分布、网页点击率分布等场景，让数据的可视化效果更为直观。 **一、热力图的基本结构** ECharts热力图由多个单元格组成，每个单元格对应一个数据点，颜色的深浅代表了数据的...
echarts 地图
03-29
在实际应用中，ECharts地图可以用于展示地理分布数据，如人口、GDP、温度等。通过颜色编码或大小标注，可以直观地看到不同地区的差异。同时，ECharts还支持自定义地图，用户可以导入自己的地图JSON数据，满足个性化...
echarts 实现温度计
清心寡欲的博客
05-31 2685
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图表展示OneNet温度数据（附小程序源码）2022-11-20
浅笑醉红楼
12-05 7890
基于微信小程序的ECharts展示OneNet平台温度数据
漏刻有时数据可视化Echarts组件开发(2):根据温度阈值显示不同颜色的温度报警动画
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
02-14 496
封装函数 //构建DOM容器; function getTemp(data, id) { var myChart = echarts.init(document.getElementById(id)); var unit = '℃'; var svgPath = 'path://M570,729.5V86.4c0-42.2-31.4-76.4-70-76.4s-70,34.2-70,76.4v643c-41.7,24.3-70,68.9-70,12.
vue中使用echarts实现省市地图绘制，根据数据显示省市天气图标及温度信息
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
12-28 1408
vue中使用echarts实现省市地图绘制，根据数据不同显示不同天气图标；显示省市的温度信息等数据。本文以吉林省地图为例，来实现吉林省下所有市的天气显示效果。你也可以显示中国地图或其他身份地图。原理是一样的哦。主要是通过label里面的formatter和rich来自定义样式的，在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
（转载）echarts实现温度计
大橙子
02-21 8751
首先放上效果图 &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; &am
echarts温度气象图
11-08
Echarts温度气象图是一种基于Echarts可视化库实现的气象数据可视化图表，可以展示温度、空气质量、降水量、湿度等气象数据。在Echarts中，可以通过设置不同的图表类型、样式、颜色等属性来实现温度气象图的定制化展示。同时，Echarts还支持在图表中添加交互式元素，如数据提示框、缩放、拖拽等，方便用户进行数据分析和比较。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小星星小雪雪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值