echarts 实现温度计

最新推荐文章于 2024-04-08 14:14:23 发布
最新推荐文章于 2024-04-08 14:14:23 发布
阅读量2.6k 收藏 14
点赞数
文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ying456baby/article/details/125068477
版权

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 DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 250px; margin: 0;width: 500px;">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

  <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>

---清心寡欲---
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 实现温度计
朝花夕拾的博客
07-19 1470
【代码】Echarts 实现温度计。
echarts实现动态打点效果
11-08
修改网上资料实现Echarts动态打点效果，每3秒刷新一个点
基于HTML5的canvas的温度计 jQuery
04-13
简单实用的jQuery温度计插件，基于HTML5的canvas实现，只需要修改相应的参数即可实现不同大小，不同颜色，不同量程的温度计
使用React 18、Echarts和MUI实现温度计
最新发布
m0_73117087的博客
04-08 4147
在本文中，我们将结合使用`React 18`、`Echarts`和`MUI（Material-UI）`库，展示如何实现一个交互性的温度计
Echarts实现心电图走势
02-22
Echarts实现心电图走势，实时刷新数据，非常实用！
html5 canvas容器温度计特效
11-06
html5 canvas容器温度计特效 html5 canvas容器温度计特效
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多
实时温度计(利用echarts)
11-01
利用echarts做的实时温度计，开始数量也可以设置为负数。
echarts温度计
syt5324165的博客
11-22 442
【代码】echarts温度计。
（转载）echarts实现温度计
大橙子
02-21 8686
首先放上效果图 &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 做的温度计
飞翔༒之翼
07-04 4410
这个是参考的：https://blog.csdn.net/soldierofyou/article/details/82661263 这位大神是首发，谢谢了！我做了小小的调整 <html lang="en"> <head> <meta charset="UTF-8"> <title>温度计</title> <script ...
echarts温度折线统计图
11-08
echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图
jQuery绘制温度计
01-19
jQuery动态绘制温度计，体积小，很漂亮，喜欢的记得下载点赞哦
js实现的温度计
12-19
如果想实现温度计的效果 1.首先将层拖动到温度计图片上作为温度计的指针 2.在文本框中填写温度值 3.填写完之后单击一下文本框 观察温度计的变化 4.温度计2为可直接运行的
Echarts 温度计
soldierofyou的博客
09-12 8390
&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组件开发(43)水球图svg温度计动画
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-08 365
SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。具体来说，SVG图形是可伸缩的矢量图形，其图像质量不会因放大或改变尺寸而损失。在SVG中，可以创建和修改图像、对图像进行搜索和索引、对其进行脚本化或压缩。此外，SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。在创建SVG图形的过程中，可以使用各种方法来绘制路径、框、圆、文本和图形图像。例如，通过使用。
echart图表之温度计 bar 温度计超出范围颜色爆红
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
12-21 225
温度计，带有刻度的温度计，当超过一定温度范围出现爆红效果
echarts的温度计 横竖温度计
qlin_11的博客
05-18 546
这几天写了一下这个温度计，主要是多个bar和scatter拼接而成。横竖的区分，是将x和y的坐标系内容进行替换，再serise里面讲xy的序号进行更改就可以。网上有博客，但介绍的都是竖着的。
Echarts温度计 原生
weixin_44042792的博客
11-01 368
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="http://lib.baomitu.com/echarts/5.0.2/echarts.common.js""&...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值