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

    前言

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

    简述vue的优势

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

     

    ECharts引入项目

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

    npm安装ECharts

    使用命令即可安装

    npm install echarts --save

     按需引入ECharts图表和组件

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

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

    1. import * as echarts from 'echarts/core';
    2. import {
    3.   BarChart,
    4.   // 系列类型的定义后缀都为 SeriesOption
    5.   BarSeriesOption,
    6.   LineChart,
    7.   LineSeriesOption
    8. } from 'echarts/charts';
    9. import {
    10.   TitleComponent,
    11.   // 组件类型的定义后缀都为 ComponentOption
    12.   TitleComponentOption,
    13.   TooltipComponent,
    14.   TooltipComponentOption,
    15.   GridComponent,
    16.   GridComponentOption,
    17.   // 数据集组件
    18.   DatasetComponent,
    19.   DatasetComponentOption,
    20.   // 内置数据转换器组件 (filter, sort)
    21.   TransformComponent
    22. } from 'echarts/components';
    23. import { LabelLayout, UniversalTransition } from 'echarts/features';
    24. import { CanvasRenderer } from 'echarts/renderers';
    25.  
    26. // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
    27. type ECOption = echarts.ComposeOption<
    28.   | BarSeriesOption
    29.   | LineSeriesOption
    30.   | TitleComponentOption
    31.   | TooltipComponentOption
    32.   | GridComponentOption
    33.   | DatasetComponentOption
    34. >;
    35.  
    36. // 注册必须的组件
    37. echarts.use([
    38.   TitleComponent,
    39.   TooltipComponent,
    40.   GridComponent,
    41.   DatasetComponent,
    42.   TransformComponent,
    43.   BarChart,
    44.   LineChart,
    45.   LabelLayout,
    46.   UniversalTransition,
    47.   CanvasRenderer
    48. ]);
    49.  
    50. const option: ECOption = {
    51.   // ...
    52. };

    API

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

    实操

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

     效果图：

    效果图

                                                                     

    实物图：

     

    新建一个工程模块

    analysis.vue

    2.  <div class="line" id="main" style="width:300px;height:350px">
    3.    <el-select v-model="value" placeholder="温湿度折线图" size="mini" clearable @change="selectChange">
    4.      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">el-option>
    5.    el-select>div>
    6.  
    7.