先来个图示
简单粗暴,直接看代码
<template>
<div>
<div class='charts' ref='charts' style='width:700px;height:500px;'><div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'XXX',
data() {
return {
myCharts: null,
}
},
mounted() {
// 初始化柱状图
this.setCharts()
window.addEventListener('resize', () => {
//图表自适应
this.myCharts.resize()
})
},
methods: {
// 展示折线图
setCharts() {
// 初始化实例
this.myCharts = echarts.init(this.$refs.charts)
// 配置玫瑰图
let windOption = {
title: {
text: '风玫瑰图',
// subtext: '虚构数据',
x: 'left'
},
angleAxis: {
type: 'category',
data: [
'N',
'NNE',
'NE',
'ENE',
'E',
'ESE',
'SE',
'SSE',
'S',
'SSW',
'SW',
'WSW',
'W',
'WNW',
'NW',
'NNW'
],
z: 0,
boundaryGap: false,
splitLine: {
show: true,
lineStyle: {
color: '#ddd',
type: 'solid'
}
},
axisLine: {
show: false
}
},
radiusAxis: {
center: ['50%', '50%']
},
grid: {
// 控制图的大小,调整下面这些值就可以,
x: 40,
x2: 100,
y2: 150 // y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
},
polar: {},
series: [
{
type: 'bar',
data: [
1.81, 0.62, 0.82, 0.59, 0.62, 1.22, 1.61, 2.04, 2.66, 2.96, 2.53,
1.97, 1.64, 1.32, 1.58, 1.51
],
coordinateSystem: 'polar',
name: '<0.5m/s',
stack: 'a',
itemStyle: {
normal: {
color: 'rgb(124, 181, 236)'
}
}
},
{
type: 'bar',
data: [
1.78, 1.09, 0.82, 1.22, 2.2, 2.01, 3.06, 3.42, 4.74, 4.14, 4.01,
2.66, 1.71, 2.4, 4.28, 5.0
],
coordinateSystem: 'polar',
name: '0.5-2m/s',
stack: 'a',
itemStyle: {
normal: {
color: 'rgb(67, 67, 72)'
}
}
},
{
type: 'bar',
data: [
0.16, 0.0, 0.07, 0.07, 0.49, 1.55, 2.37, 1.97, 0.43, 0.26, 1.22,
1.97, 0.92, 0.99, 1.28, 1.32
],
coordinateSystem: 'polar',
name: '2-4m/s',
stack: 'a',
itemStyle: {
normal: {
color: 'rgb(144, 237, 125)'
}
}
},
{
type: 'bar',
data: [
0.0, 0.0, 0.0, 0.0, 0.0, 0.3, 2.14, 0.86, 0.0, 0.0, 0.49, 0.79,
1.45, 1.61, 0.76, 0.13
],
coordinateSystem: 'polar',
name: '4-6m/s',
stack: 'a',
itemStyle: {
normal: {
color: 'rgb(247, 163, 92)'
}
}
},
{
type: 'bar',
data: [
0.0, 0.0, 0.0, 0.0, 0.0, 0.13, 1.74, 0.53, 0.0, 0.0, 0.13, 0.3,
0.26, 0.33, 0.66, 0.23
],
coordinateSystem: 'polar',
name: '6-8m/s',
stack: 'a',
itemStyle: {
normal: {
color: 'rgb(128, 133, 233)'
}
}
},
{
type: 'bar',
data: [
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.39, 0.49, 0.0, 0.0, 0.0, 0.0, 0.1,
0.0, 0.69, 0.13
],
coordinateSystem: 'polar',
name: '8-10m/s',
stack: 'a',
itemStyle: {
normal: {
color: 'rgb(241, 92, 128)'
}
}
},
{
type: 'bar',
data: [
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.13, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.03, 0.07
],
coordinateSystem: 'polar',
name: '>10m/s',
stack: 'a',
itemStyle: {
normal: {
color: 'rgb(228, 211, 84)'
}
}
}
],
legend: {
show: true,
top: 'bottom',
right: 'right',
data: [
'<0.5m/s',
'0.5-2m/s',
'2-4m/s',
'4-6m/s',
'6-8m/s',
'8-10m/s',
'>10m/s'
],
orient: 'vertical'
}
};
this.myCharts.setOption(windOption)
},
}
}
</script>