2022-11-23 update

1. 调整玫瑰图展示效果

src/pages/curveDeviation/rateAnalysis/components/chart.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import util from "@tools/util";
+import { ref, toRaw, computed, onMounted, watch } from 'vue';
 import * as echarts from 'echarts'
-import { computed, onMounted, watch } from 'vue';
 const chartId = 'chart-' + util.newGUID(); //chartId
-let chartIns = null  //chart 实例
+const chartIns = ref(null)  //chart 实例
 const props = defineProps({
 	xAxis: {
 		type: Object,
@@ -27,6 +27,10 @@ const props = defineProps({
 	title: {
 		type: String,
 		required: false
+	},
+	subtext: {
+		type: String,
+		required: false
 	}
 })
 
@@ -34,68 +38,56 @@ const props = defineProps({
 const option = computed({
 	get() {
 		return {
-			angleAxis: props.xAxis || {
-				type: 'category',
-				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+			title: {
+				text: props.title || '',
+				subtext: props.subtext || '',
+				textStyle: {
+					fontSize: util.vh(16),
+					color: "#000",
+				},
+				top: 10,
+				left: 30
 			},
-			// title: props.title ||'',
+			angleAxis: props.xAxis || {},
 			radiusAxis: {},
-			polar: {},
+			polar: {
+				radius: '70%',
+				center: ['60%','50%']
+			},
 			tooltip: {},
-			series: props.series || [
-				{
-					type: 'bar',
-					data: [1, 2, 3, 4, 3, 5, 1],
-					coordinateSystem: 'polar',
-					name: 'A',
-					stack: 'a',
-					emphasis: {
-						focus: 'series'
-					}
-				},
-				{
-					type: 'bar',
-					data: [2, 4, 6, 1, 3, 2, 1],
-					coordinateSystem: 'polar',
-					name: 'B',
-					stack: 'a',
-					emphasis: {
-						focus: 'series'
-					}
-				},
-				{
-					type: 'bar',
-					data: [1, 2, 3, 4, 1, 2, 5],
-					coordinateSystem: 'polar',
-					name: 'C',
-					stack: 'a',
-					emphasis: {
-						focus: 'series'
-					}
-				}
-			],
+			series: props.series || [],
 			legend: {
 				show: true,
-				// data: ['A', 'B', 'C']
+				orient: 'vertical',
+				left: 30,
+				itemWidth: 16,
+				itemHeight: 10,
+				textStyle: {
+					fontSize: util.vh(10)
+				},
+				top: 'middle',
+				data: ['0-2.5','2.5-5','5-7.5','7.5-10','10-12.5','12.5-15','15-17.5','17.5-20','20-22.5','22.5-25','25-inf']
 			}
 		}
 	},
 	set(val) { }
 })
 watch(() => option, (newVal, oldVal) => {
-	if (chartIns) {
+	if (chartIns.value) {
 		console.log(newVal)
-		chartIns.setOption(newVal)
+		const echartIns = toRaw(chartIns.value)
+		echartIns.setOption(newVal)
 	}
 }, { deep: true })
 
 onMounted(() => {
-	chartIns = echarts.init(document.getElementById(chartId))
+	const echartIns =	echarts.init(document.getElementById(chartId)) 
+	chartIns.value = echartIns
 	console.log(JSON.stringify(option.value))
-	chartIns.setOption(option.value)
-	console.log(chartIns)
+	echartIns.setOption(option.value)
+	console.log(echartIns)
 })
 </script>
 <template>
-	<div :id="chartId" :style="{height: props.height, width: props.width}"></div>
+	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
 </template>

src/pages/curveDeviation/rateAnalysis/index.vue

@@ -114,6 +114,7 @@ const funText = (index) => {
 	return str
 }
 const chartData = ref<any>([]) //roses的chartList
+let chartId = 1
 /**submit */
 const funSubmit = async (params) => {
 	const rosesRes = await request.get('/wind/roses', {
@@ -128,7 +129,9 @@ const funSubmit = async (params) => {
 			chartData.value = []
 			for (const chart of rosesRes.data) {
 				chartData.value.push({
+					id: chartId,
 					title: chart.wt,
+					subtext: '风速风向分布图',
 					xAxis: {
 						type: 'value',
 						max: 360,
@@ -146,12 +149,18 @@ const funSubmit = async (params) => {
 						}
 					}): []
 				})
+				chartId++
 				chartData.value.push({
+					id: chartId,
 					title: chart.wt,
+					subtext: '风速风向频次图',
 					xAxis: {
 						type: 'category',
 						boundaryGap: false,
-						data: ['N', 'N-E', 'E', 'S-E', 'S', 'W-S', 'W', 'N-W']
+						data: ['北', '东北', '东', '东南', '南', '西南', '西', '西北'],
+						splitLine: {
+							show: true
+						}
 					},
 					series: chart.count?.length?  chart.count.map((o,index) => {
 						return {
@@ -166,6 +175,7 @@ const funSubmit = async (params) => {
 						}
 					}): []
 				})
+				chartId++
 			}
 		}
 	}
@@ -191,8 +201,8 @@ onActivated(() => {
 					@excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
 			</el-col>
 			<el-col :span="16">
-				<div :style="{ height: tableHeight }" class="flex flex-wrap justify-center overflow-y-auto">
-					<chart-cop height="500px" width="500px" v-for="item in chartData" :xAxis="item.xAxis" :title="item.title"
+				<div :style="{ height: tableHeight }" class="flex flex-wrap items-center justify-center overflow-x-hidden overflow-y-auto shadow rounded-[6px] shadow-blue-500">
+					<chart-cop height="49%" width="49%" v-for="item in chartData" :key="item.id" :xAxis="item.xAxis" :subtext="item.subtext" :title="item.title"
 						:series="item.series">
 					</chart-cop>
 				</div>