前端歌谣-第玖拾捌课-vue2+echarts讲解

前言

我是歌谣 今天来说一个vue2+element的项目

业务的需求点

需求点一 需要保证页面数据得echart的渲染

第一步 安装依赖

npm install --save echarts

引入依赖

import * as echarts from "echarts";

开始程序设计提交的时候调用接口渲染

   //查询表单
    submitForm(formName) {
      console.log(this.$refs[formName], "formName");
      this.$refs[formName].validate((valid) => {
        console.log(this.formInline, "valid");
        if (valid) {
          this.getZheData(this.formInline);
        } else {
          return false;
        }
      });
    },

获取折线图数据

   //获取折线图数据
    getZheData(formInlineData) {
      const { deviceId, productFunId, startTime, endTime } = formInlineData;
      axios
        .get(
          `${BaseUrl}/linechart/querylinechart?deviceId=${deviceId}&productFunId=${productFunId}&startTime=${startTime.getTime()}&endTime=${endTime.getTime()}`
        )
        .then((res) => {
          console.log(res, "111111");
          if (res.data.code === 1) {
            this.setZheData(res.data.data);
            this.showZheData();
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        });
    },

处理数据

//处理数据
    setZheData(datas) {
      const Datax = [];
      const DataY = [];
      datas &&
        datas.map((item, index) => {
          Datax.push(item.x);
        });
      datas &&
        datas.map((item, index) => {
          DataY.push(item.y);
        });
      this.zheOption.xAxis.data = Datax;
      this.zheOption.series.data = DataY;
    },

渲染数据

//渲染dom节点
    showZheData() {
      let myEchart = echarts.init(this.$refs.mychart);
      myEchart.setOption(this.zheOption, true);
    },

需求点贰 axios发起网络请求

请求演示

 axios.get(`${BaseUrl}/linechart/queryDeviceList`, {}).then((res) => {
      console.log(res, "res.data");
      if (res.data.code === 1) {
        this.deviceOptions = res.data.data;
      } else {
        this.$message({
          message: res.data.message,
          type: "error",
        });
      }
    });

需求点3页面绘制和渲染

<template>
  <div>
    <el-form
      :inline="true"
      ref="ruleForm"
      :model="formInline"
      class="demo-form-inline"
      :rules="rules"
    >
      <el-form-item label="设备名称" prop="deviceId">
        <el-select
          @change="handleProductChange"
          v-model="formInline.deviceId"
          placeholder="请选择设备名称"
        >
          <el-option
            v-for="item in deviceOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="测点名称" prop="productFunId">
        <el-select
          v-model="formInline.productFunId"
          placeholder="请选择测点名称"
        >
          <el-option
            v-for="item in productOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          type="date"
          placeholder="选择开始时间"
          v-model="formInline.startTime"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          type="date"
          placeholder="选择结束时间"
          v-model="formInline.endTime"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetForm('ruleForm')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div ref="mychart" id="demoDiv"></div>
  </div>
</template>

运行结果