echarts画风向杆

1.安装echarts

2.引入echarts

4.获取数据，转换数据格式

   windProfile.title.text = `${moment(time.searchTime[0], 'YYYY-MM-DD HH:mm:ss').format(

        'YYYY-MM-DD HH:mm'

      )}-${moment(time.searchTime[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm')}——水平风风羽图`

      data.forEach(item => {

        windProfile.xAxis.data.push(moment(item.time, 'YYYY-MM-DD HH:mm:ss').format('HH:mm'))

        arr = item.fengKuoXianItems.filter(

          i => heightRange.less * 1000 <= i.height && i.height <= heightRange.greater * 1000

        )

        arr.forEach(item1 => {

          if (item1.direction && item1.speed) {

            windProfile.series[0].data.push({

              value: [

                moment(item.time, 'YYYY-MM-DD HH:mm:ss').format('HH:mm'),

                item1.height,

                transformationSpeed(item1.speed),

                item1.direction > 9999 ? '' : getWindPower(item1.direction),

                item1.speed > 9999 ? '' : getWindSpeed(item1.speed),

                item1.speed > 9999 ? '' : item1.speed.toFixed(2)

              ],

              label: {

                rotate: -item1.direction,

                color: `rgba(${getColor(colorData.value[0].stops, item1.speed).stop.join(',')})`

              }

            })

          }

        })

      })

1）转换字体  根据风速转字体

const transformation = [

  //风速转字体

  [1, 'm', 0],

  [3, 'k', 1],

  [5, '1', 2],

  [7, '2', 3],

  [9, '3', 4],

  [11, '4', 5],

  [13, '5', 6],

  [15, '6', 7],

  [17, '7', 8],

  [19, 'n', 9],

  [21, '8', 10],

  [23, '9', 11],

  [25, ':', 12],

  [27, ';', 13],

  [29, '<', 14],

  [31, '=', 15],

  [33, '>', 16],

  [35, '?', 17],

  [37, '@', 18],

  [39, 'A', 19],

  [41, 'B', 20],

  [43, 'C', 21],

  [45, 'D', 22],

  [47, 'E', 23],

  [49, 'F', 24],

  [51, 'G', 25],

  [53, 'H', 26],

  [55, 'I', 27],

  [57, 'J', 28],

  [999, 'K', 28]

]

//根据风速转字体

const transformationSpeed = speed => {

  for (let t = 0; t < transformation.length; t++) if (Number(speed) <= transformation[t][0]) return transformation[t][1]

  return '0'

}

注意修改echarts里series的配置项

2）转换风向  

const windPower = [

  //风向

  [11.25, '北风'],

  [33.75, '东北风'],

  [56.25, '东北风'],

  [78.75, '东北风'],

  [101.25, '东风'],

  [123.75, '东南风'],

  [146.25, '东南风'],

  [168.75, '东南风'],

  [191.25, '南风'],

  [213.75, '西南风'],

  [236.25, '西南风'],

  [258.75, '西南风'],

  [281.25, '西风'],

  [303.75, '西北风'],

  [326.25, '西北风'],

  [348.75, '西北风'],

  [1e3, '西北风']

]

// 获取风向

const getWindPower = e => {

  for (let t = 0; t < windPower.length; t++) if (e < windPower[t][0]) return windPower[t][1]

  return '无风'

}

3）转换风速 

const windSpeed = [

  //风速

  [0.2, 0],

  [1.5, 1],

  [3.3, 2],

  [5.4, 3],

  [7.9, 4],

  [10.7, 5],

  [13.8, 6],

  [17.1, 7],

  [20.7, 8],

  [24.4, 9],

  [28.4, 10],

  [32.6, 11],

  [36.9, 12],

  [41.4, 13],

  [46.1, 14],

  [50.9, 15],

  [56, 16],

  [61.2, 17]

]

//获取风速

const getWindSpeed = e => {

  for (let t = 0; t < windSpeed.length; t++) if (e < windSpeed[t][0]) return windSpeed[t][1].toFixed(2)

  return '0'

}

4）转换风字体颜色 

const colorData = ref([

  {

    stops: [

      { value: 0.2, stop: [176, 224, 248, 1] },

      { value: 2.6, stop: [144, 208, 248, 1] },

      { value: 3.4, stop: [120, 184, 248, 1] },

      { value: 5.5, stop: [80, 160, 240, 1] },

      { value: 8, stop: [60, 120, 220, 1] },

      { value: 10.8, stop: [40, 100, 200, 1] },

      { value: 13.9, stop: [0, 176, 8, 1] },

      { value: 17.2, stop: [248, 248, 0, 1] },

      { value: 20.8, stop: [248, 168, 0, 1] },

      { value: 24.5, stop: [248, 80, 0, 1] },

      { value: 28.5, stop: [248, 0, 0, 1] },

      { value: 32.7, stop: [248, 24, 80, 1] },

      { value: 37, stop: [240, 48, 152, 1] },

      { value: 46.2, stop: [232, 80, 232, 1] },

      { value: 51, stop: [224, 72, 72, 1] },

      { value: 56.1, stop: [200, 56, 56, 1] },

      { value: 61.3, stop: [160, 24, 32, 1] }

    ],

    fieldName: 'wind'

  }

])

// 风字体颜色

const getColor = (e, speed) => {

  let n = e[e.length - 1]

  const i = e.find(e => {

    if (speed <= e.value) return (n = e), n

  })

  return i && (n = i), n

}

欢迎补充，一起进步。