SMO/src/views/analysis/windSpeed/index.vue

<template>
	<div class="table-box">
		<div class="card table-search" style="overflow: hidden;">
			<el-form ref="formRef" :model="searchParam" :inline="true" label-width="auto">
				<el-form-item label="自动站：" prop="base">
					<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
						<el-option v-for="item in baseOptions" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="观测时间：" prop="base">
					<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
						start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px" />
				</el-form-item>
				<el-form-item>
					<div>
						<el-button plain>查询</el-button>
						<el-button plain @click="resetForm(formRef)">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="main_list">
			<el-row :gutter="15">
				<el-col :span="24">
					<div class="chart_item">
						<div style="font-weight: bold;" class="item_title">
							<span>风向风速玫瑰图</span>
						</div>
						<div class="mt5">
							<div ref="data" class="data_box"></div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts" name="dataSynthesis">
import * as echarts from 'echarts';

import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";


const formRef = ref()
const data = ref()


const router = useRouter();
const searchParam = reactive({
	base: undefined,
	date: ''

})
const baseOptions = ref([{
	value: 0,
	label: 'M1986',
},
{
	value: 1,
	label: 'M1987',
}])

// resetForm
const resetForm = (formEl) => {
	if (!formEl) return;
	formEl.resetFields();
};

const showData = () => {

	let mychart = echarts.init(data.value);
	let option = {

		legend: {
			// data: ['Allocated Budget', 'Actual Spending']
		},
		radar: {
			shape: 'circle',
			name: { // (圆外的标签)雷达图每个指示器名称的配置项。
				formatter: '{value}',
				textStyle: {
					fontSize: 15,
					color: '#000'
				}
			},
			nameGap: 5,
			// 指示器名称和指示器轴的距离。[ default: 15 ]
			splitNumber: 7,
			splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
				lineStyle: {
					color: '#bbbbbb',
					// 分隔线颜色
					width: 1,
					// 分隔线线宽
				}
			},
			splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
				show: true,
				areaStyle: { // 分隔区域的样式设置。
					color: ['#fff', '#fff'],
					// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
				}
			},
			indicator: [
				{ name: 'N', max: 21, axisLabel: { show: true, color: '#000' }, },
				{ name: 'NNW', max: 21 },
				{ name: 'NW°', max: 21 },
				{ name: 'WNW', max: 21 },
				{ name: 'W°', max: 21 },
				{ name: 'WSW', max: 21 },
				{ name: 'WS°', max: 21 },
				{ name: 'SSW', max: 21 },
				{ name: 'S', max: 21 },
				{ name: 'SSE', max: 21 },
				{ name: 'SE', max: 21 },
				{ name: 'ESE', max: 21 },
				{ name: 'E', max: 21 },
				{ name: 'ENE', max: 21 },
				{ name: 'NE', max: 21 },
				{ name: 'NNE', max: 21 },
			]
		},
		series: [
			{
				name: 'Budget vs spending',
				type: 'radar',
				symbolSize: 0,//拐点大小
				data: [
					{
						value: [0, 12, 12, 12, 0, 0, 0, 12, 15, 15, 9, 0, 0, 0, 15, 8],
						name: '风向',
						itemStyle: { // 单个拐点标志的样式设置。
							normal: {

								// color:'#d1d6dd'
							}
						},
					},
					{
						value: [0, 4, 16, 9, 0, 0, 0, 15, 13, 10, 12, 0, 0, 0, 5, 11],
						name: '风速 (0.1m/s)'
					}
				]
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}
onMounted(() => {
	showData()


})

</script>
<style scoped lang="scss">
.main_list {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: calc(100vh - 150px);
	margin-bottom: 10px;
	overflow-y: scroll;
	overflow-x: hidden;


	.chart_item {
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
		// height: 100%;
		// margin-bottom: 15px;


		.item_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.FTP_box {
			padding: 0 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.FTP_item {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					width: 56px;
					margin-bottom: 20px;
				}
			}

		}
	}

	.info_box {
		.info_title {
			color: #999999;
			font-size: 16px;
		}

		.info_content {
			height: 40px;
			font-weight: bold;
			color: #000;
			font-size: 26px;
		}
	}

}

.data_box {
	height: calc(100vh - 215px);
	// height: 100%;
}
</style>