Vue+Echarts+API 实现折线图对农地温湿度采集功能

简介: 农田农作物种植最主要受到的环境因素一般有温度、湿度等等,这两个环境因素的不同,可以影响到农物的生长,所以我们要设计的是一个可以实时获取到现场农田的温湿度的设备--温湿度模块,这里我们就不详述,通过模块可以得到数据,将数据存在后端数据库,实现前后端分离,这样我们只需要将后端那边得到整理好的数据,以我们的方式将它展示出来就好了。

前言

   农田农作物种植最主要受到的环境因素一般有温度、湿度等等,这两个环境因素的不同,可以影响到农物的生长,所以我们要设计的是一个可以实时获取到现场农田的温湿度的设备--温湿度模块,这里我们就不详述,通过模块可以得到数据,将数据存在后端数据库,实现前后端分离,这样我们只需要将后端那边得到整理好的数据,以我们的方式将它展示出来就好了。

简述vue的优势

  1. 控件自动可以和数据模块进行绑定,当数据发送到后台后,可以调用到 data 函数里面的数据值,而不需要使用 ID 来获取控件里面的值,对控件的赋值也更加方便。简单而言,只需改变 data 里面的值,就可以将复杂的网页界面操作,转换为对 数据进行操作。
  2. 页面传值更加的方便,VUE 可以直接将参数值保存在对象里面,在通过子组件的属性存储到一个对 象里面进行使用就可以了。
  3. 模块化开发和模块化更新。比如在本系统设计中一个列表页面里面有添加的功 能需求、有修改功能需求。
  4. 操作简单,使用终端命令即可进行需求安装等操作,一般只需要使用 NPM 命令,即可进行终端安装。

2345_image_file_copy_147.jpg

ECharts引入项目

此次开发环境是使用npm等包管理工具,并使用Webpack等打包工具进行构建。

npm安装ECharts

使用命令即可安装

npm install echarts --save

按需引入ECharts图表和组件

可以暗战相应的代码引入ECharts中所有的图表和组件,加入你不想引入所有组件,也可以使用ECharts提供的按需引入的接口来打包必须的组件。

对于使用TypeScript开发的,可以使用组合矗最小的EChartsOption类型,这个更严格的类型可以有效的帮助检查矗是否家在了组件或者图表。

import * as echarts from 'echarts/core';
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from 'echarts/charts';
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
const option: ECOption = {
  // ...
};

API

API 接口一种应用程序的编程式接口, 是一种提供于系统开发与软硬件之间桥梁作用的作用,API 接口封装简单、具有模块化、 使用方便无需进行访问即可进行调用的特点。在农业管理系统中,下图为数据信息下流动过程图:

2345_image_file_copy_148.jpg

实操

        我们要做的是,将获取到的农田现场采集的温湿度数据信息进行前端界面化展示,该模块的功能主要是结合ECharts图表,这个可以直接去官网搜索就好了,里面有各式各样的图形模块,然后最终展示出来的结果是可以通过点击温湿度折线图显示具体的时间段数据信息。

效果图:

2345_image_file_copy_149.jpg

实物图:

2345_image_file_copy_150.jpg

新建一个工程模块

analysis.vue

<!-- 折线图部分,名字class称为line折线的意思-->
 <div class="line" id="main" style="width:300px;height:350px">
   <el-select v-model="value" placeholder="温湿度折线图" size="mini" clearable @change="selectChange">
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
   </el-select></div>
<script>
import * as echarts from 'echarts'
</scripr>
// 折线图
    var option = {
      title: {
        text: '温湿度'
      },
      legend: {
        show: true,
        data: ['温度℃', '湿度%']
      },
      xAxis: {
        type: 'category',
        //样式是x轴的样式为cate样式
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
        //里面的数据为周一到周天的全部数据
      },
      //这里是将y轴设计成左边是温度,右边是湿度这样的形式
      yAxis: [{
        type: 'value',
        name: '温度℃',
        max: 100,
        min: 0
      }, {
        type: 'value',
        name: '湿度%',
        max: 100,
        min: 0
      }],
      //设计温度和湿度进行的数据报表,设计的形式以line线的形式进行设计
      series: [{
        name: '温度℃',
        data: [41, 37.5, 39.4, 36.5, 40.3, 39, 42],
        type: 'line',
      }, {
        name: '湿度%',
        data: [50, 60, 65, 66, 60, 70, 76],
        type: 'line'
      }],
      //添入一个功能,当鼠标指到折线图上的点的位置的时候,就可以在图上显示他们相应位置的数值
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'cross',
           label: {
             backgroundColor: '#6a7985'
           }
         },
       }
    }
    myChart.setOption(option)
  },

记得在相应的.js文件里进行调用就好了。

相关文章
|
4月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
76 4
|
19天前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
40 10
|
4月前
|
JavaScript API
vue中api统一管理
【10月更文挑战第4天】
|
1月前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
48 8
|
2月前
|
人工智能 数据可视化 API
自学记录鸿蒙API 13:Calendar Kit日历功能从学习到实践
本文介绍了使用HarmonyOS的Calendar Kit开发日程管理应用的过程。通过API 13版本,不仅实现了创建、查询、更新和删除日程等基础功能,还深入探索了权限请求、日历配置、事件添加及查询筛选等功能。实战项目中,开发了一个智能日程管理工具,具备可视化管理、模糊查询和智能提醒等特性。最终,作者总结了模块化开发的优势,并展望了未来加入语音助手和AI推荐功能的计划。
167 1
|
3月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
3月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
2月前
|
JSON 供应链 搜索推荐
某东API接口:开启电商数据交互与功能调用的新篇章
在当今的数字化时代,电商平台的开放API(Application Programming Interface,应用程序编程接口)已经成为连接开发者与电商平台之间的重要桥梁。京东作为中国领先的电商平台之一,其开放平台提供的API接口更是为开发者们带来了无限可能。本文将深入探讨京东API接口的功能、应用场景、使用流程以及其在电商领域的重要价值。
|
3月前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
|
3月前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验

热门文章

最新文章