风向风速 功能展现

xufenglei

2018-07-30 89ba2c7490a743e383f3c991d993291dc9120b4c

 src/app/routes/forecasting-warning/forecasting-warning.component.ts

@@ -19,9 +19,10 @@


  }

  [x: string]: any;



  
  public isShow = true;

  colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];

  
  public option = {

    title: {

      text: '',

@@ -56,6 +57,113 @@
      }

    ]

  };

  windOption = {

    title: {

      text: '气象小时预报(风向)',

      left: 'center'

    },

    tooltip: {

      trigger: 'axis',

      axisPointer: {

        type: 'cross'

      },

      formatter: function(params) {

        const directionName = {

          W: '西',

          WSW: '西南偏西',

          SW: '西南',

          SSW: '西南偏南',

          S: '南',

          SSE: '东南偏南',

          SE: '东南',

          ESE: '东南偏东',

          E: '东',

          ENE: '东北偏东',

          NE: '东北',

          NNE: '东北偏北',

          N: '北',

          NNW: '西北偏北',

          NW: '西北',

          WNW: '西北偏西',

        };

        return [

          params[0].value[0],

          '风速：' + params[0].value[1] + '节',

          '风向：' + directionName[params[0].value[2]]

        ].join('<br>');

      }

    },

    xAxis: {

      type: 'category',

      boundaryGap: true

    },

    yAxis: {

      name: '风速（节）'

    },

    series: [

      {

        type: 'custom',

        renderItem: this.renderArrow,

        data: [],

        z: 10

      }, {

        type: 'line',

        smooth: true,

        symbol: 'none',

        itemStyle: {

          color: '#6e7074'

        },

        lineStyle: {

          normal: {

//            type: 'dotted'

          }

        },

        areaStyle: {

          normal: {}

        },

        data: [],

        z: 1

      }

    ]

  };

  renderArrow(param, api) {

    const directionMap = {};

    const direction = ['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'];

    
    direction.forEach((data, i) => {

      directionMap[data] = Math.PI / 8 * i;

    });



    const dims = {

      time: 0,

      windSpeed: 1,

      R: 2

    };

    const arrowSize = 18;

    const point = api.coord([

      api.value(dims.time),

      api.value(dims.windSpeed)

    ]);



    return {

      type: 'path',

      shape: {

        pathData: 'M31 16l-15-15v9h-26v12h26v9z',

        x: -arrowSize / 2,

        y: -arrowSize / 2,

        width: arrowSize,

        height: arrowSize

      },

      rotation: directionMap[api.value(dims.R)],

      position: point,

      style: api.style({

        stroke: '#555',

        lineWidth: 1

      })

    };

  }





  public type = 'warning';

  ngOnInit() {

    this.initWarning();

@@ -79,6 +187,7 @@
    const pressure = [];

    const uvi = [];

    const title = '气象小时预报';

    const windDirDatas = [];

    zip(

      this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=forecast15days'),

      this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=forecast24hours')

@@ -91,7 +200,9 @@
            humidity.push(data.humidity);

            pressure.push(data.pressure);

            uvi.push(data.uvi);

            this.option.xAxis.data.push(data.date.substring(data.date.length - 2) + '日' + data.hour + '时');

            const formatTime = data.date.substring(data.date.length - 2) + '日' + data.hour + '时';

            windDirDatas.push([formatTime, data.windSpeed, data.windDir]);

            this.option.xAxis.data.push(formatTime);

          }

        });

        const forecasting_tempChart = echarts.init(document.getElementById('forecasting_temp'));

@@ -99,7 +210,6 @@
        this.option.yAxis.name = '单位：℃';

        this.option.series[0].data = temp;

        this.option.series[0].itemStyle.color = this.colors[0];
        forecasting_tempChart.setOption(this.option, false);

        window.onresize = forecasting_tempChart.resize;



        const forecasting_humidityChart = echarts.init(document.getElementById('forecasting_humidity'));

        this.option.title.text = title + '(湿度)';

