【vue echart】echart实现风速风向图

实现效果：

风向原始数据如下：

风速原始数据如下：

具体代码：

javascript 复制代码

<div id="echartFs" style="width: 100%; height: 80%" />

javascript 复制代码

    getRendererFs(item) {
      
      let yearList = item[0].dateList
      // 重组风速风向的数据，因为我们后端传回的风速风向数据是一个数组，一组数据为风速，一组数据为风向
      let fs;
      let fx;
      item.forEach((item2)=>{
        if(item2.monitorCnName=='风向'){
          fx=item2.data[0].hisData
        }else if(item2.monitorCnName=='风速'){
          fs=item2.data[0].hisData
        }
      })
      
      let fsfx=[]
      let sameTime=''
      fs.forEach((item,index)=>{
        let fxz=fx[index].data/10<0?-fx[index].data/10:fx[index].data/10
        fsfx.push({
          value:item.data,
          symbolRotate:fxz,
          symbolRotateStr:this.changeFX(fx[index].data)
        })
      })
      
      // 处理传入的数据
      let EChart = this.$echarts.init(document.getElementById("echartFs"))
      let config = {
            // X轴
            xAxis: {
                type: 'category',
                data: yearList,
                axisLabel:{
                  color: '#FFFFFF',
                  formatter:function(value,index){
                    return value.slice(11,13)
                  }
                },
                axisLine: {
            //y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#FFFFFF',
              width: 1,
              type: 'solid',
            },
          },
            },
            // Y轴
            yAxis: {
                type: 'value',
                name: "风速(m/s)",
                axisLine: {
            //y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#FFFFFF',
              width: 1,
              type: 'solid',
            },
          },
            },
            // 鼠标悬浮提示
            tooltip: {
                trigger: "axis",
                formatter(params) {
                    let tip =
                        "时间:" +
                        params[0].axisValue +
                        "<br/>风速:" +
                        (params[0].value ? params[0].value : "--") +
                        "m/s<br/>风向:" +
                        (params[0].data ? params[0].data.symbolRotateStr : "--")
                    return tip;
                },
            },
            // 数据
            series: [{
                data: fsfx,
                type: 'line',
                smooth: true, //这句就是让曲线变平滑的
                symbol: "arrow", //可以使用默认箭头，也可以换上自己的图片
                // symbol: "image://" + require("../../../assets/img/weather/wind.png"),
                symbolSize: 15,
                //折线样式
                lineStyle: {
                    color: '#38FFD7',
                    width: 2,
                },
                // symbol样式
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#38FFD7',
                    color: '#38FFD7'
                }
            }]
        };

      // 设置参数
      EChart.setOption(config)

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

javascript 复制代码

//处理风向的函数    
changeFX(data){
        data=data/10
        //console.log('计算后风向',this.qxData[1].data)
        if(data<0){
          data=-data
        }
        if(data==0){
          data='北'
          return data
        }else if(data>0&&data<90){
          data='东北'
          return data
        }else if(data==90){
          data='东'
          return data
        }else if(data>90&&data<180){
          data='东南'
          return data
        }else if(data==180){
          data='南'
          return data
        }else if(data>180&&data<270){
          data='西南'
          return data
        }else if(data==270){
          data='西'
          return data
        }else if(data>270&&data<360){
          data='西北'
          return data
        }else if(data==360){
          data='北'
          return data
        }
      },