【若依前后端分离】温湿度仪表盘

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

 示例：

代码：

TemperatureAndHumidity.vue组件

//温湿度仪表盘
<template>
  <div>
    <!-- 在这里放置你的图表组件 -->
    <div ref="echarts" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'TemperatureAndHumidity',
  props: {
    data: {
      type: Object,
      //包含value和text
      required: true
    }
  },


  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const echarts = require('echarts');
      const myChart = echarts.init(this.$refs.echarts);

      var data1 = this.data.data1
      var data2 = this.data.data2

      var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: "#25ABAA",
      },
        {
          offset: 0.2,
          color: "#25ABB4",
        },
        {
          offset: 0.3,
          color: "#FBB8AA",
        },
        {
          offset: 0.5,
          color: "#F89700",
        },

        {
          offset: 1,
          color: "#F63332",
        },
      ]);

      const option ={
          // backgroundColor: "rgba(0,0,0)",
          grid: { // 让图表占满容器
            // height: "80%", // 高度
            // left: "6%",
            // right: "6%",
            bottom: "0%",
            top: "0%",
            // height: "85%",
            containLabel: true,
          },
          tooltip: {
            formatter: "{当前温度}: {c}%",
          },
          series: [
            {
            name: "大的进度条进度条",
            type: "gauge",
            center: ['50%', '45%'],
            radius: "85%",
            splitNumber: 20,
            min: -10, //最小刻度
            max: 60, //最大刻度
            axisLine: {
              lineStyle: {
                color: [
                  [0.2, '#008FFF'],
                  [0.3, '#00A2E8'],
                  [0.4, '#00C3CD'],
                  [0.5, '#00E7BB'],
                  [0.6, '#00E79F'],
                  [0.7, '#8CDC00'],
                  [0.8, '#FFD306'],
                  [0.9, '#FF7D00'],
                  [1, '#ee2e38']
                  // [0.4, '#00A2E8'],
                  // [0.6, '#95EC69'],
                  // [1, '#ee2e38']
                  // [data1 / 60, colorSet.color],
                  // [1, "#5A5A89"],
                ],
                //大刻度盘加宽
                width: 25,
                //图形阴影的模糊大小。会变立体
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                //阴影水平方向上的偏移距离
                shadowOffsetX: 8,
                //阴影垂直方向上的偏移距离。
                shadowOffsetY: 8,
                opacity: 1,
              },
            },
            axisLabel: {
              show: true,
            },
            axisTick: {
              show: true,
            },
              //白色标记长线
            splitLine: {
              show: true,
              //分隔线线长。支持相对半径的百分比
              length: 30,
              distance:20,

            },
            itemStyle: {
              show: false,
            },
            detail: {

              formatter: function (value) {
                if (value !== 0) {
                  //四舍五入
                  // var num = Math.round(value);
                  // return parseInt(num).toFixed(0) + "℃";
                  return value + "℃";
                } else {
                  return 0;
                }
              },
              // offsetCenter: [0, 50],
              offsetCenter: [1, "22%"],

              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 25,
                fontWeight: "400",

                color: "#131313",
              },
            },
            title: {
              //标题
              show: true,
              offsetCenter: [0, '35%'], //设置标题位置
              textStyle: {
                color: "#fff",
                fontSize: 18, //表盘上的标题文字大小
                fontFamily: "PingFangSC",
              },
            },
            data: [{
              // name: "温度",
              value: data1,
            },],
            pointer: {
              show: true,
              length: "80%",
              radius: "15%",
              width: 4, //指针粗细
              color: [
                axislineColor
                  [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0.1,
                  color: "#FFC600"
                },
                  {
                    offset: 0.6,
                    color: "#30D27C"
                  },
                  {
                    offset: 1,
                    color: "#0B95FF"
                  }
                ])]
              ]
            },
            animationDuration: 4000,
          },

            // 下面圆环
            {
              name: "小的内圈",
              type: "gauge",
              radius: "40%",
              center: ['50%', '80%'],
              startAngle: 225,
              endAngle: -45,
              min: 0,
              max: 100,
              axisLine: {
                show: true,
                lineStyle: {
                  // 阴影范围
                  width: 20,
                  color: [
                    [
                      data2 / 100,
                      new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "rgba(69, 161, 255,0)",
                      },
                        {
                          offset: 0.3,
                          color: "rgba(69, 161, 255,0)",
                        },
                        {
                          offset: 1,
                          color: "rgba(69, 161, 255,0.7)",
                        },
                      ]),
                    ],
                    [1, "rgba(28,128,245,.0)"],
                  ],
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: 0,
              },
              axisLabel: {
                show: 0,
              },
              pointer: {
                show: true,
                width: 1,
                length: '60%',
                shadowColor: '#ccc', //默认透明
                shadowBlur: 1,
                shadowOffsetX: 1,
                shadowOffsetY: 3

              },
              detail: {
                show: true,
                offsetCenter: [1, "20%"],
                textStyle: {
                  fontSize: 22,
                  color: "#131313",
                },
                formatter: function (value) {
                  if (value !== 0) {
                    // var num = Math.round(value);
                    // return parseInt(num).toFixed(0) + "%";
                    return value + "%";
                  } else {
                    return 0;
                  }
                },
              },
              itemStyle: {
                color: "rgba(28, 128, 245,.3)",
                borderColor: "rgba(28, 128, 245,1)",
              },
              data: [{
                value: data2,
                // name: '湿度'
              },],
              title: {
                //标题
                show: true,
                offsetCenter: [0, '45%'], //设置标题位置
                textStyle: {
                  color: "#fff",
                  fontSize: 16, //表盘上的标题文字大小
                  fontFamily: "PingFangSC",
                },
              },
            },

            {
              name: "小的外圈",
              type: "gauge",
              radius: "40%",
              center: ['50%', '80%'],
              splitNumber: 4,
              splitLine: {
                show: false,
              },
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  //小的宽度
                  width: 10,
                  color: [
                    // [0.4, '#00A2E8'],
                    // [0.7, '#93FE94'],
                    // [1, '#E0272A']
                    [0.05, "#3F6BFC"],
                    [0.1, "#4072FB"],
                    [0.15, "#4077F9"],
                    [0.2, "#417BF9"],
                    [0.25, "#4282F8"],
                    [0.3, "#4385F7"],
                    [0.35, "#4389F6"],
                    [0.4, "#448FF5"],
                    [0.45, "#4594F4"],
                    [0.5, "#4599F3"],
                    [0.55, "#469EF2"],
                    [0.6, "#46A3F1"],
                    [0.65, "#46A6F0"],
                    [0.7, "#24befe"],
                    [0.75, "#12d1ff"],
                    [0.8, "#06defe"],
                    [0.85, "#05e0ff"],
                    [0.9, "#06deff"],
                    [0.95, "#06deff"],
                    [1, "#06deff"],
                  ],
                },
              },
              pointer: {
                show: 0,
              },
              axisTick: {
                show: true,
              },
              detail: {
                show: false,
              },
            }
          ],
        }
      ;

      myChart.setOption(option);
    }
  }
};
</script>

