echarts 绘制风速风向

使用echarts完成绘制风速风向的功能，大致效果如下：

pathData：风向的图形，风速风向需要提供类似于这收下形式的数组：

        //   [索引或其他值，风速值，风向值]
        //   [0, 1.34, 52.87],
        //   [1, 1.3, 42.51],
        //   [2, 1.73, 29.09],
        //   [3, 2.21, 21.22],
        //   [4, 2.72, 16.23],

以上方效果为例： x轴的数据显示的时间，wind2Arr.xAxis 存储x轴时间数组； wind2Arr.windSpeed 存储所有风速数组； wind2Arr.windDirection 存储所有风向数组； 将数组格式整理合并为下方格式输出 wind2Arr.mergeData：

      wind2Arr.xAxis.forEach((item, index) => {
          wind2Arr.mergeData.push([
            Number(index),
            wind2Arr.windSpeed[index],
            wind2Arr.windDirection[index],
          ]);
        });

代码片段：

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const dims = {
  time: 0,
  windSpeed: 1,
  R: 2
};
const arrowSize = 14;
function renderArrow(param, api) {
  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: api.value(dims.R),
    position: point,
    style: api.style({
      stroke: '#0d47a1',
      lineWidth: 1
    })
  };
}

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    },
    formatter(params) {
      let tip =
        params[0].data[0] +
        'm<br/>风速：' +
        params[0].data[1].toFixed(1) +
        'm/s<br/>风向：' +
        params[0].data[2].toFixed(1) +
        '°';
      return tip;
    }
  },
  legend: {
    top: '4%',
    right: '10%',
    data: ['风速', '风向']
  },
  grid: {
    top: '18%',
    left: '13%',
    bottom: '12%'
  },
  xAxis: {
    type: 'category',
    splitLine: {
      show: false //去掉网格中的垂直线
    },
    nameTextStyle: {
      padding: [0, 0, 0, -10] // 上右下左与原位置距离
    },
    data: ['0', '24', '48', '72']
  },
  yAxis: [
    {
      name: '风速',
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      position: 'right'
    },
    {
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false }
    }
  ],
  dataZoom: [
    {
      type: 'inside',
      xAxisIndex: 0,
      minSpan: 5
    }
  ],
  // 数据
  series: [
    {
      name: '风向',
      type: 'custom',
      renderItem: renderArrow,
      encode: {
        x: dims.time,
        y: dims.windSpeed
      },
      data: [
        [0, 1.34, 52.87],
        [1, 1.3, 42.51],
        [2, 1.73, 29.09],
        [3, 2.21, 21.22],
        [4, 2.72, 16.23]
      ],
      z: 10
    },
    {
      name: '风速',
      type: 'line',
      smooth: true,
      encode: {
        x: dims.time,
        y: dims.windSpeed
      },
      itemStyle: {
        color: 'rgba(60, 180, 196, 0.8)'
      },
      lineStyle: {
        width: 2
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(60, 180, 196, 0.2)'
              },
              {
                offset: 1,
                color: 'rgba(60, 180, 196, 0)'
              }
            ],
            false
          ),
          // shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        }
      },
      data: [
        [0, 1.34, 52.87],
        [1, 1.3, 42.51],
        [2, 1.73, 29.09],
        [3, 2.21, 21.22],
        [4, 2.72, 16.23]
      ],
      z: 1
    }
  ]
};

option && myChart.setOption(option);