2022-12-07 update

1. rateAnalysis dialog 增加图表dblclick事件, 双击后图表变大, 二次双击则恢复
2. 由于1的功能,  延伸出-> barChart chart lineChart scatterSingleChart 等组件中添加对props的width height 监听, 并触发chart.resize()

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header">
+  <div class="header pl-[20px]">
     <!-- 折叠按钮 -->
     <div> 
       <div class="collapse-btn" @click="collapseChage">

src/pages/dataAnalysis/lineAnalysis/components/barChart.vue

@@ -130,6 +130,13 @@ watch(() => option, (newVal, oldVal) => {
 		echartIns.setOption(toRaw(newVal.value))
 	}
 }, { deep: true })
+
+watch([() => props.width, () => props.height],(newVal, oldVal) => {
+	if(chartIns.value){
+		const echartIns = toRaw(chartIns.value)
+		nextTick(() => echartIns.resize())
+	}
+})
 const funBrushChange = (flag) => {
 	const echartIns = toRaw(chartIns.value)
 	echartIns.dispatchAction({

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

@@ -86,6 +86,13 @@ watch(() => option, (newVal, oldVal) => {
 	}
 }, { deep: true })
 
+watch([() => props.width, () => props.height],(newVal, oldVal) => {
+	if(chartIns.value){
+		const echartIns = toRaw(chartIns.value)
+		nextTick(() => echartIns.resize())
+	}
+})
+
 onMounted(() => {
 	nextTick(() => {
 		echarts.registerTheme('chartTheme', chartTheme)

src/pages/dataAnalysis/rateAnalysis/components/lineChart.vue

@@ -132,6 +132,12 @@ watch(() => option, (newVal, oldVal) => {
 		echartIns.setOption(toRaw(newVal.value))
 	}
 }, { deep: true })
+watch([() => props.width, () => props.height],(newVal, oldVal) => {
+	if(chartIns.value){
+		const echartIns = toRaw(chartIns.value)
+		nextTick(() => echartIns.resize())
+	}
+})
 const funBrushChange = (flag) => {
 	const echartIns = toRaw(chartIns.value)
 	echartIns.dispatchAction({

src/pages/dataAnalysis/rateAnalysis/components/scatterSingleChart.vue

@@ -117,7 +117,12 @@ watch(() => option, (newVal, oldVal) => {
 		echartIns.setOption(toRaw(newVal.value))
 	}
 }, { deep: true })
-
+watch([() => props.width, () => props.height],(newVal, oldVal) => {
+	if(chartIns.value){
+		const echartIns = toRaw(chartIns.value)
+		nextTick(() => echartIns.resize())
+	}
+})
 onMounted(() => {
 	nextTick(() => {
 		echarts.registerTheme('chartTheme', chartTheme)

src/pages/dataAnalysis/rateAnalysis/index.vue

@@ -5,12 +5,12 @@ import chartCop from './components/chart.vue'
 import lineChartCop from './components/lineChart.vue'
 import SubmitBtn from '../../../components/SubmitBtn.vue'
 import scatterSingleChartCop from './components/scatterSingleChart.vue'
-import { ElMessage } from 'element-plus';
+// import { ElMessage } from 'element-plus';
 import { onMounted, ref, onActivated, shallowRef, reactive, nextTick } from 'vue'
 import request from '@/api/axios.js'
 import tools from '@tools/htmlToPdf.js'
 // import flowerRes from '@/data/flower.json'
-import lineChartRes from '@/data/lineNew.json'
+// import lineChartRes from '@/data/lineNew.json'
 /**配置参数 */
 const treeHeight = ref(window.innerHeight - 140 + 'px') //tree高度
 const excelHeight = ref(window.innerHeight - 140 + 'px') //excel高度
@@ -226,7 +226,6 @@ const funSubmit = async () => {
 		}
 	}
 	if(lineRes.code === 200){
-		console.log(lineRes.data)
 		if(lineRes.data?.length){
 			lineDataSet.value[0].source = lineRes.data[0].scatter.map(o => {
 				return [o.x+'', o.y]
@@ -297,6 +296,7 @@ const lineDataSet = ref([
 		source: []
 	}
 ])
+// 圈选散点触发函数
 const funChartSelect = async (batch) => {
 	const wDataArr = []
 	const yDataArr = []
@@ -410,6 +410,8 @@ const actCopList = ref([
 	// 	dataset: []
 	// }
 ])
+// 作为actCopList的备份 在actCopList赋值多个时 同时赋值, 在dialog弹出时清空. 作用: 在actCopList变化时, 重新赋值原始数据
+const actCopListBak = ref([]) 
 const checkAll = ref(true)
 const queryForm = reactive({
 	checkIds: []
@@ -450,6 +452,7 @@ const funActCop = (obj, type) => {
 	obj.id = chartId
 	chartId ++
 	dialog.value = true
+	actCopListBak.value = []
 	nextTick(() => {
 		actCopList.value = [obj]
 	})
@@ -480,6 +483,7 @@ const funDiaSubmit = async () => {
 		console.log(res)
 		if(res.code===200){
 			actCopList.value = []
+			actCopListBak.value = [] //清空备份
 			if(res.data?.length){
 				for(const chart of res.data){
 					if(actChartName.value==='chartCop1'){
@@ -624,6 +628,7 @@ const funDiaSubmit = async () => {
 						chartId++
 					}
 				}
+				actCopListBak.value = actCopList.value
 			}
 		}
 	}
@@ -634,6 +639,15 @@ const funDiaExport = () => {
 		exportLoading.value = false
 	})
 }
+const funDbClick = (obj) => {
+	if(actCopListBak.value.length > 1){ //判断大于1时, 才有双击放大功能
+		if(actCopList.value.length === 1){
+			actCopList.value = actCopListBak.value
+		}else{
+			actCopList.value = [obj]
+		}
+	}
+}
 /**created */
 // funGetTree()
 /**activated */
@@ -695,7 +709,7 @@ onActivated(() => {
 				<div ref="diaPanelRef" class="flex flex-wrap justify-center items-center h-[650px] overflow-y-auto overflow-x-hidden">
 					<component :is="item.actCop" :width="actCopList.length > 1 ? '50%' : '100%'" height="100%" v-for="item in actCopList"
 						:key="item.id" :xAxis="item.xAxis" :subtext="item.subtext" :title="item.title"
-						:series="item.series" :isDiaAlone="(actCopList.length === 1)" :yAxis="item.yAxis" :dataset="item.dataset" :brush="item.isBrush" @getSelected="funChartSelect"></component>
+						:series="item.series" :isDiaAlone="(actCopList.length === 1)" @dblclick="funDbClick(item)" :yAxis="item.yAxis" :dataset="item.dataset" :brush="item.isBrush" @getSelected="funChartSelect"></component>
 				</div>
 			</div>
 		</el-dialog>