<style>
/* 这里可以添加样式 */
</style>

主页面调用：

 <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <temperature-and-humidity :data="TemperatureAndHumidityData"/>

        </div>
      </el-col>

<script>
//引用
//温湿度
import TemperatureAndHumidity  from "@/views/dashboard/TemperatureAndHumidity";


export default {

  name: 'Index',
//数据
  data() {
    return {
   
     //温湿度信息
      TemperatureAndHumidityData: {
        data1: 25.4,
        data2:66.6
      }


    }
  },
}
</script>

敲厉害的燕宝
关注
echarts 湿度_优雅的制作一个温湿度计图表
weixin_30896451的博客
11-30 2426
1.有的和想要的有数据：有温度、有湿度想要的：显示在页面某个位置2.期望的优雅期望有一个方法，只需给定温度、湿度与位置，直接生成温湿度计图表。3.来封装一个3.1 先睹风采使用以下方法即可完成图表显示。Gauge.Hygrothermograph('gauge1', 28, 60);效果如下：3.2 使用方式引入echart 和封装的 js ，即可使用 Gauge.Hygrothermograph...
仪表盘显示温度和湿度demo（从串口获取数据）
06-24
自定义view仪表盘显示温度和湿度（仅供参考，具体可根据相关串口协议修改）
Vue+Echarts+API 实现折线图对农地温湿度采集功能
Lushengshi的博客
08-10 1544
农田农作物种植最主要受到的环境因素一般有温度、湿度等等，这两个环境因素的不同，可以影响到农物的生长，所以我们要设计的是一个可以实时获取到现场农田的温湿度的设备--温湿度模块，这里我们就不详述，通过模块可以得到数据，将数据存在后端数据库，实现前后端分离，这样我们只需要将后端那边得到整理好的数据，以我们的方式将它展示出来就好了。...
vue控制台报错Cannot read property ‘_withTask’ of undefined问题
大师兄
06-25 736
原文链接：https://dsx2016.com/?p=1106 公众号：dsx2016 错误日志 控制台报错Cannot read property ‘_withTask’ of undefined 错误原因 遇到这种问题，多半是在template中使用了某个在methods未定义的方法 举个栗子 在div中设置了点击事件响应toggleShow方法 <div @click="toggleShow">test</div> 在method中却没有定义 .
小程序中使用echarts
qq_42661906的博客
06-13 479
小程序中使用echarts需要下载专用插件ec-canvas 链接：https://pan.baidu.com/s/1Kg1x_5iUFIJtvx7l1Zpd4g 提取码：rgjg 下载后引到项目中 这个是echarts官方js，建议根据自己需求定制下载功能下载链接，下载后替换即可，示例中的js为仪表盘功能 在wxml中添加如下代码 <view class="echart_panel" style="height:260rpx;"> <ec-canvas canvasId="mycha
echarts仪表盘的基础配置，附代码，超详细！！！
qq_42506385的博客
10-28 4899
前言 echarts官网 基础配置 看不懂，可以与最后的代码对照看 startAngle 开始角度 endAngle 结束角度 name 鼠标移入显示的名称 radius 仪表盘的在父级中所占的百分比 类似大小 center 仪表盘的位置 pointer 指针样式 width 宽度 length 长度 detail 仪表盘中间数据值默认样式 formatter 数据值 语法类似模板字符串 textStyle 中间文字的大小 offsetCenter 中间值的位置 title 仪表中间标题的
jeannie:用于家庭自动化传感管理的服务器和Web应用程序
05-25
Jeannie的架构基于前后端分离的设计，通过API接口进行通信。后端处理传感器数据的收集、存储和分析，而前端则负责用户界面的展示和交互。用户可以通过Web界面查看传感器状态，设置触发规则，接收报警通知等。 **6. ...
单片机类毕业设计题目汇总
CG0131的博客
11-10 2931
一些单片机类毕业设计、课程设计题目和功能
二建 工业机电
m0_46335782的博客
05-05 3480
　　 　　2H313010　机械设备安装工程施工技术 　　2H313011　机械设备安装程序和要求 　　一、机械设备安装的一般程序 　　机械设备安装的一般程序为：施工准备→设备开箱检查→基础测量放线→基础检查验收→垫铁设置→设备吊装就位→设备安装调整→设备固定与灌浆→零部件清洗与装配→润滑与设备加油→设备试运转→工程验收。 　　【例题】（2012真题）设备吊装就位的紧后工序是（　）。 　　A.设备清洗 　　B.设备灌浆 　　C.设备安装调整 　　D.垫铁安装
机电 考点100
m0_46335782的博客
05-21 4236
考点：安全专项施工方案的审核批准（必考点）：1）编制：施工单位应当在危大工程施工前组织工程技术人员编制专项施工方案；实行施工总承包的，专项施工方案应当由施工总承包单位组织编制；危大工程实行分包的，专项施工方案可以由相关专业分包单位组织编制。2）审批： 专项施工方案应当由施工单位技术负责人审核签字、加盖单位公章，并由总监理工程师审查签字、加盖执业印章后方可实施。3）论证：对于超过一定规模的危大工程，施工单位应当组织召开专家论证会对专项施工方案进行论证。实行施工总承包的，由施工总承包单位组织召开专...
echarts.zip
04-30
echarts.min.js echarts所需的js文件 。
软件测试面试题集锦
闪闪发亮爱技术
03-02 831
文章目录一、基础知识1、什么是软件测试，软件测试的目的是啥？2、什么是测试计划？都包括啥？什么是测试方案，什么是测试策略？测试方案包含哪些内容？测试用例设计方法有哪些？测试用例内容有哪些？3、测试用例为什么需要分级，如何分级别？测试用例需要哪些人来评审？评审的目的是什么？好的测试用例关键点是什么？不能发现BUG的测试用例不是好的测试用例吗？4、测试分为哪几个阶段？5、软件测试类型都有哪些？你进行过哪些测试，擅长什么?6、软件缺陷等级划分7、缺陷生命周期8、测试生命周期9、为什么要进行交叉测试？10、α、β测
Vue3Echarts写关于温湿度统计的好看折线图
最新发布
m0_56164131的博客
07-01 897
【代码】Vue3Echarts写关于温湿度统计的好看折线图。
echarts温湿度实时数据展示
hate_coriander的博客
12-17 1687
echarts温湿度实时数据展示 <template> <div> <div id="chartt" class="chartt" :style="{ width: '100%', height: '230px' }"></div> </div> </template> <script> import { getAction } from '@api/manage' export default {
HTML 中添加视频
qq_34870529的博客
11-21 1398
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
echarts实时温度计&&湿度计
syt5324165的博客
11-22 2240
如何用echarts开发温度计？ 在项目开发中需要用到echarts来开发图表时，一般我都是结合官网示例和百度一些echarts图表样式来开发。在开发过程中，需要显示温度，数字太单调了，结合图表来显示就让页面更既美观又直观。 下面给大家分享一个温度计图表，可以根据自己的UI图去调整样式。
Echarts 实现炫酷仪表盘
热门推荐
早晨阳光一般暖的博客
06-15 1万+
Echarts 实现炫酷仪表盘
ECharts仪表盘(详细示例——附有具体注释)
u012746918的博客
08-19 3001
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 ...
Echarts-仪表盘
MoXinXueWEB的博客
04-26 8176
小菜鸟在摸鱼
echarts 温湿度仪表盘
08-18
你可以使用 echarts 来绘制温湿度的仪表盘。仪表盘图表可以直观地展示温湿度的数值范围和当前数值。以下是一个使用 echarts 绘制温湿度仪表盘的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 温湿度仪表盘</title> <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script> </head> <body> <!-- 创建一个容器来放置图表 --> <div id="chart" style="width: 400px; height: 300px;"></div> <script> // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 准备温湿度数据 var temperature = 25; // 当前温度 var humidity = 60; // 当前湿度 // 配置图表选项 var option = { series: [ { type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 100, splitNumber: 10, axisLine: { lineStyle: { color: [[0.2, '#85C1E9'], [0.8, '#F4D03F'], [1, '#E74C3C']], width: 20 } }, pointer: { width: 5 }, axisTick: { length: 10, lineStyle: { color: 'auto' } }, splitLine: { length: 15, lineStyle: { color: 'auto' } }, title: { textStyle: { fontSize: 14 } }, detail: { textStyle: { fontSize: 18 }, offsetCenter: ['-40%', '70%'], formatter: '{value}%' }, data: [{value: humidity, name: '湿度'}] }, { type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 40, splitNumber: 8, axisLine: { lineStyle: { color: [[0.2, '#85C1E9'], [0.8, '#F4D03F'], [1, '#E74C3C']], width: 20 } }, pointer: { width: 5 }, axisTick: { length: 10, lineStyle: { color: 'auto' } }, splitLine: { length: 15, lineStyle: { color: 'auto' } }, title: { textStyle: { fontSize: 14 } }, detail: { textStyle: { fontSize: 18 }, offsetCenter: ['40%', '70%'], formatter: '{value}°C' }, data: [{value: temperature, name: '温度'}] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 你可以将上述代码保存为一个 HTML 文件，然后在浏览器中打开该文件，即可看到温湿度仪表盘的展示效果。仪表盘分为温度和湿度两个部分，当前数值会在仪表盘上显示，并且根据数值范围显示不同的颜色。你可以根据需要修改温湿度的数值和仪表盘的样式。希望对你有所帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值