vue echarts 风玫瑰图

Vue与Echarts结合可以实现风玫瑰图的展示。首先，你需要在Vue项目中安装Echarts，可以通过npm命令进行安装：

npm install echarts --save

安装完成后，在你的Vue组件中引入Echarts：

import echarts from 'echarts'

接下来，创建一个div用于显示风玫瑰图：

<div id="chart" style="width: 400px;height: 400px"></div>

在Vue组件的mounted生命周期钩子函数中，使用Echarts初始化并绘制风玫瑰图：

mounted() {
  // 获取chart div元素
  const chartElement = document.getElementById('chart')
  // 使用Echarts初始化图表
  const chart = echarts.init(chartElement)
  
  // 配置风玫瑰图的数据和样式
  const option = {
    title: {
      text: '风玫瑰图'
    },
    tooltip: {},
    legend: {
      data: ['风向']
    },
    series: [{
      name: '风向',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        {value: 335, name: '北风'},
        {value: 310, name: '东北风'},
        {value: 234, name: '东风'},
        {value: 135, name: '东南风'},
        {value: 1548, name: '南风'},
        {value: 154, name: '西南风'},
        {value: 335, name: '西风'},
        {value: 310, name: '西北风'}
      ],
      roseType: 'angle',
      label: {
        normal: {
          show: true,
          formatter: '{b} : {c} ({d}%)'
        }
      },
      emphasis: {
        label: {
          show: true
        }
      }
    }]
  }
  
  // 使用配置项显示图表
  chart.setOption(option)
}

这样就可以在Vue项目中绘制出风玫瑰图了。当然，你可以根据自己的需求修改数据和样式。希望能对你有所帮助！