【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
        }
      },
相关推荐
张晓~1833994812138 分钟前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周41 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021143 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
轻语呢喃1 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人1 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
LRH1 小时前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
自由逐风1 小时前
前端小数点精度问题解析
javascript
断竿散人1 小时前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
laperter1 小时前
js中继承关系杂乱?这篇带你理清
javascript