File

src/modules/lesson/echarts-exemple/echarts-exemple.component.ts

Metadata

selector app-echarts-exemple
styleUrls echarts-exemple.component.scss
templateUrl echarts-exemple.component.html

Methods

getWeightData
getWeightData()
Returns: any
getHeightData
getHeightData()
Returns: any
getDate
getDate()
Returns: any
calculateBMI
calculateBMI()
Returns: any

Properties

BMI
BMI: any
date
date: any
heightData
heightData: any
weightData
weightData: any
import * as echarts from 'echarts';
import { AfterViewInit, Component } from '@angular/core';
import * as Parse from "parse"
(Parse as any).serverURL = "http://metapunk.cn:9999/parse"
Parse.initialize("dev")
@Component({
  selector: 'app-echarts-exemple',
  templateUrl: './echarts-exemple.component.html',
  styleUrls: ['./echarts-exemple.component.scss']
})

export class EchartsExempleComponent implements AfterViewInit {
  date: Promise<string[] | null> = this.getDate();
  heightData: Promise<number[] | null> = this.getHeightData();
  weightData: Promise<number[] | null> = this.getWeightData();
  BMI: Promise<number[] | null> = this.calculateBMI();

  // 组件初始化
  async ngAfterViewInit() {
    //第一个echarts表
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        text: '身体数据'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['身高', '体重',]
      },
      // grid: {
      //   left: '3%',
      //   right: '4%',
      //   bottom: '3%',
      //   containLabel: true
      // },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: await this.date
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 250,
      },
      series: [
        {
          name: '身高',
          type: 'line',
          data: await this.heightData
        },
        {
          name: '体重',
          type: 'line',
          data: await this.weightData
        },

      ]
    };
    option && myChart.setOption(option);


    //第二个echarts表
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      title: {
        text: 'BMI'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: await this.date,
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: await this.BMI,
          type: 'line',
          smooth: true,
          markLine: {
            data: [
              { type: 'max', name: '最大值', yAxis: 24.9 },
              { type: 'min', name: '最小值', yAxis: 18.5 }
            ]
          }
        }
      ]
    };
    option && myChart.setOption(option);
  }

  async getWeightData(): Promise<number[] | null> {
    const Upload = Parse.Object.extend("HealthData");
    const query = new Parse.Query(Upload);
    try {
      const result = await query.find();
      if (result.length > 0) {
        const weightDatas = result.map((result) => result.get("weight"));
        console.log("体重数组", weightDatas);
        return weightDatas;
      } else {
        return null;
      }
    } catch (error) {
      console.error("Error:", error);
      return null;
    }
  }

  async getHeightData(): Promise<number[] | null> {
    const Upload = Parse.Object.extend("HealthData");
    const query = new Parse.Query(Upload);
    try {
      const result = await query.find();
      if (result.length > 0) {
        const heightDatas = result.map((result) => result.get("height"));
        console.log("身高数组", heightDatas);
        return heightDatas;
      } else {
        return null;
      }
    } catch (error) {
      console.error("Error:", error);
      return null;
    }
  }

  async getDate(): Promise<string[] | null> {
    const Upload = Parse.Object.extend("HealthData");
    const query = new Parse.Query(Upload);
    query.descending("createdAt");
    try {
      const result = await query.find();
      if (result.length > 0) {
        const Dates = result.map((result) => {
          const date = result.get("createdAt");
          return date.toISOString().split('T')[0];
        }).reverse();
        console.log("日期数组", Dates);
        return Dates;
      } else {
        return null;
      }
    } catch (error) {
      console.error("Error:", error);
      return null;
    }
  }
  async calculateBMI(): Promise<number[] | null> {
    try {
      const heightData: number[] | null = await this.getHeightData();
      const weightData: number[] | null = await this.getWeightData();
      if (heightData === null || weightData === null) {
        return null;
      }
      const bmiData: number[] = [];
      for (let i = 0; i < heightData.length; i++) {
        const heightInMeter: number = heightData[i] / 100; // 将厘米转换为米
        const bmi: number = weightData[i] / (heightInMeter * heightInMeter);
        bmiData.push(bmi);
      }
      console.log(bmiData);
      return bmiData;
    } catch (error) {
      console.error('Error calculating BMI:', error);
      return null;
    }
  }

}

results matching ""

    No results matching ""