feat: detail 分包

components/BarMixMap/BarMixMap.vue

@@ -19,7 +19,8 @@
 		data () {
 		  return {
 				ec: {
-					lazyLoad:true
+					lazyLoad:true,
+					option: {}
 				},
 				changeTimer: null
 		  }
@@ -27,40 +28,42 @@
 		components: {
 		  uniEcCanvas
 		},
-		onHide() {
+		beforeDestroy() {
 			clearInterval(this.changeTimer)
 		},
+		destroyed() {
+			clearInterval(this.changeTimer)
+		},
+		mounted() {
+			this.$refs['barMixMapCanvas'].init(this.inited)
+		},
 		methods: {
-			initChart() {
-				const that = this 
-				that.$nextTick(() => {
-					clearInterval(that.changeTimer)
-					that.$refs['barMixMapCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = that.$echarts.init(canvas, null, {
+			inited(canvas, width, height, canvasDpr) {
+				chart = this.$echarts.init(canvas, null, {
 					width: width,
 					height: height,
 					devicePixelRatio: canvasDpr
 				})
 				canvas.setChart(chart)
-						let options = that.setMapOption()
-						const { mapMixBarShow, mapMixBarChangeInterval} = that.elementInfo.option.mapMix
-						let flag = true
-						chart.setOption(options, true)
+				this.ec.option = this.setMapOption()
+				chart.setOption(this.ec.option, true)
 				chart.on('click', event => {
-							that.handleEchartsClick(event)
+					this.handleEchartsClick(event)
 				})
+				return chart
+			},
+			initChart() {
+				this.ec.option = this.setMapOption()
+				clearInterval(this.changeTimer)
+				const { mapMixBarShow, mapMixBarChangeInterval} = this.elementInfo.option.mapMix
+				let flag = true
 				// 柱状图 地图 切换
 				if(mapMixBarShow && mapMixBarChangeInterval) {
-							clearInterval(that.changeTimer)
-							that.changeTimer = setInterval(() => {
-								options = flag ? that.setBarOption() : that.setMapOption()
+					this.changeTimer = setInterval(() => {
+						this.ec.option = flag ? this.setBarOption() : this.setMapOption()
 						flag = !flag
-								chart.setOption(options, true)
 					}, mapMixBarChangeInterval * 1000)
 				}
-						return chart
-					})
-				})
 			},
 			setBarOption() {
 				const { dataList: { series } } = this.elementData

components/ChinaMap/ChinaMap.vue

@@ -19,25 +19,60 @@
 		data () {
 		  return {
 		    ec: {
-		      lazyLoad:true
+		      lazyLoad:true,
+			  option: {}
 		    }
 		  }
 		},
 		components: {
 		  uniEcCanvas
 		},
+		mounted() {
+			this.$refs['chinaMapCanvas'].init(this.inited)
+		},
 		methods: {
-			initChart() {
-				const that = this
-				that.$nextTick(() => {
-					that.$refs['chinaMapCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = that.$echarts.init(canvas, null, {
+			inited(canvas, width, height, canvasDpr) {
+				chart = this.$echarts.init(canvas, null, {
 					width: width,
 					height: height,
 					devicePixelRatio: canvasDpr
 				})
 				canvas.setChart(chart)
-						const { dataList } = that.elementData
+				const { dataList } = this.elementData
+				this.ec.option = {
+					title: {
+						...this.elementInfo.option.title
+					},
+					legend: {
+						...this.elementInfo.option.legend
+					},
+					geo: {
+						map: 'china',
+						zoom: 1.2,
+						roam: false,
+						itemStyle: {
+							areaColor: 'rgba(34, 70, 168, 0.7)',
+							borderColor: '#0692a4'
+						},
+						emphasis: {
+							itemStyle: {
+								areaColor: 'rgba(119, 139, 224, 0.548)'
+							}
+						}
+					},
+					series: this.dealSeriesData(dataList)
+				}
+				chart.setOption(this.ec.option)
+				chart.on('click', event => {
+					this.handleEchartsClick(event)
+				})
+				return chart
+			},
+			initChart() {
+				const { dataList } = this.elementData
+				this.$set(this.ec.option, 'series', this.dealSeriesData(dataList))
+			},
+			dealSeriesData(dataList) {
 				const seriesData = dataList.chinaMapAreas || []
 				// 处理成地图所需的数据格式
 				const finalData = [];
@@ -61,7 +96,6 @@
 							show: true,
 							period: 4,
 							trailLength: 0.02,
-									// symbol: 'arrow', // 箭头图标
 							symbolSize: 5 // 图标大小
 						},
 						lineStyle: {
@@ -72,7 +106,7 @@
 								curveness: 0.2
 							}
 						},
-								data: that.convertData(item[1])
+						data: this.convertData(item[1])
 					}, {
 						name: item[0],
 						type: 'effectScatter',
@@ -85,15 +119,15 @@
 							show: true,
 							position: 'right',
 							formatter: value => {
-										if(that.elementInfo.option.dataset.formatter) {
-											return that.$u.common.converFunction(that.elementInfo.option.dataset.formatter, value)
+								if(this.elementInfo.option.dataset.formatter) {
+									return this.$u.common.converFunction(this.elementInfo.option.dataset.formatter, value)
 								} else {
-											return that.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
+									return this.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
 								}
 							},
-									fontSize: that.elementInfo.option.dataset.fontSize,
-									color: that.elementInfo.option.dataset.color,
-									fontWeight: that.elementInfo.option.dataset.fontWeight
+							fontSize: this.elementInfo.option.dataset.fontSize,
+							color: this.elementInfo.option.dataset.color,
+							fontWeight: this.elementInfo.option.dataset.fontWeight
 						},
 						symbolSize: 4,
 						itemStyle: {
@@ -107,37 +141,7 @@
 						})
 					})
 				})
-						
-						const options = {
-							title: {
-								...that.elementInfo.option.title
-							},
-							legend: {
-								...that.elementInfo.option.legend
-							},
-							geo: {
-								map: 'china',
-								zoom: 1.2,
-								roam: false,
-								itemStyle: {
-									areaColor: 'rgba(34, 70, 168, 0.7)',
-									borderColor: '#0692a4'
-								},
-								emphasis: {
-									itemStyle: {
-										areaColor: 'rgba(119, 139, 224, 0.548)'
-									}
-								}
-							},
-							series: series
-						}
-						chart.setOption(options)
-						chart.on('click', event => {
-							that.handleEchartsClick(event)
-						})
-						return chart
-					})
-				})
+				return series
 			},
 			convertData(data) {
 				const res = []

pages.json

@@ -57,14 +57,21 @@
 				"onReachBottomDistance": 50
 			}
 
