Forráskód Böngészése

2022-12-05 update bug fix

1. 修复rateAnalysis 单图表dialog时, 报错的问题 (由于actCop组件先变动导致echart报错)
2. 调整dialog弹出后 chart.vue的legend位置.
moccus 2 éve
szülő
commit
12f15d7ab7

+ 2 - 2
src/pages/dataAnalysis/rateAnalysis/chartTheme.json

@@ -12,10 +12,10 @@
 	"textStyle": {},
 	"title": {
 			"textStyle": {
-					"color": "#b3b3b3"
+					"color": "#000"
 			},
 			"subtextStyle": {
-					"color": "#b3b3b3"
+					"color": "#000"
 			}
 	},
 	"line": {

+ 4 - 21
src/pages/dataAnalysis/rateAnalysis/components/chart.vue

@@ -33,9 +33,9 @@ const props = defineProps({
 		type: String,
 		required: false
 	},
-	isRadar: {  //是否显示雷达图
+	// 是否为dialog中单表
+	isDiaAlone: {
 		type: Boolean,
-		required: false,
 		default: false
 	}
 })
@@ -52,30 +52,13 @@ const option = computed({
 			},
 			angleAxis: props.xAxis || {},
 			radiusAxis: {},
-			radar: props.isRadar?  [  //雷达图设定区域
-				{
-					indicator: props.xAxis.data.map(o => {
-						return {
-							name: o
-						}
-					}) || [],
-					center: ['60%','50%'],
-					radius: '70%',
-					splitLine: {
-						show: false,
-					},
-					splitArea: {
-						show: false
-					}
-				},
-			]: {},
 			polar: {
 				radius: '70%',
 				center: ['60%','50%']
 			},
 			tooltip: {
 				formatter: (params) => {
-					return params.componentSubType==='radar'? `${params.name}` : `${params.seriesName}m<br/>${params.value>1? '频次:'+ params.value: ''}`
+					return params.componentSubType==='line'? `${params.seriesName}频次:${params.value}` : `${params.seriesName}m<br/>${params.value>1? '频次:'+ params.value: ''}`
 				},
 				confine: true
 			},
@@ -83,7 +66,7 @@ const option = computed({
 			legend: {
 				show: true,
 				orient: 'vertical',
-				left: 30,
+				left: props.isDiaAlone? '22%' : '5%',
 				itemWidth: 16,
 				itemHeight: 10,
 				textStyle: {

+ 0 - 2
src/pages/dataAnalysis/rateAnalysis/components/lineChart.vue

@@ -128,14 +128,12 @@ const option = computed({
 })
 watch(() => option, (newVal, oldVal) => {
 	if (chartIns.value) {
-		console.log(newVal)
 		const echartIns = toRaw(chartIns.value)
 		echartIns.setOption(toRaw(newVal.value))
 	}
 }, { deep: true })
 const funBrushChange = (flag) => {
 	const echartIns = toRaw(chartIns.value)
-		console.log(echartIns)
 	echartIns.dispatchAction({
 			type: "takeGlobalCursor",
 			// 如果想变为“可刷选状态”,必须设置。不设置则会关闭“可刷选状态”。

+ 19 - 22
src/pages/dataAnalysis/rateAnalysis/index.vue

@@ -171,7 +171,6 @@ const funSubmit = async () => {
 							show: true
 						},
 					},
-					isRadar: false,
 					series: chart.roses?.length ?chart.roses.map((o, index) => {
 						return {
 							type: 'bar',
@@ -198,7 +197,6 @@ const funSubmit = async () => {
 							show: true
 						}
 					},
-					isRadar: false, //显示雷达图
 					series: chart.count?.length? [...chart.count.map((o,index) => {
 								return {
 									type: 'bar',
@@ -217,7 +215,7 @@ const funSubmit = async () => {
 									trigger: 'item'
 								},
 								// areaStyle: {},
-								name: '对风频次',
+								name: '对风',
 								data: chart.radar
 							}]: []
 				})
@@ -238,7 +236,6 @@ const funSubmit = async () => {
 				symbolSize: 0, //设定实心点的大小
 				smooth: true, //这个是把线变成曲线
 				data: lineRes.data[0].count,
-				xAxisIndex: 0,
 				yAxisIndex: 1,
 			},
 			{
@@ -256,7 +253,6 @@ const funSubmit = async () => {
 					x: 'x',
 					y: 'y'
 				},
-				xAxisIndex: 0,
 				yAxisIndex: 0,
 			}]
 		}
@@ -400,7 +396,6 @@ const wtTab = ref('table')
 const dialog = ref(false)
 const actChartName = ref('')
 const actDiaTitle = ref('')
-const actCop = shallowRef(chartCop)
 const actCopList = ref([
 	// {
 	// 	xAxis: [],
@@ -420,28 +415,32 @@ const funActCop = (obj, type) => {
 	switch(type){
 		case 'chartCop1':
 			actChartName.value = 'chartCop1'
-			actCop.value = chartCop
+			obj.actCop = shallowRef(chartCop)
 			actDiaTitle.value = '风速风向玫瑰图'
 			break
 		case 'chartCop2':
 			actChartName.value = 'chartCop2'
-			actCop.value = chartCop
+			obj.actCop = shallowRef(chartCop)
 			actDiaTitle.value = '风速风向频次玫瑰图'
 			break
 		case 'lineChartCop':
 			actChartName.value = 'lineChartCop'
-			actCop.value = lineChartCop
+			obj.actCop = shallowRef(lineChartCop)
 			actDiaTitle.value = '对风偏差分析图'
 			break
 		case 'scatterSingleChartCop':
 			actChartName.value = 'scatterSingleChartCop'
-			actCop.value = scatterSingleChartCop
+			obj.actCop = shallowRef(scatterSingleChartCop)
 			actDiaTitle.value = '静态偏航对风分析图'
 			break
 	}
+	obj.isBrush = type === 'lineChartCop' ? true :false
+	obj.id = chartId
+	chartId ++
+	obj.isDiaAlone = true
 	dialog.value = true
 	nextTick(() => {
-		actCopList.value = [{...obj, id: 0, isBrush: type === 'lineChartCop' ? true :false}]
+		actCopList.value = [obj]
 	})
 }
 const funDiaSubmit = async () => {
@@ -461,7 +460,6 @@ const funDiaSubmit = async () => {
 			break
 	}
 	if(url){
-		let chartId = 1
 		const res = await request.get(url, {
 			params: {
 				ids: queryForm.checkIds.join(','),
@@ -477,6 +475,7 @@ const funDiaSubmit = async () => {
 						actCopList.value.push({
 							id: chartId,
 							isBrush: false,
+							actCop: shallowRef(chartCop),
 							title: chart.wt,
 							subtext: '风速风向玫瑰图',
 							xAxis: {
@@ -487,7 +486,6 @@ const funDiaSubmit = async () => {
 									show: true
 								},
 							},
-							isRadar: false,
 							series: chart.roses?.length ?chart.roses.map((o, index) => {
 								return {
 									type: 'bar',
@@ -507,6 +505,7 @@ const funDiaSubmit = async () => {
 						actCopList.value.push({
 							id: chartId,
 							isBrush: false,
+							actCop: shallowRef(chartCop),
 							title: chart.wt,
 							subtext: '风速风向频次玫瑰图',
 							xAxis: {
@@ -517,7 +516,6 @@ const funDiaSubmit = async () => {
 									show: true
 								}
 							},
-							isRadar: false, //显示雷达图
 							series: chart.count?.length? [...chart.count.map((o,index) => {
 										return {
 											type: 'bar',
@@ -536,7 +534,7 @@ const funDiaSubmit = async () => {
 									trigger: 'item'
 								},
 								// areaStyle: {},
-								name: '对风频次',
+								name: '对风',
 								data: chart.radar
 							}]: []
 						})
@@ -546,6 +544,7 @@ const funDiaSubmit = async () => {
 						actCopList.value.push({
 							id: chartId,
 							isBrush: false,
+							actCop: shallowRef(lineChartCop),
 							title: chart.wtId,
 							subtext: '对风偏差分析图',
 							xAxis: {
@@ -590,7 +589,6 @@ const funDiaSubmit = async () => {
 								symbolSize: 0, //设定实心点的大小
 								smooth: true, //这个是把线变成曲线
 								data: chart.count,
-								xAxisIndex: 0,
 								yAxisIndex: 1,
 							},
 							{
@@ -608,7 +606,6 @@ const funDiaSubmit = async () => {
 									x: 'x',
 									y: 'y'
 								},
-								xAxisIndex: 0,
 								yAxisIndex: 0,
 							}]
 
@@ -675,10 +672,10 @@ onActivated(() => {
 					<submit-btn desc="多台展示" @click="funDiaSubmit"></submit-btn>
 				</el-form-item>
 			</el-form>
-			<div class="flex flex-wrap justify-center items-center h-[600px] overflow-y-auto overflow-x-hidden">
-				<component :is="actCop" :width="actCopList.length > 1 ? '50%' : '100%'" height="600px" v-for="item in actCopList"
-					:key="item.id" :xAxis="item.xAxis" :subtext="item.subtext" :title="item.title" :isRadar="item.isRadar"
-					:series="item.series" :yAxis="item.yAxis" :dataset="item.dataset" :brush="item.isBrush" @getSelected="funChartSelect"></component>
+			<div class="flex flex-wrap justify-center items-center h-[750px] overflow-y-auto overflow-x-hidden">
+				<component :is="item.actCop" :width="actCopList.length > 1 ? '50%' : '100%'" height="600px" v-for="item in actCopList"
+					:key="item.id" :xAxis="item.xAxis" :subtext="item.subtext" :title="item.title"
+					:series="item.series" :isDiaAlone="item.isDiaAlone || false" :yAxis="item.yAxis" :dataset="item.dataset" :brush="item.isBrush" @getSelected="funChartSelect"></component>
 			</div>
 		</el-dialog>
 		<div class="relative shadow rounded-[6px] shadow-blue-500 px-[10px] pt-[10px] pb-[10px]">
@@ -703,7 +700,7 @@ onActivated(() => {
 								<ZoomIn />
 							</el-icon>
 							<chart-cop class="" height="100%" width="100%" :xAxis="item.xAxis" :subtext="item.subtext"
-								:title="item.title" :isRadar="item.isRadar" :series="item.series">
+								:title="item.title" :series="item.series">
 							</chart-cop>
 						</div>
 						<div class="mr-[10px] w-[49%] h-[49%] flex flex-col items-end shadow rounded-[6px] shadow-blue-500" v-if="!!lineSeries.length">