@@ -107,7 +217,6 @@
        this.option.series[0].data = humidity;

        this.option.series[0].itemStyle.color = this.colors[1];

        forecasting_humidityChart.setOption(this.option, false);

        window.onresize = forecasting_humidityChart.resize;



        const forecasting_pressureChart = echarts.init(document.getElementById('forecasting_pressure'));

        this.option.title.text = title + '(气压)';

@@ -115,7 +224,6 @@
        this.option.series[0].data = pressure;

        this.option.series[0].itemStyle.color = this.colors[2];

        forecasting_pressureChart.setOption(this.option, false);

        window.onresize = forecasting_pressureChart.resize;



        const forecasting_uviChart = echarts.init(document.getElementById('forecasting_uvi'));

        this.option.title.text = title + '(紫外线)';

@@ -123,7 +231,11 @@
        this.option.series[0].data = uvi;

        this.option.series[0].itemStyle.color = this.colors[3];

        forecasting_uviChart.setOption(this.option, false);

        window.onresize = forecasting_uviChart.resize;



        const forecasting_windChart = echarts.init(document.getElementById('forecasting_wind'));

        this.windOption.series[0].data = windDirDatas;

        this.windOption.series[1].data = windDirDatas;

        forecasting_windChart.setOption(this.windOption, false);



        const daydatas = daysRes['data'].forecast;

        const temp_day = [];

@@ -160,7 +272,15 @@
          }

        };

        forecasting_temp_dayChart.setOption(this.option, false);

        window.onresize = forecasting_temp_dayChart.resize;



        window.addEventListener('resize', function() {

          forecasting_tempChart.resize();

          forecasting_humidityChart.resize();

          forecasting_pressureChart.resize();

          forecasting_uviChart.resize();

          forecasting_windChart.resize();

          forecasting_temp_dayChart.resize();

        });

      });

  }



@@ -189,7 +309,6 @@
      this.option.series[0].data = PM2_5;

      this.option.series[0].itemStyle.color = this.colors[0];

      warning_PM25Chart.setOption(this.option, false);

      window.onresize = warning_PM25Chart.resize;



      const warning_PM10Chart = echarts.init(document.getElementById('warning_PM10'));

      this.option.title.text = title + '(PM10)';

@@ -197,7 +316,6 @@
      this.option.series[0].data = PM10;

      this.option.series[0].itemStyle.color = this.colors[1];

      warning_PM10Chart.setOption(this.option, false);

      window.onresize = warning_PM10Chart.resize;



      const warning_COChart = echarts.init(document.getElementById('warning_CO'));

      this.option.title.text = title + '(CO)';

@@ -205,7 +323,6 @@
      this.option.series[0].data = CO;

      this.option.series[0].itemStyle.color = this.colors[2];

      warning_COChart.setOption(this.option, false);

      window.onresize = warning_COChart.resize;



      const warning_NO2Chart = echarts.init(document.getElementById('warning_NO2'));

      this.option.title.text = title + '(NO2)';

@@ -213,7 +330,6 @@
      this.option.series[0].data = NO2;

      this.option.series[0].itemStyle.color = this.colors[3];

      warning_NO2Chart.setOption(this.option, false);

      window.onresize = warning_NO2Chart.resize;



      const warning_O3Chart = echarts.init(document.getElementById('warning_O3'));

      this.option.title.text = title + '(O3)';

@@ -221,7 +337,6 @@
      this.option.series[0].data = O3;

      this.option.series[0].itemStyle.color = this.colors[4];

      warning_O3Chart.setOption(this.option, false);

      window.onresize = warning_O3Chart.resize;



      const warning_SO2Chart = echarts.init(document.getElementById('warning_SO2'));

      this.option.title.text = title + '(SO2)';

@@ -229,7 +344,15 @@
      this.option.series[0].data = SO2;

      this.option.series[0].itemStyle.color = this.colors[6];

      warning_SO2Chart.setOption(this.option, false);

      window.onresize = warning_SO2Chart.resize;

      
      window.addEventListener('resize', function() {

        warning_PM25Chart.resize();

        warning_PM10Chart.resize();

        warning_COChart.resize();

        warning_NO2Chart.resize();

        warning_O3Chart.resize();

        warning_SO2Chart.resize();

      });

    });

  }

}