-		},{
-            "path" : "pages/details/details",
+		}
+    ],
+	"subpackages": [
+		{
+		  "root": "subPages",
+		  "pages": [
+			{
+			    "path" : "details/details",
 			    "style" :                                                                                    
 			    {
 			        "navigationBarTitleText": "",
 			        "enablePullDownRefresh": true
 			    }
-            
+			}
+		  ]
 		}
 	],
 	"globalStyle": {

pages/reports/reports.vue

@@ -67,7 +67,7 @@
 			
 			// 点击查看
 			onClick(item) {
-				const url = "/pages/details/details?id=" + item.id
+				const url = "/subPages/details/details?id=" + item.id
 				uni.navigateTo({
 				    url: url
 				})

pages/details/details.vue → subPages/details/details.vue

@@ -3,13 +3,13 @@
 		<template v-for="(element, index) in reportInfo.list">
 			<view
 				class="view-element"
-				v-show="!element.hide"
+				v-if="!element.hide"
 				:key="element.id"
 				:style="{
-					width: `${element.width * scale}px`,
-					height: `${element.height * scale}px`,
-					left: `${element.left * scale}px`,
-					top: `${element.top * scale}px`,
+					width: `${parseInt(element.width * scale)}px`,
+					height: `${parseInt(element.height * scale)}px`,
+					left: `${parseInt(element.left * scale)}px`,
+					top: `${parseInt(element.top * scale)}px`,
 					zIndex: index + 1
 				}"
 			>

uni-ec-canvas/uni-ec-canvas.vue

@@ -305,6 +305,8 @@
     },
 	beforeDestroy() {
 		this.$curChart.dispose()
+		this.$curChart.clear()
+		this.$curChart = {}
 	}
   };
 </script>