### 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` </bcode>`

date
`date: `any` </bcode>`

heightData
`heightData: `any` </bcode>`

weightData
`weightData: `any` </bcode>`

    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 ""