风向风速 功能展现

xufenglei

2018-07-30 89ba2c7490a743e383f3c991d993291dc9120b4c

风向风速 功能展现

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

@@ -26,6 +26,7 @@
    <div nz-col [nzSpan]="12"><div id="forecasting_humidity" style="height: 300px; width: 100%"></div></div>

    <div nz-col [nzSpan]="12"><div id="forecasting_pressure" style="height: 300px; width: 100%"></div></div>

    <div nz-col [nzSpan]="12"><div id="forecasting_uvi" style="height: 300px; width: 100%"></div></div>

    <div nz-col [nzSpan]="12"><div id="forecasting_wind" style="height: 300px; width: 100%"></div></div>



    <!-- 15天 -->

    <div nz-col [nzSpan]="12"><div id="forecasting_temp_day" style="height: 300px; width: 100%"></div></div>


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

@@ -22,6 +22,7 @@


  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'));

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

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

        forecasting_uviChart.setOption(this.option, false);



        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 = [];

@@ -162,6 +278,7 @@
          forecasting_humidityChart.resize();

          forecasting_pressureChart.resize();

          forecasting_uviChart.resize();

          forecasting_windChart.resize();

          forecasting_temp_dayChart.resize();

        });

      });